Friday, July 24, 2009

C# DataGrid custom paging

In .NET 1.1 (I don't know the later version at this time), datagrid paging navigation is troublesome since it does not include link to the first and last page, and does not show the total number of pages. The pager row can contain no other information, which is also inconvenient when you want to put something there, e.g., a checkbox says "select all" for all checkboxes on the rows in the datagrid.

This is a way of imitating the paging manually, and allows the freedom of specifying "First, Prev, Next, Last" links, as well as total pages and other information on the pager row.

The "Prev, ..., 11, 12, ..., Next" part can be done with the following function. Then you can add "First" and "Last" as link buttons. You can then provide the page count as a Label. Alternatively, the following example also adds the page count as a simulation of the link button "Last".

In .aspx.cs page put:

/// <summary>
/// This function writes a customized navigation bar for datagrid.
///
/// Note that lblNext and lblPrev can be replaced with image icons.
///
/// Example of Calling this function:
/// writeDataGridNavBar(
/// this.DataGrid1.PageCount,
/// this.DataGrid1.CurrentPageIndex,
/// this.DataGrid1.PagerStyle.PageButtonCount,
/// 1
/// );
///
/// The last parameter "1" here is obtained this way:
/// Check the aspx page with default paging, look at the links to "1, 2, ...",
/// javascript:__doPostBack('DataGrid1$_ctl1$_ctl4','')
/// ^
/// Pass this number as the last parameter.
///
/// The optional ctrl_LastPage in the code below is similarly obtained from the
/// "Last" link button.
///
/// </summary>
/// <param name="totalPage">DataGrid.PageCount</param>
/// <param name="currentPage">DataGrid.CurrentPageIndex</param>
/// <param name="pageButtonCount">DataGrid.PagerStyle.PageButtonCount</param>
/// <param name="ctl_val"></param>
/// <returns></returns>
///
/// @Author: HomeTom
/// @Date: 7/24/2009
///
public string writeDataGridNavBar(
int PageCount, int CurrentPageIndex, int PageButtonCount, int ctl_val)
{
string lblNext = "Next";
string lblPrev = "Prev";
string ctrl = "javascript:__doPostBack('DataGrid1$_ctl" + ctl_val + "$_ctl";
// Optional. Use this only when use the "Last" link button.
string ctrl_LastPage = "javascript:__doPostBack('btnLastPage','')";
string s = "";
int i, j, tmp;

int startPage =
((int) (Math.Floor((CurrentPageIndex * 1.0)/PageButtonCount)) * PageButtonCount);

tmp = PageCount - PageButtonCount;
if (tmp > 0 && tmp < startPage) { startPage = tmp; }

if (CurrentPageIndex == 0) { s += lblPrev + " "; }
else
{
j = CurrentPageIndex - startPage;
if (startPage == 0) j -= 1;
s += "<a href=\"" + ctrl + j + "', '')\">" + lblPrev + "</a> ";
}

if (startPage > 0) { s += "<a href=\"" + ctrl + "0','')\">...</a> "; }

for (i = 0; i < PageButtonCount && (i + startPage) < PageCount; i ++)
{
tmp = startPage + i + 1;
j = (startPage == 0) ? i : (i + 1);
if (tmp == CurrentPageIndex + 1) { s += tmp + " "; }
else { s += "<a href=\"" + ctrl + j + "','')\">" + tmp + "</a> "; }
}
if (startPage + PageButtonCount < PageCount - 1) {
j = (startPage == 0) ? PageButtonCount : (PageButtonCount + 1);
s += "<a href=\"" + ctrl + j + "','')\">...</a> ";
}
if (startPage + PageButtonCount < PageCount)
{
s += "<a href=\"" + ctrl_LastPage + "\">" + PageCount + "</a> ";
}

if (CurrentPageIndex >= PageCount - 1) { s += lblNext; }
else
{
j = CurrentPageIndex - startPage + 1;
if (startPage > 0) j += 1;
s += "<a href=\"" + ctrl + j + "','')\">" + lblNext + "</a>";
}

return s;
}

Note that if don't want to use the page count link at the end then replace the red region with the following code:

if (startPage + PageButtonCount < PageCount) {
j = (startPage == 0) ? PageButtonCount : (PageButtonCount + 1);
s += "<a href=\"" + ctrl + j + "','')\">...</a> ";
}

In .aspx page put:

<asp:linkbutton id="btnFirstPage" onclick="DataGrid1_CustomPaging_First" Runat="server">First</asp:linkbutton>
<asp:label id="lblPageNavBar" Runat="server"></asp:label>
<asp:linkbutton id="btnLastPage" onclick="DataGrid1_CustomPaging_Last" Runat="server">Last</asp:linkbutton>


Now set DataGrid1.PagerStyle.visible to False.
Leave DataGrid1.AllowPaging as True, and DataGrid1.AllowCustomPaging as False.

That's it! You are simulating datagrid's default paging with the freedom of customizing the style!

--Appendix on 8/20/2009

Now it's clear that this does not work in later versions of .NET. First the links' format is not DataGrid1$_ctl1$_ctl4, but like DataGrid1$ctl01$ctl04. More importantly, if set the visible property of the link buttons and datagrid pager to false, then __doPostBack won't work for these controls, as they are cleaned from the output. Therefore the above scheme works only for .NET 1.1 :(

In later versions of .NET there is a pager template that can be used to format paging. Hope that's flexible enough.

Another thought is that, the use of datagrid and dataview in later versions of .NET, are mostly for the ease of paging and sorting. Think carefully, I don't see anything else that datagrid and dataview can do special. If these can be handled from scratch, then there is no need to use these cumbersome controls. Actually I would prefer such a build-from-scratch approach, it avoids the burden of version incompatibility and allows the largest flexibility. Once the template is done, it can be used all the time without any more learning curve.

Blog Archive

Followers