GridView with custom Digg-like pagination

Dmytro Shteflyuk — Mon, 27 Aug 2007 05:42:03 +0000

GridView is a great highly customizable ASP.NET control. Today I want to show, how to create derived control, which allows to add Digg-style pagination to your application.

First, we will create derived control and add property UseCustomPager, which will define whether or not to use Digg-style pagination:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

using System;
using System.Globalization;
using System.Reflection;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;

namespace App_Code
{
public class GridViewWithPager : GridView
{
public bool UseCustomPager
{
get { return (bool?) ViewState["UseCustomPager"] ?? false; }
set { ViewState["UseCustomPager"] = value; }
}
}
}

GridView has virtual method InitializePager which could be overridden to create our custom pager:

1
2
3
4
5
6
7

protected override void InitializePager(GridViewRow row, int columnSpan, PagedDataSource pagedDataSource)
{
if (UseCustomPager)
CreateCustomPager(row, columnSpan, pagedDataSource);
else
base.InitializePager(row, columnSpan, pagedDataSource);
}

Now let’s create our custom pager:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76

protected virtual void CreateCustomPager(GridViewRow row, int columnSpan, PagedDataSource pagedDataSource)
{
int pageCount = pagedDataSource.PageCount;
int pageIndex = pagedDataSource.CurrentPageIndex + 1;
int pageButtonCount = PagerSettings.PageButtonCount;

TableCell cell = new TableCell();
row.Cells.Add(cell);
if (columnSpan > 1) cell.ColumnSpan = columnSpan;

if (pageCount > 1)
{
HtmlGenericControl pager = new HtmlGenericControl("div");
pager.Attributes["class"] = "pagination";
cell.Controls.Add(pager);

int min = pageIndex - pageButtonCount;
int max = pageIndex + pageButtonCount;

if (max > pageCount)
min -= max - pageCount;
else if (min < 1)
max += 1 - min;

// Create "previous" button
Control page = pageIndex > 1
? BuildLinkButton(pageIndex - 2, PagerSettings.PreviousPageText, "Page", "Prev")
: BuildSpan(PagerSettings.PreviousPageText, "disabled");
pager.Controls.Add(page);

// Create page buttons
bool needDiv = false;
for (int i = 1; i <= pageCount; i++)
{
if (i <= 2 || i > pageCount - 2 || (min <= i && i <= max))
{
string text = i.ToString(NumberFormatInfo.InvariantInfo);
page = i == pageIndex
? BuildSpan(text, "current")
: BuildLinkButton(i - 1, text, "Page", text);
pager.Controls.Add(page);
needDiv = true;
}
else if (needDiv)
{
page = BuildSpan("…", null);
pager.Controls.Add(page);
needDiv = false;
}
}

// Create "next" button
page = pageIndex < pageCount
? BuildLinkButton(pageIndex, PagerSettings.NextPageText, "Page", "Next")
: BuildSpan(PagerSettings.NextPageText, "disabled");
pager.Controls.Add(page);
}
}

private Control BuildLinkButton(int pageIndex, string text, string commandName, string commandArgument)
{
PagerLinkButton link = new PagerLinkButton(this);
link.Text = text;
link.EnableCallback(ParentBuildCallbackArgument(pageIndex));
link.CommandName = commandName;
link.CommandArgument = commandArgument;
return link;
}

private Control BuildSpan(string text, string cssClass)
{
HtmlGenericControl span = new HtmlGenericControl("span");
if (!String.IsNullOrEmpty(cssClass)) span.Attributes["class"] = cssClass;
span.InnerHtml = text;
return span;
}

Several pager settings used in this code:

PagerSettings.PreviousPageText — text to be shown on the “Previous” button.
PagerSettings.NextPageText — text to be shown on the “Next” button.
PagerSettings.PageButtonCount — how many pages to show before and after the current page.

You could see, that in BuildLinkButton method I have used custom control PagerLinkButton. This is just descendant of the LinkButton control which simplifies usage inside our GridViewWithPager:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

using System;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace App_Code
{
public class PagerLinkButton : LinkButton
{
public PagerLinkButton(IPostBackContainer container)
{
_container = container;
}

public void EnableCallback(string argument)
{
_enableCallback = true;
_callbackArgument = argument;
}

public override bool CausesValidation
{
get { return false; }
set { throw new ApplicationException("Cannot set validation on pager buttons"); }
}

protected override void Render(HtmlTextWriter writer)
{
SetCallbackProperties();
base.Render(writer);
}

private void SetCallbackProperties()
{
if (_enableCallback)
{
ICallbackContainer container = _container as ICallbackContainer;
if (container != null)
{
string callbackScript = container.GetCallbackScript(this, _callbackArgument);
if (!string.IsNullOrEmpty(callbackScript)) OnClientClick = callbackScript;
}
}
}

#region Private fields

private readonly IPostBackContainer _container;
private bool _enableCallback;
private string _callbackArgument;

#endregion
}
}

Our control is almost done. All we need is to define method ParentBuildCallbackArgument. As you could see from GridView sources, this method is used for serializing page index, sort direction and sort expression, but for some reason, it has been defined as internal. I don’t like hacks, but in this case I think that I can cheat a little:

1
2
3
4
5
6
7

private string ParentBuildCallbackArgument(int pageIndex)
{
MethodInfo m =
typeof (GridView).GetMethod("BuildCallbackArgument", BindingFlags.NonPublic | BindingFlags.Instance, null,
new Type[] {typeof (int)}, null);
return (string) m.Invoke(this, new object[] {pageIndex});
}

BTW, as you could see, I have not added any comments to methods. It is done specially, because I don’t want to create custom controls library, just sharing my experience :-)

And now I’ll show you example of usage:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

="server" ID="xdsCountries"
DataFile="~/App_Data/CountryCodeList.xml" />

="server" UseCustomPager="true" AllowPaging="true"
DataSourceID="xdsCountries" PageSize="10" AutoGenerateColumns="false">
="« previous"
NextPageText="next »" PageButtonCount="3" />

="Code">
<%# XPath("CountryCoded") %></ItemTemplate>
</asp:TemplateField>
="Name">
<%# XPath("CountryName") %></ItemTemplate>
</asp:TemplateField>
</Columns>
</ac:GridViewWithPager>

And a screenshot:

Full source code could be downloaded here.

The post GridView with custom Digg-like pagination first appeared on Dmytro Shteflyuk's Home.

paging | Dmytro Shteflyuk's Home

GridView with custom Digg-like pagination