How Paging In Datagrid

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 <PagerStyle Visible="False"> 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.

Page

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

<| < > | >

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; } }