Do more with less: Runtime Custom Paging with DataGrid Control in .Net

One of the great controls for displaying data is the .Net DataGrid control. We encounter this control in both Windows forms and web forms. This control captures the essence of relational data table, displaying data in the tabular format-Rows and columns as you have them in a normal table (internally the RDBMS handles data some other way). The great thing about DataGrid control is that it encapsulates a lot of the functionalities a database programmer encounters, and exposes them as properties. In this article, we are going to explore paging, including custom paging capability of .Net DataGrid control. Turning on paging for DataGrid is a snap. In visual studio .Net, you simply drag and drop a datagrid control over to the design surface, then in the properties window, click the "Properties Builder" link. In the "General" tab, you can just check the "allow paging" check box, and the default is 10 rows per page. Immediately the datagrid on your designer surface will have 10 rows shown, instead of 5 by default for without paging. You notice there is an "Allow custom paging" check box next to "Allow paging", and that is where you turn on custom paging, and from there you do the tweaking for custom paging to work as desired. However, in this article, we are doing custom paging at runtime, so we don't actually need to explicitly turn this feature on. Visual Studio.Net gives us two templated pager styles or modes. One is the previous and next buttons, the other is the numeric page. With the former style, you can already do some customization, such as changing the previous and next page button text from the default angle bracket "<" and ">" to, say, "Prev" and "Next", respectively. You can position the pager in both styles at either top or bottom, or both. Here is how my pager looks like in the designer with those minimum set up. As you can see, it is not rocket science at all. If you switch to HTML view, the above datagrid is as follows: The AllogPaging="True" declaration effectively turns on paging, and the pagerStyle tag takes care of the pager texts property. All looks good except that we don't have a data source yet. In ASP.NET, the usual way to do it is to wrap the data access function in a single function, using sqlDataAdapter to fill a dataset, which in turn serves as the data source for the datagrid. Note, you need to fill the dataset on each postback, because the datasource is not reserved in the viewstate by default, so if you don't want a trip to the sql server, then you need to cache the data source on the server. There are many ways to provide a valid data source, here is the simplest form of this kind of code: private void bindData() { DataSet myDS = new DataSet(); SqlConnection conn1 =new SqlConnection("server=stanx\\power;integrated security=true;initial catalog=northwind"); SqlCommand comm1 =new SqlCommand("select * from Customers", conn1); SqlDataAdapter sda1 =new SqlDataAdapter(comm1); sda1.Fill(myDS); DataGrid1.DataSource= myDS.Tables[0].DefaultView; DataGrid1.DataBind(); } In web form, you need to do the DataBind() each time you want the datagrid to be bound to the data. Now, we are going to add some custom paging functionalities. Let's say we want to see the page number where we are at, which might look like this: Notice the page number between the prev and next buttons. This needs to be done at runtime. Sounds pretty scary, but actually it is very straightforward, thanks to the ASP.Net event model and rich class library, which makes all elements in web form accessible at runtime as class object. All this can be done in one event handler-ItemCreated event. With this, we just check what the ItemType is, if it is the pager and the pager is in the prev/next mode, instead of the numeric mode, we insert the page number(embedded in a LiteralControl) between the two link buttons. Here is the code that accomplishes that in one shot. private void DataGrid1_ItemCreated(object sender, System.Web.UI.WebControls.DataGridItemEventArgs e) { if(e.Item.ItemType == ListItemType.Pager) { if(DataGrid1.PagerStyle.Mode==PagerMode.NextPrev) { TableCell footerCell = e.Item.Cells[0]; System.Web.UI.LiteralControl pageNo =new LiteralControl(); pageNo.Text = " Page "+DataGrid1.CurrentPageIndex+" "; footerCell.Controls.AddAt(1, pageNo); } } } The last line of code addes the literal control at position 1 in the control tree of the pager cell, because position 1 is the "Prev" link button. Now here is an interesting question, if I want to have the page number after the Next button, where do I add the Page number to? Position 2, you might think, since prev and next buttons each takes up one position, based on 0 based index, you get 2. However, that would not give you the desired layout. Take a closer look at the HTML source code, you will find that the space between Prev and Next buttons takes up one position in the control tree. Prev Page 0  Next So wou need to add at position 3. Simply change the last line to: footerCell.Controls.AddAt(3, pageNo); and you will get the following pager layout. Remember all these are done in less than 10 lines of code, thanks to .Net framework.

Hide comments


  • Allowed HTML tags: <em> <strong> <blockquote> <br> <p>

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.