Example E1738
Visible to All Users

Grid View for ASP.NET Web Forms - How to create a custom pager and display a page size item

This example demonstrates how to create a pager template and add editors to the template to implement a custom pager. The template also contains a combo box editor that emulates a page size item.

Custom grid pager

Overview

Follow the steps below to create a custom pager:

  1. Specify the grid's PagerBar property and add editors to the template.
  2. Use a combo box editor to emulate a page size item. Populate the editor with items in the editor's server-side Init event handler.
  3. On the client, handle the editor's SelectedIndexChanged event. In the handler, send a callback to the grid and pass the editor's value as a parameter.
    ASPx
    <dx:ASPxComboBox ID="cbRecords" runat="server" ToolTip="Items Per Page" ValueType="System.Int32" OnInit="cbRecords_Init"> <ClientSideEvents SelectedIndexChanged="function (s, e) { grid.PerformCallback(s.GetValue()); }" Init="function (s, e) { s.SetValue(grid.cpPageSize); }" /> </dx:ASPxComboBox>
  4. Handle the grid's CustomCallback event. In the handler, assign the editor's value to the grid's PageSize property and save it to the corresponding session.
    C#
    protected void grid_CustomCallback(object sender, ASPxGridViewCustomCallbackEventArgs e) { ASPxGridView grid = sender as ASPxGridView; int newPageSize; if (e != null) { if (!int.TryParse(e.Parameters, out newPageSize)) return; grid.SettingsPager.PageSize = newPageSize; Session["GridCurrentPageSize"] = newPageSize; } }

Files to Review

Documentation

More Examples

Example Code

WebSite/Default.aspx
ASPx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <%@ Register Assembly="DevExpress.Web.v13.1, Version=13.1.14.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" Namespace="DevExpress.Web" TagPrefix="dxe" %> <%@ Register Assembly="DevExpress.Web.v13.1, Version=13.1.14.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" Namespace="DevExpress.Web" TagPrefix="dxwgv" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Custom pager</title> </head> <body> <form id="form1" runat="server"> <div> <dxe:ASPxComboBox ID="cbPagerPosition" runat="server" ValueType="System.String" AutoPostBack="true"> <Items> <dxe:ListEditItem Text="Top" Value="PosTop" /> <dxe:ListEditItem Text="Bottom" Value="PosBottom" Selected="true" /> <dxe:ListEditItem Text="Both" Value="PosBoth" /> </Items> </dxe:ASPxComboBox> <dxwgv:ASPxGridView ID="grid" runat="server" DataSourceID="sds" KeyFieldName="ProductID" ClientInstanceName="grid" OnLoad="grid_Load" OnDataBound="grid_DataBound" Width="600px" OnCustomCallback="grid_CustomCallback" OnInit="grid_Init" OnBeforeGetCallbackResult="grid_BeforeGetCallbackResult"> <Columns> <dxwgv:GridViewDataTextColumn FieldName="ProductID" ReadOnly="True" VisibleIndex="0"> <EditFormSettings Visible="False" /> </dxwgv:GridViewDataTextColumn> <dxwgv:GridViewDataTextColumn FieldName="ProductName" VisibleIndex="1"> </dxwgv:GridViewDataTextColumn> <dxwgv:GridViewDataTextColumn FieldName="SupplierID" VisibleIndex="2"> </dxwgv:GridViewDataTextColumn> <dxwgv:GridViewDataTextColumn FieldName="CategoryID" VisibleIndex="3"> </dxwgv:GridViewDataTextColumn> <dxwgv:GridViewDataTextColumn FieldName="QuantityPerUnit" VisibleIndex="4"> </dxwgv:GridViewDataTextColumn> <dxwgv:GridViewDataTextColumn FieldName="UnitPrice" VisibleIndex="5"> </dxwgv:GridViewDataTextColumn> <dxwgv:GridViewDataTextColumn FieldName="UnitsInStock" VisibleIndex="6"> </dxwgv:GridViewDataTextColumn> <dxwgv:GridViewDataTextColumn FieldName="UnitsOnOrder" VisibleIndex="7"> </dxwgv:GridViewDataTextColumn> <dxwgv:GridViewDataTextColumn FieldName="ReorderLevel" VisibleIndex="8"> </dxwgv:GridViewDataTextColumn> <dxwgv:GridViewDataCheckColumn FieldName="Discontinued" VisibleIndex="9"> </dxwgv:GridViewDataCheckColumn> </Columns> <Templates> <PagerBar> <table width="100%"> <tr> <td> <div style="text-align: right;"> <table> <tr> <td> Items per page: </td> <td> <dxe:ASPxComboBox ID="cbRecords" runat="server" ToolTip="Items Per Page" ValueType="System.Int32" Width="50px" OnInit="cbRecords_Init"> <ClientSideEvents SelectedIndexChanged="function (s, e) { grid.PerformCallback(s.GetValue()); }" Init="function (s, e) { s.SetValue(grid.cpPageSize); }" /> </dxe:ASPxComboBox> </td> <td> <dxe:ASPxHyperLink ID="lnkFirstPage" runat="server" Text="<<" NavigateUrl="javascript:void(0);"> <ClientSideEvents Click="function (s, e) { grid.GotoPage(0); }" /> </dxe:ASPxHyperLink> </td> <td> <dxe:ASPxHyperLink ID="lnkPrevPage" runat="server" Text="<" NavigateUrl="javascript:void(0);"> <ClientSideEvents Click="function (s, e) { grid.PrevPage(); }" /> </dxe:ASPxHyperLink> </td> <td> <dxe:ASPxComboBox ID="cbPage" runat="server" ToolTip="Current Page" ValueType="System.Int32" Width="50px" OnInit="cbPage_Init"> <ClientSideEvents SelectedIndexChanged="function (s, e) { grid.GotoPage(parseInt(s.GetValue()) - 1); }" Init="function (s, e) { s.SetValue(grid.cpPageIndex); }" /> </dxe:ASPxComboBox> </td> <td> <dxe:ASPxHyperLink ID="lnkNextPage" runat="server" Text=">" NavigateUrl="javascript:void(0);"> <ClientSideEvents Click="function (s, e) { grid.NextPage(); }" /> </dxe:ASPxHyperLink> </td> <td> <dxe:ASPxHyperLink ID="lnkLastPage" runat="server" Text=">>" NavigateUrl="javascript:void(0);"> <ClientSideEvents Click="function (s, e) { grid.GotoPage(grid.cpPageCount - 1); }" /> </dxe:ASPxHyperLink> </td> </tr> </table> </div> </td> </tr> </table> </PagerBar> </Templates> <SettingsPager AlwaysShowPager="true" /> </dxwgv:ASPxGridView> <asp:SqlDataSource ID="sds" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>" SelectCommand="SELECT * FROM [Products]"></asp:SqlDataSource> </div> </form> </body> </html>
WebSite/Default.aspx.cs
C#
using System; using System.Data; using System.Configuration; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using System.Web.UI.HtmlControls; using DevExpress.Web; public partial class _Default : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { } protected void grid_Load(object sender, EventArgs e) { ASPxGridView grid = sender as ASPxGridView; String position = String.Empty; if (cbPagerPosition.Value != null) position = cbPagerPosition.Value.ToString(); switch (position) { case "PosTop": grid.SettingsPager.Position = PagerPosition.Top; break; case "PosBoth": grid.SettingsPager.Position = PagerPosition.TopAndBottom; break; case "PosBottom": default: grid.SettingsPager.Position = PagerPosition.Bottom; break; } } protected void grid_DataBound(object sender, EventArgs e) { ASPxGridView grid = sender as ASPxGridView; grid.JSProperties["cpPageCount"] = grid.PageCount; grid.JSProperties["cpPageSize"] = grid.SettingsPager.PageSize; grid.JSProperties["cpPageIndex"] = grid.PageIndex + 1; } protected void cbPage_Init(object sender, EventArgs e) { ASPxComboBox cb = sender as ASPxComboBox; GridViewPagerBarTemplateContainer container = cb.NamingContainer as GridViewPagerBarTemplateContainer; ASPxGridView grid = container.Grid; int pageSize = grid.SettingsPager.PageSize; int totalRows = grid.VisibleRowCount; Double pageCount = Math.Ceiling(Convert.ToDouble(totalRows) / Convert.ToDouble(pageSize)); for (int i = 1; i <= grid.PageCount; i++) cb.Items.Add(i.ToString(), i); } protected void cbRecords_Init(object sender, EventArgs e) { Int32[] values = { 10, 25, 50, 100 }; ASPxComboBox cb = sender as ASPxComboBox; for (int i = 0; i < values.Length; i++) { cb.Items.Add(values[i].ToString(), values[i]); } if (Session["GridCurrentPageSize"] != null) { cb.Value = Convert.ToString(Session["GridCurrentPageSize"]); } } protected void grid_CustomCallback(object sender, ASPxGridViewCustomCallbackEventArgs e) { ASPxGridView grid = sender as ASPxGridView; int newPageSize; if (e != null) { if (!int.TryParse(e.Parameters, out newPageSize)) return; grid.SettingsPager.PageSize = newPageSize; Session["GridCurrentPageSize"] = newPageSize; } } protected void grid_Init(object sender, EventArgs e) { ASPxGridView grid = sender as ASPxGridView; if (Session["GridCurrentPageSize"] != null) grid.SettingsPager.PageSize = (int)Session["GridCurrentPageSize"]; else Session["GridCurrentPageSize"] = grid.SettingsPager.PageSize; grid.DataBind(); } protected void grid_BeforeGetCallbackResult(object sender, EventArgs e) { ASPxGridView grid = sender as ASPxGridView; grid.JSProperties["cpPageSize"] = grid.SettingsPager.PageSize; grid.JSProperties["cpPageIndex"] = grid.PageIndex + 1; } }

Disclaimer: The information provided on DevExpress.com and affiliated web properties (including the DevExpress Support Center) is provided "as is" without warranty of any kind. Developer Express Inc disclaims all warranties, either express or implied, including the warranties of merchantability and fitness for a particular purpose. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.

Confidential Information: Developer Express Inc does not wish to receive, will not act to procure, nor will it solicit, confidential or proprietary materials and information from you through the DevExpress Support Center or its web properties. Any and all materials or information divulged during chats, email communications, online discussions, Support Center tickets, or made available to Developer Express Inc in any manner will be deemed NOT to be confidential by Developer Express Inc. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.