Multi-Checkbox in Gridview

To achieve the functionality of persisting the state of checkboxes across paginated pages in a GridView in ASP.NET, you can follow these general steps:

Steps to Implement:

1. Maintain State: Use a data structure to maintain the state of the checkboxes (e.g., a List to store the IDs of checked records).

2. Handle GridView Events: Manage the RowDataBound and PageIndexChanging events of the GridView to update the state as users interact with the checkboxes.

3. Store Checked States: When the user checks or unchecks a checkbox, update the underlying data structure to reflect the current state.

4. Rebind the GridView: Ensure the GridView is rebound on postbacks to reflect the correct state of the checkboxes

 C#

using System;
using System.Collections.Generic;
using System.Web.UI.WebControls;

public partial class YourPage : System.Web.UI.Page
{
    private static List checkedIds = new List(); // To store checked IDs
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            BindGrid();
        }
    }
    private void BindGrid()
    {
        // Bind your GridView here, for example:
        GridView1.DataSource = GetData(); // GetData() should return your data source
        GridView1.DataBind();
    }
    protected void GridView1_PageIndexChanging(object sender, GridViewPageEventArgs e)
    {
        SaveCheckedItems(); // Save checked IDs before changing page
        GridView1.PageIndex = e.NewPageIndex;
        BindGrid();
    }
    protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
    {
        if (e.Row.RowType == DataControlRowType.DataRow)
        {
            int id = Convert.ToInt32(DataBinder.Eval(e.Row.DataItem, "ID"));
            CheckBox chk = (CheckBox)e.Row.FindControl("CheckBox1");
            chk.Checked = checkedIds.Contains(id); // Check if the ID is in the list
        }
    }
    protected void Button1_Click(object sender, EventArgs e)
    {
        // Here you can use the checkedIds list to update your records
        foreach (int id in checkedIds)
        {
            // Update your database records as needed
        }
    }
    private void SaveCheckedItems()
    {
        checkedIds.Clear(); // Clear the list to repopulate it
        foreach (GridViewRow row in GridView1.Rows)
        {
            CheckBox chk = (CheckBox)row.FindControl("CheckBox1");
            int id = Convert.ToInt32(DataBinder.Eval(row.DataItem, "ID"));
            if (chk != null && chk.Checked)
            {
                checkedIds.Add(id); // Add checked ID to the list
            }
        }
    }
    private List GetData()
    {
        // Fetch your data from the database or any other source
        // Return a list of your data type
    }

    private bool IsChecked(object id)
    {
        return checkedIds.Contains(Convert.ToInt32(id)); // Check if the ID is checked
    }
}

In your scenario where you're using a GridView with pagination and checkboxes, the issue arises because when you switch between pages, the state of the checkboxes (which rows are checked) is not maintained. By default, ASP.NET GridView's checkboxes get reset after a postback, especially during pagination, because the GridView is re-rendered and the control state is lost.

To resolve this, you need to preserve the state of the checkboxes across page changes. Here's how you can approach this issue:

Steps to handle checkbox states on pagination:

1. Use Client-Side (JavaScript) or Hidden Fields to track the checked checkboxes. The idea is to store the IDs of the selected rows either in JavaScript or a hidden field on the server-side to maintain their state between postbacks and pagination.

2. Handle the checkbox state on server-side: After the user clicks the "APPROVE" button, you can use the IDs stored in the hidden field or JavaScript variable to identify the selected checkboxes, and then perform the necessary update.

Below is an example using hidden fields to store the selected IDs across page changes.

Solution Using Hidden Field

1. Add Checkboxes to GridView: Make sure each row has a checkbox that the user can select.

2. Store Checked IDs in Hidden Field: Use JavaScript to store the IDs of the checked rows in a hidden field. This ensures that the selection persists even when you navigate between pages.

   function storeCheckedItems() {
       var selectedIds = [];
       $('input[type="checkbox"]:checked').each(function() {
           selectedIds.push($(this).closest('tr').find('.ReferenceId').text());
       });
       $('#<%= hfSelectedIds.ClientID %>').val(selectedIds.join(','));
   }
   

3. Update Server-Side Code: In the GridView's server-side code (in the button click event), you can access the hfSelectedIds value and perform the update based on the IDs stored.

   protected void gvData_PageIndexChanging(object sender, GridViewPageEventArgs e)
   {
       gvData.PageIndex = e.NewPageIndex;
       BindGrid();
   }
   
   protected void btnApproveSelected_Click(object sender, EventArgs e)
   {
       string selectedIds = hfSelectedIds.Value; // Get the comma-separated IDs
       if (!string.IsNullOrEmpty(selectedIds))
       {
           var idsToApprove = selectedIds.Split(',');
   
           // Process the IDs to update the database
           foreach (var id in idsToApprove)
           {
               // Update your records based on the ID
           }
       }
   }
   
   protected void gvData_RowDataBound(object sender, GridViewRowEventArgs e)
   {
       if (e.Row.RowType == DataControlRowType.DataRow)
       {
           var chk = (CheckBox)e.Row.FindControl("chkSelect");
           if (chk != null)
           {
               // You can keep the checkbox checked or unchecked based on certain conditions
           }
       }
   }
   
   private void BindGrid()
   {
       // Your code to bind data to GridView
   }
   

4. Prevent Checkbox State from Resetting: The key here is to ensure that when the GridView is re-bound, the state of the checkboxes is preserved. Since checkboxes are rendered as part of the GridView’s content, using a hidden field to store and retrieve the selected IDs will allow you to track user selection even when the user navigates between pages.

Explanation:

• The checkboxes are part of each row in the GridView.
• A hidden field (hfSelectedIds) is used to store the IDs of the rows that are selected.
• A JavaScript function (storeCheckedItems) is used to populate the hidden field with the selected IDs whenever a user selects or deselects a checkbox.
• On clicking the "Approve" button, the server-side logic retrieves the selected IDs and processes them.

This way, the selected checkboxes will persist across pagination, and the selected rows' IDs can be easily accessed for updating the status when the "APPROVE" button is clicked.

Hello Abhishek,

Flow is : I want to update status of checked checkbox in gridview.  On pagination of grid, it should persist the state of checkbox, if it checked or not.
So for ex. : If I check one checkbox on 1st page and one checkbox on 2nd page, I should be able to get ID of that checked record and so I can update respcted record in table

I am looking a solution in asp.net 

can you please explain me the flow and perticularry what technolagy you are dealing with