Scribd
Upload
123 views

How Paging in DataGrid

This document describes how to implement paging in an ASP.Net DataGrid control by displaying page numbers in a drop-down list and adding "First", "Previous", "Next", and "Last" links. The steps include: hiding the default pager; binding the DataGrid to a data source; populating a drop-down list with page numbers; handling drop-down selection changes; and handling link button commands to change the current page. When a page number or link is selected, the current page index is set and the DataGrid is rebound to display the appropriate records.

Uploaded by

api-3841500
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
123 views

How Paging in DataGrid

This document describes how to implement paging in an ASP.Net DataGrid control by displaying page numbers in a drop-down list and adding "First", "Previous", "Next", and "Last" links. The steps include: hiding the default pager; binding the DataGrid to a data source; populating a drop-down list with page numbers; handling drop-down selection changes; and handling link button commands to change the current page. When a page number or link is selected, the current page index is set and the DataGrid is rebound to display the appropriate records.

Uploaded by

api-3841500
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
You are on page 1/ 4

How Paging in DataGrid

ASP.Net Datagrid is a very powerful yet easy to use control with built in
functionalities for paging, sorting etc. All one has to do is add a datagrid to
the web form set required properties, bind it to a valid data source and write
few lines of code for appropriate events. You will get a grid that displays data
in set of pages. The default paging mechanism of Datagrid will display page
numbers either numerically (i.e. 1,2,3) or as Next and Prev links. This article
will explain how to change this and implement a paging mechanism, which
displays page numbers in a combo box and first, prev, next and last links
similar to the pager hot mail.

A screen shot of how the Datagrid will look once this feature is implemented
is given below

The first step is to create a datagrid with the properties as given below

<asp:datagrid id="DataGrid1" runat="server" width="700px"


AutoGenerateColumns="True" EnableViewState="True"
AllowPaging="True" PageSize="5">
<HeaderStyle Font-Bold="True"
HorizontalAlign="Center"></HeaderStyle>
<PagerStyle Visible="False"></PagerStyle>
</asp:datagrid>

Note that for the datagrid paging is enabled but the pager is made invisible
in-order to display the pager in our style.

Next the following code is written to bind a data source to the Datagrid

void BindData()
{
SqlConnection CN = new
SqlConnection("Server=YourServer;uid=YourUID;pwd=YourPWD;database
=pubs;");
CN.Open();
SqlDataAdapter DA = new SqlDataAdapter("Select * From
Authors",CN);
TitlesDS = new DataSet();
DA.Fill(TitlesDS,"Titles");
DataGrid1.DataSource = TitlesDS;
ViewState["DS"] = TitlesDS;
DataGrid1.DataBind();
DA = null;
CN.Close();
}

This will display the datagrid with data but without any pager since we have
hidden the pager. Next step is to add a drop down list at the top of grid to
display page numbers as shown below.

<table width="700" bgColor="lightblue">


<tr>
<td align="right">Page
<asp:dropdownlist id="ddlPage" runat="server"
AutoPostBack="True"> </asp:dropdownlist>
</td>
</tr>
</table>

Note that the AutoPostBack property of the drop down list is set to true so
that a post back to the server happens whenever the page number is
changed.

The next step is to fill the drop down list with page numbers. This is done
using the code shown below

for(int intcount = 0;intcount < DataGrid1.PageCount;intcount++)


{
ListItem LI = new ListItem();
LI.Value = Convert.ToString(intcount);
LI.Text = Convert.ToString(intcount+1) + " Of " +
DataGrid1.PageCount.ToString();
ddlPage.Items.Add(LI);
}

The PageCount property of the datagrid gives the total number of pages.
The code loops through the page numbers and adds it to the drop down list.

Next we need to write code to the drop down changed event so that when
ever the page number is changed the corresponding set of records is
displayed in the Datagrid. The code snippet to do this is shown below.

privatevoid ddlPage_SelectedIndexChanged(object sender,


System.EventArgs e)
{
DataGrid1.CurrentPageIndex =
Convert.ToInt32(ddlPage.SelectedItem.Value);
DataGrid1.DataSource = (DataSet)ViewState["DS"];
DataGrid1.DataBind();
}

Here I am setting the current page of the Datagrid to the page number
selected from the drop down and bind the grid to the data source again. For
binding a connection is not made to the database again instead it is fetched
from the dataset in ViewState.

Next we need to create links at the bottom for first, previous, next and last
functionalities. For this purpose four link buttons are created as shown below

<table width="700" bgColor="lightblue">


<tr>
<td align="right">
<asp:LinkButton id="lnkFirst" runat="server"
CommandName="First"><|</asp:LinkButton> <asp:LinkButton
id="lnkPrev" runat="server" CommandName="Prev"><</asp:LinkButton>
<asp:LinkButton id="lnkNext" runat="server"
CommandName="Next">></asp:LinkButton>
<asp:LinkButton id="lnkLast" runat="server" CommandName="Last">|
></asp:LinkButton>
</td>
</tr>
</table>

For each of the link buttons an appropriate CommanName is given. Then to


display appropriate set of records when any of this links is clicked following
code is written in the command event of the links

privatevoid LinkCommand(object sender,


System.Web.UI.WebControls.CommandEventArgs e)
{
switch(e.CommandName.ToUpper())
{
case "FIRST":
{
DataGrid1.CurrentPageIndex=1;
break;
}
case "LAST":
{
DataGrid1.CurrentPageIndex=DataGrid1.PageCount-1;
break;
}
case "PREV":
{
DataGrid1.CurrentPageIndex=DataGrid1.CurrentPageIndex-1;
break;
}
case "NEXT":
{
DataGrid1.CurrentPageIndex=DataGrid1.CurrentPageIndex+1;
break;
}
}
DataGrid1.DataSource = (DataSet)ViewState["DS"];
DataGrid1.DataBind();
ddlPage.SelectedIndex =DataGrid1.CurrentPageIndex;
EnableLinks();
}

In the above code we are checking for the CommandName and assign
appropriate page numbers to the CurrentPageIndex property of the
Datagrid and then bind the grid to the data source again. Here a single event
handler is attached to the command event of all the LinkButtons. I have also
written a small routine named EnableLinks, which will enable or disable the
link buttons according to the current page index. Code for the routine is
given below

void EnableLinks()
{
lnkFirst.Enabled = true;
lnkLast.Enabled = true;
lnkPrev.Enabled = true;
lnkNext.Enabled = true;
if(DataGrid1.CurrentPageIndex == 0)
{
lnkFirst.Enabled = false;
lnkPrev.Enabled = false;
}
if(DataGrid1.CurrentPageIndex == DataGrid1.PageCount-1)
{
lnkLast.Enabled = false;
lnkNext.Enabled = false;
}
}

You might also like