Preserving state of Checkboxes while paging in ASP.Net GridView Control

Here I will explain how to preserve selections on all pages while paginating.

To start with I have a GridView as below

<asp:GridView ID="GridView1" runat="server"

AutoGenerateColumns = "false" Font-Names = "Arial"

Font-Size = "11pt" AlternatingRowStyle-BackColor = "#C2D69B" 

HeaderStyle-BackColor = "green" AllowPaging ="true"  

OnPageIndexChanging = "OnPaging" OnRowDataBound = "RowDataBound"  PageSize="10">

<Columns>

<asp:TemplateField>

    <HeaderTemplate>

        <asp:CheckBox ID="chkAll" runat="server"

            onclick = "checkAll(this);" />

    </HeaderTemplate>

    <ItemTemplate>

        <asp:CheckBox ID="CheckBox1" runat="server"

            onclick = "Check_Click(this)"/>

    </ItemTemplate>

</asp:TemplateField>

<asp:BoundField ItemStyle-Width = "150px"

    DataField = "CustomerID" HeaderText = "CustomerID" />

<asp:BoundField ItemStyle-Width = "150px"

    DataField = "City" HeaderText = "City"/>

<asp:BoundField ItemStyle-Width = "150px"

    DataField = "Country" HeaderText = "Country"/>

<asp:BoundField ItemStyle-Width = "150px"

    DataField = "PostalCode" HeaderText = "PostalCode"/>

</Columns>

</asp:GridView>

 

Note you will notice I am calling JavaScript functions on the checkbox click these are the same which I discussed in my previous article.

The GridView is pulling Data from the customers table in the NorthWind Database.

 

Namespaces

You will need to import the following namespace since I am using ArrayList to store the checked checkboxes

  

C#

using System.Collections;

 

VB.Net

Imports System.Collections

 

The following code checks if the ViewState has ArrayList Stored in it if yes it gets it from the ViewState else creates a new ArrayList which will store the selected checkboxes.

  C#

ArrayList CheckBoxArray;

if (ViewState["CheckBoxArray"] != null)

{

    CheckBoxArray = (ArrayList)ViewState["CheckBoxArray"];

}

else

{

    CheckBoxArray = new ArrayList();

}

 

VB.Net

Dim CheckBoxArray As ArrayList

If ViewState("CheckBoxArray") IsNot Nothing Then

   CheckBoxArray = DirectCast(ViewState("CheckBoxArray"), ArrayList)

Else

   CheckBoxArray = New ArrayList()

End If

 

The next code snippet gets the reference of the header row check all checkbox and checks if the checkbox is checked or unchecked

If the checkbox is checked it adds its reference in the ArrayList in the format chkAll-0 where 0 is the page index of the GridView page.

If the checkbox is unchecked it checks whether its reference is present in the ArrayList or not if the reference is present it removes the reference from the ArrayList and sets the flag CheckAllWasChecked which is useful in the next snippet.

      

C#

    int CheckBoxIndex;

    bool CheckAllWasChecked=false;

    CheckBox chkAll =

     (CheckBox)GridView1.HeaderRow.Cells[0].FindControl("chkAll");

    string checkAllIndex = "chkAll-" + GridView1.PageIndex;

    if (chkAll.Checked)

    {

        if (CheckBoxArray.IndexOf(checkAllIndex) == -1)

        {

            CheckBoxArray.Add(checkAllIndex);

        }

    }

    else

    {

        if (CheckBoxArray.IndexOf(checkAllIndex) != -1)

        {

            CheckBoxArray.Remove(checkAllIndex);

            CheckAllWasChecked = true;

        }

    }

 

VB.Net

Dim CheckBoxIndex As Integer

Dim CheckAllWasChecked As Boolean = False

Dim chkAll As CheckBox = _

DirectCast(GridView1.HeaderRow.Cells(0).FindControl("chkAll"), CheckBox)

 

Dim checkAllIndex As String = "chkAll-" & GridView1.PageIndex

 

If chkAll.Checked Then

   If CheckBoxArray.IndexOf(checkAllIndex) = -1 Then

      CheckBoxArray.Add(checkAllIndex)

   End If

Else

   If CheckBoxArray.IndexOf(checkAllIndex) <> -1 Then

      CheckBoxArray.Remove(checkAllIndex)

      CheckAllWasChecked = True

   End If

End If

 

The next snippet loops through the GridView rows and checks if the checkbox for that corresponding row is checked. If the checkbox is checked its position is calculated using the following formula

CheckBoxIndex = GridView1.PageSize * GridView1.PageIndex + (RowIndex + 1)

 

The above formula gives the checkbox. RowIndex and PageIndex are zero based indexes i.e the first row or first page starts from 0.

If the checkbox is checked its CheckBoxIndex added to the ArrayList else if it is already present and the checkbox is not checked it is removed.

 

C#

for (int i = 0; i < GridView1.Rows.Count; i++)

{

    if (GridView1.Rows[i].RowType == DataControlRowType.DataRow)

    {

        CheckBox chk =

         (CheckBox)GridView1.Rows[i].Cells[0].FindControl("CheckBox1");

        CheckBoxIndex = GridView1.PageSize * GridView1.PageIndex + (i + 1);

        if (chk.Checked)

        {

            if (CheckBoxArray.IndexOf(CheckBoxIndex) == -1

                && !CheckAllWasChecked)

            {

                CheckBoxArray.Add(CheckBoxIndex);

            }

        }

        else

        {

            if (CheckBoxArray.IndexOf(CheckBoxIndex) != -1

                || CheckAllWasChecked)

            {

                CheckBoxArray.Remove(CheckBoxIndex);

            }

        }

    }

}

 

VB.Net

For i As Integer = 0 To GridView1.Rows.Count - 1

   If GridView1.Rows(i).RowType = DataControlRowType.DataRow Then

     Dim chk As CheckBox = _

     DirectCast(GridView1.Rows(i).Cells(0) _

     .FindControl("CheckBox1"), CheckBox)

     CheckBoxIndex = GridView1.PageSize * GridView1.PageIndex + (i + 1)

     If chk.Checked Then

       If CheckBoxArray.IndexOf(CheckBoxIndex) = -1 And _

       Not CheckAllWasChecked Then

          CheckBoxArray.Add(CheckBoxIndex)

       End If

       Else

         If CheckBoxArray.IndexOf(CheckBoxIndex) <> -1 Or _

          CheckAllWasChecked Then

          CheckBoxArray.Remove(CheckBoxIndex)

       End If

     End If

   End If

Next

 

 

The complete snippet is given below. 

  

C#

if (IsPostBack)

{

    int CheckBoxIndex;

    bool CheckAllWasChecked=false;

    CheckBox chkAll =

     (CheckBox)GridView1.HeaderRow.Cells[0].FindControl("chkAll");

    string checkAllIndex = "chkAll-" + GridView1.PageIndex;

    if (chkAll.Checked)

    {

        if (CheckBoxArray.IndexOf(checkAllIndex) == -1)

        {

            CheckBoxArray.Add(checkAllIndex);

        }

    }

    else

    {

        if (CheckBoxArray.IndexOf(checkAllIndex) != -1)

        {

            CheckBoxArray.Remove(checkAllIndex);

            CheckAllWasChecked = true;

        }

    }

    for (int i = 0; i < GridView1.Rows.Count; i++)

    {

        if (GridView1.Rows[i].RowType == DataControlRowType.DataRow)

        {

          CheckBox chk =

          (CheckBox)GridView1.Rows[i].Cells[0].FindControl("CheckBox1");

           CheckBoxIndex=GridView1.PageSize*GridView1.PageIndex + (i + 1);

          if (chk.Checked)

          {

                if (CheckBoxArray.IndexOf(CheckBoxIndex) == -1

                    && !CheckAllWasChecked)

                {

                    CheckBoxArray.Add(CheckBoxIndex);

                }

          }

          else

          {

                if (CheckBoxArray.IndexOf(CheckBoxIndex) != -1

                    || CheckAllWasChecked)

                {

                    CheckBoxArray.Remove(CheckBoxIndex);

                }

          }

        }

    }

}

 

    

VB.Net

If IsPostBack Then

  Dim CheckBoxIndex As Integer

  Dim CheckAllWasChecked As Boolean = False

  Dim chkAll As CheckBox = _

   DirectCast(GridView1.HeaderRow.Cells(0).FindControl("chkAll"), CheckBox)

 

  Dim checkAllIndex As String = "chkAll-" & GridView1.PageIndex

  If chkAll.Checked Then

     If CheckBoxArray.IndexOf(checkAllIndex) = -1 Then

       CheckBoxArray.Add(checkAllIndex)

     End If

  Else

     If CheckBoxArray.IndexOf(checkAllIndex) <> -1 Then

       CheckBoxArray.Remove(checkAllIndex)

       CheckAllWasChecked = True

     End If

  End If

  For i As Integer = 0 To GridView1.Rows.Count - 1

   If GridView1.Rows(i).RowType = DataControlRowType.DataRow Then

     Dim chk As CheckBox = _

      DirectCast(GridView1.Rows(i).Cells(0) _

      .FindControl("CheckBox1"), CheckBox)

     CheckBoxIndex = GridView1.PageSize * GridView1.PageIndex + (i + 1)

     If chk.Checked Then

       If CheckBoxArray.IndexOf(CheckBoxIndex) = -1 And _

        Not CheckAllWasChecked Then

          CheckBoxArray.Add(CheckBoxIndex)

     End If

     Else

      If CheckBoxArray.IndexOf(CheckBoxIndex) <> -1 Or _

        CheckAllWasChecked Then

         CheckBoxArray.Remove(CheckBoxIndex)

       End If

     End If

   End If

  Next

End If

 

Once this is done the ArrayList is saved to the ViewState.

C#

ViewState["CheckBoxArray"] = CheckBoxArray;

 

VB.Net

ViewState("CheckBoxArray") = CheckBoxArray

  

 

Now in the GridView Paging Event you will need to recheck the checkboxes that are present in the ArrayList that we saved in the ViewState. If the Check All checkbox is checked for that page index it will check all the checkboxes. While checking through the checkboxes it also applies the background color to all checkboxes that are checked.

C#

ArrayList CheckBoxArray = (ArrayList)ViewState["CheckBoxArray"];

string checkAllIndex = "chkAll-" + GridView1.PageIndex;

 

if (CheckBoxArray.IndexOf(checkAllIndex) != -1)

{

    CheckBox chkAll =

     (CheckBox)GridView1.HeaderRow.Cells[0].FindControl("chkAll");

    chkAll.Checked = true;

}

for (int i = 0; i < GridView1.Rows.Count; i++)

{

if (GridView1.Rows[i].RowType == DataControlRowType.DataRow)

{

    if (CheckBoxArray.IndexOf(checkAllIndex) != -1)

    {

        CheckBox chk =

         (CheckBox)GridView1.Rows[i].Cells[0].FindControl("CheckBox1");

        chk.Checked = true;

        GridView1.Rows[i].Attributes.Add("style","background-color:aqua");     

    }

    else

    {

      int CheckBoxIndex =GridView1.PageSize*(GridView1.PageIndex)+(i + 1);

      if (CheckBoxArray.IndexOf(CheckBoxIndex) != -1)

      {

         CheckBox chk =

         (CheckBox)GridView1.Rows[i].Cells[0].FindControl("CheckBox1");

        chk.Checked = true;

        GridView1.Rows[i].Attributes.Add("style", "background-color:aqua");

      }

    }

}

}

 

  

VB.Net

For i As Integer = 0 To GridView1.Rows.Count - 1

   If GridView1.Rows(i).RowType = DataControlRowType.DataRow Then

     If CheckBoxArray.IndexOf(checkAllIndex) <> -1 Then

       Dim chk As CheckBox = _

        DirectCast(GridView1.Rows(i).Cells(0) _

        .FindControl("CheckBox1"), CheckBox)

       chk.Checked = True

       GridView1.Rows(i).Attributes.Add("style", "background-color:aqua")

     Else

       Dim CheckBoxIndex As Integer

           = GridView1.PageSize*(GridView1.PageIndex)+(i+1)

       If CheckBoxArray.IndexOf(CheckBoxIndex) <> -1 Then

        Dim chk As CheckBox = _

         DirectCast(GridView1.Rows(i).Cells(0) _

         .FindControl("CheckBox1"), CheckBox)

        chk.Checked = True

        GridView1.Rows(i).Attributes.Add("style", "background-color:aqua")

       End If

     End If

   End If

Next