Wednesday, January 21, 2009

Custom paging in ASP.Net GridView control

In one of my application I tried to copy the Paging style of SharePoint's ListView WebPart, so in that process I find a way to implement custom paging in ASP.Net GridView.
So this article basically describes how we can implement custom paging style in ASP.Net GridView control.


Following is the snapshot of GridView with custom paging :



HTML code for related custom paging :




<asp:GridView ID="gridView" runat="server" PageSize="5"

. . .

<PagerTemplate>



<% if (gridView.PageIndex > 0) { %>

<asp:ImageButton ID="imgBtnPrevious" runat="server"
Style="vertical-align: middle;"
ImageUrl="/_layouts/1033/images/prev.gif"
CommandArgument="Prev" CommandName="Page" />


<% } %>



<%=(gridView.PageIndex * 5) + 1%>
 - <%=(gridView.PageIndex * 5) + gridView.Rows.Count%>


<% if (gridView.PageIndex != (gridView.PageCount - 1)) { %>

<asp:ImageButton ID="imgBtnNext" runat="server"
Style="vertical-align: middle;" ImageUrl="/_layouts/1033/images/next.gif"
CommandArgument="Next" CommandName="Page" />
<% } %>
</PagerTemplate>

. . .

</asp:GridView>





 
 
 
 
There are two if conditions in the above code, first to hide the left arrow image on GridView's first page and second to hide the right arrow image on GridView's last page display (by using PageIndex and PageCount).

Note : In the above code, I used the default images (left-right arrow) provided by SharePoint.



CSharp (C#) code to handle GridView RowCommand event:


void gridView_OnRowCommand(object sender, CommandEventArgs e)
{
try
{
//Get the current page selected
int intCurIndex = gridView.PageIndex;
//Switch-Case to handle to Previous and Next paging
switch (e.CommandArgument.ToString().ToLower())
{
case "prev":
if (intCurIndex > 0)
gridView.PageIndex = intCurIndex - 1;
break;

case "next":
if (intCurIndex < gridView.PageCount - 1)
gridView.PageIndex = intCurIndex + 1;
break;
}

// popultate the gridview control
DataSet dataset = getDataSet();
//Set the DataSource of GridView and call DataBind
gridView.DataSource = dataset;
gridView.DataBind();
}
catch (Exception)
{
throw;
}
}



I used following table to get the logic for writing page number (just for reference):



Index (Index*5)+1 (Index*5)+RowCount Final Display
0 0*5 + 1 = 1 0*5 + 5 = 5 1 - 5
1 1*5 + 1 = 6 1*5 + 5 = 10 6 - 10
2 2*5 + 1 = 11 2*5 + 5 = 15 11 - 15
3 3*5 + 1 = 16 3*5 + 5 = 20 16 - 20
4 4*5 + 1 = 21 4*5 + 5 = 25 21 - 25




 
 
Note : Here the GridView's PageSize is 5.

 
 
Reference:
Custom Paging in GridView Control

3 comments:

Sneha said...

You can also add code for first button and last button just writing the following code on first and last button case

//in aspx file



<% if (rptViewCommunity.PageIndex > 0)
{ %>

<% } %>
<% if (rptViewCommunity.PageIndex > 0)
{ %>

<% } %>
<%=(rptViewCommunity.PageIndex * 5) + 1%>
-
<%=(rptViewCommunity.PageIndex * 5) + rptViewCommunity.Rows.Count%>
<% if (rptViewCommunity.PageIndex != (rptViewCommunity.PageCount - 1))
{ %>

<% } %>
<% if (rptViewCommunity.PageIndex > 0)
{ %>

<% } %>

//in cs file(add this in onrowcommand)
try
{
//Get the current page selected
int intCurIndex = rptViewCommunity.PageIndex;
//Switch-Case to handle to Previous and Next paging
switch (e.CommandArgument.ToString().ToLower())
{
case "First":
if (intCurIndex == 0)
rptViewCommunity.PageIndex = intCurIndex;
break;
case "prev":
if (intCurIndex > 0)
rptViewCommunity.PageIndex = intCurIndex - 1;
break;

case "next":
if (intCurIndex < rptViewCommunity.PageCount - 1)
rptViewCommunity.PageIndex = intCurIndex + 1;
break;
case "Last":
if (intCurIndex == rptViewCommunity.PageCount - 1)
rptViewCommunity.PageIndex = intCurIndex;
break;
}

// popultate the gridview control
//add gridview bind code//
}
catch (Exception)
{
throw;
}

Avinash said...

Thanks Sneha for the Enhancement :)

Tomas said...

thank you both for this contribution!

Google