Introduction
Some time back, I had written an article on how to add check boxes in a grid to select records. Now I am back with some enhancements on that to persist the checked state between paging. Those who are directly reading this article, I would advise them to read the above mentioned article first and come back.
Problem statement
Our problem can be stated as some thing like below:-
A user checks one record in a page and goes to the next page and selects some records there, when he returns to the previous page we need to keep the checked state of whatever records he had checked earlier. I will call it as checked state maintenance across pages. When he is finished checking through the pages, he needs a list of records he has checked.
Our Way
How I achieved the functionality is by keeping the ID of the checked records in a hidden ListBox
. On the ItemDataBound
event of the grid I check the existence of the ID of the record in the ListBox
and set the checked state of the record.
Step 1 Saving the checked records
On the Page_Load
, I am calling a private function MaintainState()
.
I am iterate through all the DataGrid
items and check if the checkbox is checked or not. If it is checked I will add it to the ListBox
provided it is not there. If the check box is not checked and it is in the ListBox
I will remove it.
Here is the implementation of the function:
private void MaintainState()
{
foreach( DataGridItem di in myDataGrid.Items )
{
HtmlInputCheckBox chkBx = (HtmlInputCheckBox)di.FindControl("EmpId") ;
if( chkBx !=null && chkBx.Checked )
{
Label lbl = (Label)di.FindControl("Id");
ListItem item=new ListItem(lbl.Text ,lbl.Text );
if(!SelectedList.Items.Contains(item))
{
SelectedList.Items.Add(item );
}
}
if(( chkBx !=null )&& !(chkBx.Checked) )
{
Label lbl = (Label)di.FindControl("Id");
ListItem item=new ListItem(lbl.Text ,lbl.Text );
if(SelectedList.Items.Contains(item))
{
SelectedList.Items.Remove(item );
}
}
}
}
Step 2 Setting checked state on returning back
Now that we have the checked records in the hidden ListBox
, we will have to set the checked state of the check boxes when the data is bound again across pages. We will write this on the ItemDataBound
event of the grid, i.e., when data is being bound to the grid. We will check each item when it is bound. If it is an Item
or an AlternatingItem
then get the ID of the record, check if the ID is in the ListBox
and set the checked state.
The implementation is given below:
private void myDataGrid_ItemDataBound(object sender,
System.Web.UI.WebControls.DataGridItemEventArgs e)
{
if((e.Item.ItemType== ListItemType.Item )||
(e.Item.ItemType== ListItemType.AlternatingItem ))
{
HtmlInputCheckBox chkBx =
(HtmlInputCheckBox)e.Item.Cells[0].FindControl("EmpId");
Label lbl = (Label)e.Item.Cells[1].FindControl("Id");
ListItem item = new ListItem(lbl.Text , lbl.Text );
if(SelectedList.Items.Contains (item))
chkBx.Checked =true;
else
chkBx.Checked=false;
}
}
One thing you have to keep in mind is to clear the ListBox
when you are done with ;-).