Persisting checked state across pages in a DataGrid

• Download demo project - 16.8 Kb

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()
{
 //state maintaining 
 foreach( DataGridItem di in myDataGrid.Items )
 {
  HtmlInputCheckBox chkBx = (HtmlInputCheckBox)di.FindControl("EmpId") ;
  //if check box is checked add it 
  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 check box is not checked then 
  if(( chkBx !=null )&& !(chkBx.Checked) )
  {
   Label lbl = (Label)di.FindControl("Id");
   ListItem item=new ListItem(lbl.Text ,lbl.Text );
   //if un checked item is in the list then remove 
   if(SelectedList.Items.Contains(item))
   {
    SelectedList.Items.Remove(item );
   }    
  }
 }
 //end of state maintaining 
}

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)
{
 //check and uncheck based on the item entry in the List 
 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 ;-).