Home Asp.net Gridview Keep Checked or Selected Rows State During Paging in Asp.net

Gridview Keep Checked or Selected Rows State During Paging in Asp.net

September 23, 2014

1096

In my previous tutorials, I’d explained bind gridview using executereader, how to export gridview data to word excel text and pdf, get gridview selected rows data from code-behind and other more cracking tutorials on GridView, Asp.net here.

Now here in this tutorial, I’ll explain how you can keep the state of asp.net gridview checked or selected rows during paging or page index change event in asp.net using c# and vb.net with example code and step by step guide.

Gridview Keep Checked or Selected Rows State OnPageIndexChanging Event

Here is the complete HTML markup for .aspx page that I used for gridview keep checked or selected rows state in asp.net:

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Keep state of gridview selected rows during paging 
        in asp.net using c# or vb.net</title>

    <style type="text/css">
        .selected {
            background-color: #f5f5f5;
        }
    </style>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            //Checkbox header select all settings
            $('[id$=chkSelectAll]').click(function () {
                if ($(this).is(":checked")) {
                    $('.chkSelect > input[type="checkbox"]').prop('checked', true);

                    //add the selected class from each row
                    $('.chkSelect > input[type="checkbox"]').closest("tr").addClass("selected");
                } else {
                    $('.chkSelect > input[type="checkbox"]').prop('checked', false);

                    //remove selected class from each row
                    $('.chkSelect > input[type="checkbox"]').closest("tr").removeClass("selected");
                }
            });

            //Checkbox gridview row select settings
            $('.chkSelect > input[type="checkbox"]').click(function () {
                //remove chkSelectAll checked when any of the child checkbox clicked
                $('[id$=chkSelectAll]').removeAttr("checked");

                if ($(this).is(":checked")) {
                    //add the selected class to selected row
                    $($(this).closest("tr")).addClass("selected");
                } else {
                    //remove the selected class from selected row
                    $($(this).closest("tr")).removeClass("selected");
                }
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <h4>Keep state of gridview selected rows during paging in asp.net</h4>
            <asp:GridView ID="grdResult" runat="server" AutoGenerateColumns="false"
                AllowPaging="true" PageSize="5" OnPageIndexChanging="grdResult_PageIndexChanging"
                DataKeyNames="SubjectId">
                <HeaderStyle Font-Bold="true" BackColor="#9a9a9a" BorderColor="#222"
                    ForeColor="White" Height="30" />
                <PagerStyle HorizontalAlign="Center" />
                <Columns>
                    <asp:TemplateField>
                        <HeaderTemplate>
                            <asp:CheckBox ID="chkSelectAll" runat="server" />
                        </HeaderTemplate>
                        <ItemTemplate>
                            <asp:CheckBox ID="chkSelect" runat="server" CssClass="chkSelect" />
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:BoundField DataField="SubjectName" HeaderText="Subject Name"
                        ItemStyle-Width="200" ItemStyle-HorizontalAlign="Center" />
                    <asp:BoundField DataField="Marks" ItemStyle-HorizontalAlign="Center"
                        ItemStyle-Width="200" HeaderText="Marks" />
                </Columns>
            </asp:GridView>
        </div>
    </form>
</body>
</html>

Make sure I’ve used runat=”server” property of checkbox to access and identify selected rows and also declared OnPageIndexChanging=”grdResult_PageIndexChanging” event of asp.net gridview control that fired on page index change.

After adding HTML markup to .aspx page, choose your language (that is C# or Vb.net) and paste it to your code-behind file.

Gridview Keep Checked or Selected Rows State During Paging in C#

Now add the following namespace:

using System.Data;
using System.Collections;

After that add the following code in .aspx.cs page to bind gridview:

protected void Page_Load(object sender, EventArgs e) {
    if (!IsPostBack) {
        LoadResultData();
    }
}
private void LoadResultData() {
    DataTable dt = new DataTable();

    //Creating Column
    dt.Columns.Add("SubjectId");
    dt.Columns.Add("SubjectName");
    dt.Columns.Add("Marks");

    //Adding Results in rows
    dt.Rows.Add(1, "Asp.net", 95);
    dt.Rows.Add(2, "C#", 88);
    dt.Rows.Add(3, "Vb.net", 78);
    dt.Rows.Add(4, "HTML", 89);
    dt.Rows.Add(5, "CSS", 90);
    dt.Rows.Add(6, "JavaScript", 85);
    dt.Rows.Add(7, "jQuery", 96);

    //Binding Results to gridview
    grdResult.DataSource = dt;
    grdResult.DataBind();
}

And here is the code to keep the grid view selected or checked row state, add following code right after the above code:

//Call on gridview page rowIndex change
protected void grdResult_PageIndexChanging(object sender, GridViewPageEventArgs e) {
    //Save checked rows before page change
    SaveCheckedStates();
    grdResult.PageIndex = e.NewPageIndex;
    LoadResultData();

    //Populate cheked items with its checked status
    PopulateCheckedStates();
}

//Save the state of row checkboxes
private void SaveCheckedStates() {
    ArrayList objAL = new ArrayList();
    int rowIndex = -1;
    foreach (GridViewRow row in grdResult.Rows) {
        rowIndex = Convert.ToInt32(grdResult.DataKeys[row.RowIndex].Value);
        bool isSelected = ((CheckBox)row.FindControl("chkSelect")).Checked;
        if (ViewState["SELECTED_ROWS"] != null) {
            objAL = (ArrayList)ViewState["SELECTED_ROWS"];
        }
        if (isSelected) {
            if (!objAL.Contains(rowIndex)) {
                objAL.Add(rowIndex);
            }
        } else {
            objAL.Remove(rowIndex);
        }
    }
    if (objAL != null && objAL.Count > 0) {
        ViewState["SELECTED_ROWS"] = objAL;
    }
}

//Populate the saved checked checkbox status
private void PopulateCheckedStates() {
    ArrayList objAL = (ArrayList)ViewState["SELECTED_ROWS"];
    if (objAL != null && objAL.Count > 0) {
        foreach (GridViewRow row in grdResult.Rows) {
            int rowIndex = Convert.ToInt32(grdResult.DataKeys[row.RowIndex].Value);
            if (objAL.Contains(rowIndex)) {
                CheckBox chkSelect = (CheckBox)row.FindControl("chkSelect");
                chkSelect.Checked = true;
                row.Attributes.Add("class", "selected");
            }
        }
    }
}

Gridview Keep Checked or Selected Rows State During Paging in Vb.net

Now add the following namespace:

Imports System.Data
Imports System.Collections

After that add the following code to .aspx.vb page:

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    If Not IsPostBack Then
        LoadResultData()
    End If
End Sub

Private Sub LoadResultData()
    Dim dt As New DataTable()

    'Creating Column'
    dt.Columns.Add("SubjectId")
    dt.Columns.Add("SubjectName")
    dt.Columns.Add("Marks")

    'Adding Results in rows'
    dt.Rows.Add(1, "Asp.net", 95)
    dt.Rows.Add(2, "C#", 88)
    dt.Rows.Add(3, "Vb.net", 78)
    dt.Rows.Add(4, "HTML", 89)
    dt.Rows.Add(5, "CSS", 90)
    dt.Rows.Add(6, "JavaScript", 85)
    dt.Rows.Add(7, "jQuery", 96)

    'Binding Results to gridview'
    grdResult.DataSource = dt
    grdResult.DataBind()
End Sub

And here is the code to get selected or checked row values from code-behind, add following code right after the above code:

'Call on gridview page rowIndex change'
Protected Sub grdResult_PageIndexChanging(ByVal sender As Object, ByVal e As GridViewPageEventArgs)
    'Save checked rows before page change'
    SaveCheckedStates()
    grdResult.PageIndex = e.NewPageIndex
    LoadResultData()

    'Populate cheked items with its checked status'
    PopulateCheckedStates()
End Sub

'Save the state of row checkboxes'
Private Sub SaveCheckedStates()
    Dim objAL As New ArrayList()
    Dim rowIndex As Integer = -1
    For Each row As GridViewRow In grdResult.Rows
        rowIndex = Convert.ToInt32(grdResult.DataKeys(row.RowIndex).Value)
        Dim isSelected As Boolean = CType(row.FindControl("chkSelect"), CheckBox).Checked
        If ViewState("SELECTED_ROWS") IsNot Nothing Then
            objAL = CType(ViewState("SELECTED_ROWS"), ArrayList)
        End If
        If isSelected Then
            If Not objAL.Contains(rowIndex) Then
                objAL.Add(rowIndex)
            End If
        Else
            objAL.Remove(rowIndex)
        End If
    Next row
    If objAL IsNot Nothing AndAlso objAL.Count > 0 Then
        ViewState("SELECTED_ROWS") = objAL
    End If
End Sub

'Populate the saved checked checkbox status'
Private Sub PopulateCheckedStates()
    Dim objAL As ArrayList = CType(ViewState("SELECTED_ROWS"), ArrayList)
    If objAL IsNot Nothing AndAlso objAL.Count > 0 Then
        For Each row As GridViewRow In grdResult.Rows
            Dim rowIndex As Integer = Convert.ToInt32(grdResult.DataKeys(row.RowIndex).Value)
            If objAL.Contains(rowIndex) Then
                Dim chkSelect As CheckBox = CType(row.FindControl("chkSelect"), CheckBox)
                chkSelect.Checked = True
                row.Attributes.Add("class", "selected")
            End If
        Next row
    End If
End Sub

Example Result

Get Asp.net GridView Selected Row Data Code-behind using C# Vb.net

Gridview Keep Checked or Selected Rows State During Paging in Asp.net

Gridview Keep Checked or Selected Rows State OnPageIndexChanging Event

Gridview Keep Checked or Selected Rows State During Paging in C#

Gridview Keep Checked or Selected Rows State During Paging in Vb.net

Example Result

Download Example

LEAVE A REPLY Cancel reply

EDITOR PICKS

How to use AJAX in Asp.net with Example?

DropDownList Country-State-City Cascading using Ajax

Call Server-side Function Using jQuery Ajax Call

TOP TUTORIALS BY ASPNETO

Java vs .Net – Key Differences to Decide Which is Better?

Main Difference between SessionState and ViewState in Asp.net

How to Get appSettings Value from Web.config File?

How to Get ConnectionString from Web.config in Asp.net?

Difference between appSettings and connectionStrings in Web.config

POPULAR CATEGORY