Implementing Custom Paging in ASP.NET DataGrid Control

ASP.NET Datagrid control displays data in a tabular format and also supports features for selecting, sorting, paging, and editing the data. The ASP.NET datagrid control reduces a lot of task that we had been doing in the ASP applications like retrieve a recordset, loop through the results one by one, struggle to format the data in HTML table manipulating the rows and column dynamically. Displaying the data in a tabular format at times sound simpler in comparison with the sorting or paging !!!

The ASP.NET Datagrid control is as simple as drag and drop, set some of the properties like DataSource and bind the datagrid to any of the objects like Dataset / Datareader. Having the Support for paging and sorting we only need to add a few lines of code and we can go ahead... In this article we'll try to achieve

a) Custom Paging with "First", "Previous", "Next", "Last" buttons.
b) Tie up the "Page Up" and "Page Down" keys to the Datagrid.

a) Custom Paging with "First", "Previous", "Next", "Last" buttons.
Lets initially begin with the Datagrid Control We'll set the AllowPaging Property to True. We set the PagerStyle-Visible as false as we have chosen to do custom paging. For this sample code we have kept the default page size i.e. 10

<ASP:Datagrid id="DataGrid1" runat="server" AllowPaging="True"
PagerStyle-Visible="False" HeaderStyle-BackColor="Blue"
HeaderStyle-ForeColor="White" BorderColor="#E7E7FF" BorderStyle="None" BorderWidth="1px" BackColor="White" CellPadding="3" GridLines="Horizontal">
<SelectedItemStyle Font-Bold="True" ForeColor="#F7F7F7" BackColor="#738A9C">
</SelectedItemStyle>
<AlternatingItemStyle BackColor="#F7F7F7"></AlternatingItemStyle>
<ItemStyle ForeColor="#4A3C8C" BackColor="#E7E7FF"></ItemStyle>
<HeaderStyle Font-Bold="True" ForeColor="#F7F7F7" BackColor="#4A3C8C">
</HeaderStyle>
<FooterStyle ForeColor="#4A3C8C" BackColor="#B5C7DE"></FooterStyle>
<PagerStyle Visible="False" HorizontalAlign="Right" ForeColor="#4A3C8C" BackColor="#E7E7FF" Mode="NumericPages"></PagerStyle>
</ASP:Datagrid><br>

The simple task to be done is to display the data in the datagrid The coding steps involve following steps :

Step 1:

Have a subroutine to Bind data to Datagrid. So in the subroutine BindData() we'll have following steps done:
a) Connecting to Database.
b) Creating DataAdapter to execute the SQL query using the proper connection.
c) Fill the Dataset Based on the DataAdapter
d) Assign the DataSource Property of DataGrid to the DataSet

Dim MyConnection As SqlConnection
Dim myda As SqlDataAdapter
Dim ds As DataSet
Dim sqlStr As String = "SELECT Productid,ProductName,UnitPrice from Products"
Dim strConn As String = "server=localhost;uid=sa;pwd=;database=northwind;"
Dim TotalRows As Integer
MyConnection = New SqlConnection(strConn)
myda = New SqlDataAdapter(sqlStr, MyConnection)
ds = New DataSet()
myda.Fill(ds, "Datagrid1")
DataGrid1.DataSource = ds
DataGrid1.DataBind()

Step 2:

Now moving on to write the code for the 4 buttons "First", "Previous", "Next", "Last"
<asp:Button id="Firstbutton" Text="First" CommandArgument="0" runat="server" onClick="PagerButtonClick"/>
<asp:Button id="Prevbutton" Text="Prev" CommandArgument="Prev"runat="server" onClick="PagerButtonClick"/>
<asp:Button id="Nextbutton" Text="Next" CommandArgument="Next" runat="server" onClick="PagerButtonClick"/>
<asp:Button id="Lastbutton" Text="Last" CommandArgument="Last" runat="server" onClick="PagerButtonClick"/>
 
Depending upon which button is clicked we'll handle the events. The Buttons will call a server side code i.e PagerButtonClick. Based on the CommandArgument we'll manipulate with the CurrentPageIndex of the Datagrid.

The code goes as below:

Sub PagerButtonClick(ByVal sender As Object, ByVal e As EventArgs)
Dim arg As String = sender.CommandArgument
Select Case arg
Case "Next"
If (DataGrid1.CurrentPageIndex < (DataGrid1.PageCount - 1)) Then
DataGrid1.CurrentPageIndex += 1
End If
Case "Prev"
If (DataGrid1.CurrentPageIndex > 0) Then
DataGrid1.CurrentPageIndex -= 1
End If
Case "Last"
DataGrid1.CurrentPageIndex = (DataGrid1.PageCount - 1)
Case Else
DataGrid1.CurrentPageIndex = Convert.ToInt32(arg)
End Select
BindData()
End Sub 
 
b) Tie up the "Page Up" and "Page Down" keys of the keyboard to the Datagrid.
To achieve such a functionality we'll need client-side script to handle "Page Up" and "Page Down" So a bit of modification codes in the <body> tag

<body onkeydown="return window_onkeydown()">

To trap the values of the Key Pressed we'll have a hidden control 

<INPUT type="hidden" id="UpDown" name="PageUpDown">  
 
The client side script would be as follows

<script>
function window_onkeydown()
{
if (event.keyCode==33 || event.keyCode==34)
{
Form1.PageUpDown.value=event.keyCode;
Form1.submit();
}
}
</script>

In the Code-behind we'll have

If Request.Form("PageUpDown") <> "" Then
'Checks if Page Up/Page Down Key is Pressed
'Page Up =33
'Page Down =34
If Request.Form("PageUpDown") = 34 Then
If DataGrid1.CurrentPageIndex < DataGrid1.PageCount - 1 Then
DataGrid1.CurrentPageIndex = DataGrid1.CurrentPageIndex + 1
End If
Else
If DataGrid1.CurrentPageIndex > 0 Then
DataGrid1.CurrentPageIndex = DataGrid1.CurrentPageIndex - 1
End If
End If
End If
 
Summarize

Let's walk through the Events and the Subroutines in the codebehind.

Page_Load

The first time the page is loaded, we call subroutine BindData. On post-back, we check for the Any of the events being triggered which could be the "Page Up/Page Down" keys or the buttons that we have added to the form. To check for the Key Pressed we check the value of the hidden textbox and accordingly increment/decrement the CurrentPageIndex.

BindData

This subroutine just populates the Datagrid with the DataSet.

PagerButtonClick

To navigate through the Datagrid with the help of those buttons we have a Server-side code. Based on the CommandArgument we increment and decrement the CurrentPageIndex and rebind the data.
This is all to work with the code.