Scrollable Datagrid with Paging

After reading the title of this article, the first question that will come to your mind is. Why I need to enable paging in a Datagrid if I have scrollbar in that Datagrid? User is anyway going to scroll to see the data, so i can show all the data in one page itself. This is what i also thought first, but in some cases you might require to enable paging in scrollabe datagrid. For example,  you might avoid fetching all the rows at the same time for performance reason. In that case, you need to have paging along with scrolling. So in this article i am going to explain how you can create scrollable datagrid with paging.

This article is continuation to my previous article Scrollable DataGrid with Sorting. It explains how you can have sorting in scrollable Datagrid. So i recommend reading that article, before you start with this article.

Enabling  paging in datagrid is very simple, you just need to set AllowPaging, AllowCustomPaging properties to true and set PageSize property based on your requirements. But if that DataGrid is scrollable, then your paging row will appear at one end of the DataGrid. So if user wants to move to next page, he has to scroll down to the last row and then click next page link.  Obviously this design is not user friendly. So better approach is to have static paging table below the datagrid. This paging table will just show the Paging elements. But to hook the paging events of Datagrid to the static table, you need to do some work.

First step is to set the visible property of Pager section of Datagrid to false. Here is the codesnippet of the aspx page,

If you check out this code, a table is there just below the datagrid to show the paging elements. Next step is to create paging elements in this table which is similar to datagrid paging elements. For that we need to handle the item_created event and we need to have the following code in that event handler.

Here what we are doing is, we are checking whether created item is pager. If it is pager, then get the controls inside pager and place it in pager table. Since control inside Datagrid pager column is Datagridlinkbutton, we cant place this control inside normal asp:table control. So we need to create a linkbutton which is having same properties as this datagridlinkbutton and place it in header table. Other than datagridlinkbutton control, you will have literal and label control inside datagrid pager section, which will also be copied to pager table. One more thing to check is, all the paging elements in datagrid will be there only in first cell of datagrid pager row. All the other columns in that row will be empty.

Now you got all the paging elements in the pager table from datagrid pager row. Next step is to hook the event handler code for those paging elements. You cant do this work in item_created event  as paging event handler wont be available for those datagrid pager items at this time in control life cycle. Also you can do this in item_databound event as Item_databound event wont fire for Pager Datagrid item. So best place to write this code is in Page_PreRender event.

Now you have moved the event handler code from paging elements of datagrid to the pager table. So when you click any paging elements (like next page link) in pager table, it will fire PageIndexChanged event of datagrid where you can write code to change the current page of the Datagrid.