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.
Overview
Follow the steps below to create a custom pager:
- Specify the grid's PagerBar property and add editors to the template.
- 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. - 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>
- 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
- Default.aspx (VB: Default.aspx)
- Default.aspx.cs (VB: Default.aspx.vb)
Documentation
More Examples
- Grid View for ASP.NET Web Forms - Use a status bar template to create a custom pager
- Grid View for ASP.NET Web Forms - Create a custom pager and a page size item at runtime
Example Code
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>
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;
}
}