GridView control allows the user to easily browse through the records using paging. Users can simply click on the page number or the custom button and the appropriate page is displayed. In some applications the user wants to persist the state of the controls during paging specially the checkbox control. In this article we will demonstrate how to persist the state of the checkbox control while paging in the GridView control.

Why Persist CheckBox Selection During Paging?

There are many scenarios where this can be a critical requirement. Consider a situation where a user needs to select multiple users from a list of 100 users. The list is displayed as a paging enabled GridView control. If there is no option to persist the state of the selected rows then the user will never be able to hand pick multiple users from the GridView control.   

Populating the GridView Control:

Our first task is to populate the GridView control. You can perform this in many different ways. We have used Linq to SQL as our data source and will be using it to populate the GridView control.

The HTML code for the GridView control is shown below:



Notice that the first column is a TemplateField column which contains the checkbox control. The paging is also enabled on the GridView control by setting the AllowPaging property to "true".

The server side code which populates the GridView control is shown below:



Run the application and you will see a similar output:



We still have not implemented the GridView paging code. Let's do that so we can go through different pages of the GridView control.


  
Now run the page again and click on the page number displayed by the GridView.



If you select any checkbox and go to a different page you will notice that the checkbox selection is cleared when you come back to the original page. The main reason is that each time a page number is clicked GridView is bound again to the source and our selection is lost. We need some way to store our selection and then after the GridView is bound to the source re-populate the selected checkboxes. 

Persisting CheckBox Selection:

There are many places to store the selected checkbox but probably the best is ViewState. The reason is that during paging the same page is requested multiple times. ViewState is capable of holding the state of an object for the same page.

The best place to start is inside the GridView paging event. Our goal is to retrive the selected checkbox row index and store that in the ViewState dictionary.

Here is the updated gvCustomersPageChanging event:



We are using DataItemIndex instead of RowIndex since the RowIndex will give to you the index of the row relative to the number of rows displayed in the GridView control. This means that for each GridView page the RowIndex starts with "0". If you store RowIndex in the ViewState dictionary then the row on each page of the GridView control having the same RowIndex will be checked. This will produce incorrect result.

DataItemIndex gives the index of the row relative to the number of records in the data source. This means if there are 10 records in the source and have PageSize set to 5 then on page number 2 the second row will be index 6 instead of 2.

Here is a screenshot to better understand the difference between RowIndex and DataItemIndex.



The PersistRowIndex method is responsible for adding the DataItemIndex into ViewState. The implementation is shown below:



We only insert the index if it is not already in the List<Int32> collection. The SelectedCustomersIndex is a simple List<Int32> which is shown below:



Storing the selected index in ViewState is not enough. We need some way to re-populate the CheckBox column in the GridView control. In the next section we are going to demonstrate how to retrieve the selected indexes from ViewState and set the checkboxes.

Re-Populating CheckBoxes in the GridView Control:

The RePopulateCheckBoxes method is responsible for re-populating the CheckBoxes in the GridView control.

The implementation is shown below:



The method goes through all the checkboxes inside the GridView control and compare the DataItemIndex property to the index stored in the ViewState. If a match is found the checkbox is checked.

The following animation shows the effect:



You also need to clear out the checkboxes which were not checked. Download the source code at the end of this article for the complete working solution.

Resources:

1) Screencast: Persist GridView CheckBox Selection State While Paging

Conclusion:

In this article we demonstrated how to persist the state of the checkbox while paging in a GridView control.

[Download Sample]