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
