Select All in Single Page GridView

Tweet

This post is a continuation of a series. Please look at the end of this post for more information

In this post, I will be explaining the fourth implementation of the series (Select All in Single Page GridView)

I am using Northwind database for this example, so make sure to have Northwind database to use this sample. The comments on the code will explain more about the functionality of the code.

For more understanding below is the use case:

• When page gets loaded, the GridView should bind the records from the database.
• When the GridView shows, rows should be selected with the data already stored and fetched in code behind (say Id = 2, 3, 8 etc.). It means, the check box must be selected and the color of the row must be changed to selected color.
• Once the page loaded, the used can select or unselect any row in the grid using check box provided on each row in a separate column.
• When the user selects (check the checkbox) a particular row, the row background color must be changed to selected color.
• When the user unselects (uncheck the checkbox) a particular row, the row background color must be changed to default color. (To know what is the existing back color of that row when unselecting row, I am storing the row back color in to a hidden control at each row)
• The GridView also contains a CheckBox in the header of Select column. When the user selects the checkbox, all the records in the current page must be selected.
• When the user unselect the Select All CheckBox, all the records in the current page must be unselected.
• When user press any button, the code behind should have the ability to get the selected row Id. (For this example, show the Id selected in the page itself)

This implementation will work fine if only one page exist in GridView. If multiple page exist, the user can use Select All/Unselect All features for the current page only. If you required to handle for multiple page, please check the next post in this series.

The implementation as follows:

In aspx script.

<asp:GridView ID="grdViewProducts" runat="server"
    AllowPaging="True" AutoGenerateColumns="False" TabIndex="1"
    DataKeyNames="ProductID" Width="100%"
    CellPadding="4" ForeColor="#333333"
    onrowdatabound="grdViewProducts_RowDataBound" 
    onpageindexchanging="grdViewProducts_PageIndexChanging">
    <RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
    <Columns>
        <asp:BoundField DataField="ProductName" HeaderText="Product Name" />
        <asp:BoundField DataField="CompanyName" HeaderText="Supplier" />
        <asp:BoundField DataField="CategoryName" HeaderText="Category Name" />
        <asp:BoundField DataField="CategoryName" HeaderText="Category" />
        <asp:BoundField DataField="QuantityPerUnit" HeaderText="Quantity Per Unit"/>
        <asp:BoundField DataField="UnitPrice" HeaderText="UnitPrice" DataFormatString="{0:#0.00}" />
        <asp:TemplateField HeaderText="Select">
            <HeaderTemplate>
                <asp:CheckBox runat="server" ID="chkSelectAll" onclick="SelectAll(this.id)" />
            </HeaderTemplate>
            <ItemTemplate>
                <asp:HiddenField runat="server" ID="hndRowBackColor" Value="" />
                <asp:CheckBox runat="server" ID="chkSelect" onclick="SelectRow(this.id)" />
                <asp:Label runat="server" ID="lblProductId" Text='<%# Eval("ProductID") %>' Visible="false"></asp:Label>
            </ItemTemplate>
            <FooterTemplate>
                <asp:CheckBox runat="server" ID="chkSelectAll1" onclick="SelectAll()" />
            </FooterTemplate>
        </asp:TemplateField>
    </Columns>
    <FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
    <PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Right" />
    <SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
    <HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
    <EditRowStyle BackColor="#999999" />
    <AlternatingRowStyle BackColor="White" ForeColor="#284775" />
</asp:GridView>
<asp:Button ID="btnProcess" runat="server" Text="Process" Width="100px" OnClick="btnProcess_Click" />

JavaScript

var CONST_COLOR_BACKCOLOR = '#F7BE81';
var Const_LastCol_Index = 6;

// I am calling a Javascript function to change the selected row color on page load
var browserName = navigator.appName;
if (browserName == "Microsoft Internet Explorer") {
    window.onload = SelectGridOnLoad;
}
else {
    if (browserName == "Netscape") //google chrome app.Name
    {
        setTimeout("SelectGridOnLoad()", 500);
    }
    else {
        window.onload = SelectGridOnLoad; // helps with Opera
    }
}

function SelectGridOnLoad() {

    // Looping all the row (Here - 1 is used as I have footer in the Grid View and starting from 1 Row (0 is Header)
    // So if you dont have Footer required to loop till end of the row (ie., no -1).
    for (var intRow = 1; intRow < document.getElementById('<%= grdViewProducts.ClientID %>').rows.length - 1; intRow++) {

        // Declaring variable for Holding Values
        var vHiddenControlId = 0;
        var vCheckById = '';
        
        // Getting the GridView Row
        var gridRow = document.getElementById('<%= grdViewProducts.ClientID %>').rows[intRow];
        
        for (var intCell = 0; intCell < gridRow.cells[Const_LastCol_Index].childNodes.length; intCell++) // Looping the Row cell
        {
            if (gridRow.cells[Const_LastCol_Index].childNodes[intCell].id != null) {

                // Getting the Hidden Control Id (for storing current row background color
                if (gridRow.cells[Const_LastCol_Index].childNodes[intCell].id.indexOf("hndRowBackColor") != -1)
                    vHiddenControlId = gridRow.cells[Const_LastCol_Index].childNodes[intCell].id;

                // Getting Check box Id (to know the check box selected)
                if (gridRow.cells[Const_LastCol_Index].childNodes[intCell].id.indexOf("chkSelect") != -1)
                    vCheckById = gridRow.cells[Const_LastCol_Index].childNodes[intCell].id;
            }
        }
        if (document.getElementById(vCheckById).checked == true) {
            document.getElementById(vHiddenControlId).value = gridRow.style.backgroundColor;
            gridRow.style.backgroundColor = CONST_COLOR_BACKCOLOR;
        }
    }
}

function SelectAll(Id) {

    for (var intRow = 1; intRow < document.getElementById('<%= grdViewProducts.ClientID %>').rows.length - 1; intRow++) {

        // Declaring variable for Holding Values
        var vHiddenControlId = 0;
        var vCheckById = '';
        
        // Getting the GridView Row
        var gridRow = document.getElementById('<%= grdViewProducts.ClientID %>').rows[intRow];

        for (var intCell = 0; intCell < gridRow.cells[Const_LastCol_Index].childNodes.length; intCell++) // Looping the Row cell
        {
            if (gridRow.cells[Const_LastCol_Index].childNodes[intCell].id != null) {

                // Getting the Hidden Control Id (for storing current row background color
                if (gridRow.cells[Const_LastCol_Index].childNodes[intCell].id.indexOf("hndRowBackColor") != -1)
                    vHiddenControlId = gridRow.cells[Const_LastCol_Index].childNodes[intCell].id;

                // Getting Check box Id (to know the check box selected)
                if (gridRow.cells[Const_LastCol_Index].childNodes[intCell].id.indexOf("chkSelect") != -1)
                    vCheckById = gridRow.cells[Const_LastCol_Index].childNodes[intCell].id;
            }
        }

        if (document.getElementById(Id).checked == true) {// If Selected
            if (document.getElementById(vCheckById).checked == false) {
                document.getElementById(vCheckById).checked = true;
                document.getElementById(vHiddenControlId).value = gridRow.style.backgroundColor; // Storing the Back color to Hidden Control
                gridRow.style.backgroundColor = CONST_COLOR_BACKCOLOR;
            }
        }

        if (document.getElementById(Id).checked == false) {// If not Selected
            document.getElementById(vCheckById).checked = false;
            gridRow.style.backgroundColor = document.getElementById(vHiddenControlId).value;
        }
    }
}
function SelectRow(Id) {

    if (document.getElementById(Id).checked == true) // If Selected
    {

        for (var i = 0; i < document.getElementById(Id).parentNode.childNodes.length; i++) // Looping the Row cell
        {
            if (document.getElementById(Id).parentNode.childNodes[i].id != null) {
            
                // Getting the control Id to know hidden control
                var controlSplitIds = document.getElementById(Id).parentNode.childNodes[i].id.split('_');

                if (controlSplitIds[controlSplitIds.length - 1] == 'hndRowBackColor') {
                    // Storing the color already was there to the hidden control for future replacement
                    document.getElementById(Id).parentNode.childNodes[i].value = document.getElementById(Id).parentNode.parentNode.style.backgroundColor;
                }
            }
        }
        // Chanding the color
        document.getElementById(Id).parentNode.parentNode.style.backgroundColor = CONST_COLOR_BACKCOLOR;
    }
    else // If unselected - Replace the color back
    {
        for (var i = 0; i < document.getElementById(Id).parentNode.childNodes.length; i++) {

            if (document.getElementById(Id).parentNode.childNodes[i].id != null) {

                var controlSplitIds = document.getElementById(Id).parentNode.childNodes[i].id.split('_');

                if (controlSplitIds[controlSplitIds.length - 1] == 'hndRowBackColor') {
                    document.getElementById(Id).parentNode.parentNode.style.backgroundColor = document.getElementById(Id).parentNode.childNodes[i].value;
                }
            }
        }
    }
}

C# Codebehind

protected void Page_Load(object sender, EventArgs e)
{
    if (!Page.IsPostBack)
        BindGrid();
}
/// <summary>
/// Method which binds the data to the Grid
/// </summary>
private void BindGrid()
{
    using (SqlConnection connection = new SqlConnection(ConfigurationManager.ConnectionStrings["SQLConnection"].ConnectionString))
    {

        SqlCommand command = new SqlCommand(
               "SELECT ProductID, ProductName, CompanyName, CategoryName, " +
               "QuantityPerUnit, UnitPrice FROM Products " +
               "JOIN Suppliers ON Products.SupplierID = Suppliers.SupplierID " +
               "JOIN Categories ON Products.CategoryID = Categories.CategoryID ", connection);

        connection.Open();
        SqlDataReader dr = command.ExecuteReader(CommandBehavior.CloseConnection);

        IList<ProductView> productViewList = new List<ProductView>();
        while (dr.Read())
        {
            ProductView productView = new ProductView();
            productView.ProductID = Convert.ToInt32(dr["ProductID"].ToString());
            productView.ProductName = dr["ProductName"].ToString();
            productView.CompanyName = dr["CompanyName"].ToString();
            productView.CategoryName = dr["CategoryName"].ToString();
            productView.QuantityPerUnit = dr["QuantityPerUnit"].ToString();
            productView.UnitPrice = Convert.ToDouble(dr["UnitPrice"].ToString());
            productViewList.Add(productView);
        }
        grdViewProducts.DataSource = productViewList;
        grdViewProducts.DataBind();
    }
}
protected void grdViewProducts_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        ProductView productView = (ProductView)e.Row.DataItem;
        // Selecting the products programatically 
        // Considering those records (2, 5, 8) are already selected and stored in the database
        if ((productView.ProductID == 2) ||
            (productView.ProductID == 5) ||
            (productView.ProductID == 8))
        {
            CheckBox chkSelect = (CheckBox)e.Row.FindControl("chkSelect");
            chkSelect.Checked = true;
        }
    }
}

protected void btnProcess_Click(object sender, EventArgs e)
{
    if (grdViewProducts.Rows.Count > 0)
    {
        Response.Write("Selected Row Id : ");
        foreach (GridViewRow grdViewRow in grdViewProducts.Rows)
        {
            CheckBox chkSelect = (CheckBox)grdViewRow.FindControl("chkSelect");
            if (chkSelect.Checked == true)
            {
                Response.Write(((Label)grdViewRow.FindControl("lblProductId")).Text + ", ");
            }
        }
    }
}

protected void grdViewProducts_PageIndexChanging(object sender, GridViewPageEventArgs e)
{
    grdViewProducts.PageIndex = e.NewPageIndex;
    BindGrid();
}

VB Codebehind

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        If Not Page.IsPostBack Then
            BindGrid()
        End If
    End Sub
    Private Sub BindGrid()
        Using connection As New SqlConnection(ConfigurationManager.ConnectionStrings("SQLConnection").ConnectionString)

            Dim command As New SqlCommand("SELECT ProductID, ProductName, CompanyName, CategoryName, " & "QuantityPerUnit, UnitPrice FROM Products " & "JOIN Suppliers ON Products.SupplierID = Suppliers.SupplierID " & "JOIN Categories ON Products.CategoryID = Categories.CategoryID ", connection)

            connection.Open()
            Dim dr As SqlDataReader = command.ExecuteReader(CommandBehavior.CloseConnection)

            Dim productViewList As IList(Of ProductView) = New List(Of ProductView)()
            While dr.Read()
                Dim productView As New ProductView()
                productView.ProductID = Convert.ToInt32(dr("ProductID").ToString())
                productView.ProductName = dr("ProductName").ToString()
                productView.CompanyName = dr("CompanyName").ToString()
                productView.CategoryName = dr("CategoryName").ToString()
                productView.QuantityPerUnit = dr("QuantityPerUnit").ToString()
                productView.UnitPrice = Convert.ToDouble(dr("UnitPrice").ToString())
                productViewList.Add(productView)
            End While
            grdViewProducts.DataSource = productViewList
            grdViewProducts.DataBind()
        End Using
    End Sub
    Protected Sub grdViewProducts_RowDataBound(ByVal sender As Object, ByVal e As GridViewRowEventArgs)
        If e.Row.RowType = DataControlRowType.DataRow Then
            Dim productView As ProductView = DirectCast(e.Row.DataItem, ProductView)
            ' Selecting the products programatically 
            ' Considering those records (2, 5, 8) are already selected and stored in the database
            If (productView.ProductID = 2) OrElse (productView.ProductID = 16) OrElse (productView.ProductID = 20) Then
                Dim chkSelect As CheckBox = DirectCast(e.Row.FindControl("chkSelect"), CheckBox)
                chkSelect.Checked = True
            End If
        End If
    End Sub
    Protected Sub btnProcess_Click(ByVal sender As Object, ByVal e As EventArgs)
        If grdViewProducts.Rows.Count > 0 Then
            Response.Write("Selected Row Id : ")
            For Each grdViewRow As GridViewRow In grdViewProducts.Rows
                Dim chkSelect As CheckBox = DirectCast(grdViewRow.FindControl("chkSelect"), CheckBox)
                If chkSelect.Checked = True Then
                    Response.Write(DirectCast(grdViewRow.FindControl("lblProductId"), Label).Text + ", ")
                End If
            Next
        End If
    End Sub
    Protected Sub grdViewProducts_PageIndexChanging(ByVal sender As Object, ByVal e As GridViewPageEventArgs)
        grdViewProducts.PageIndex = e.NewPageIndex
        BindGrid()
    End Sub

public class ProductView
{
    public int ProductID { get; set; }
    public string ProductName { get; set; }
    public string CompanyName { get; set; }
    public string CategoryName { get; set; }
    public string QuantityPerUnit { get; set; }
    public double UnitPrice { get; set; }
}

Public Class ProductView
    Public Property ProductID() As Integer
        Get
            Return m_ProductID
        End Get
        Set(ByVal value As Integer)
            m_ProductID = value
        End Set
    End Property
    Private m_ProductID As Integer
    Public Property ProductName() As String
        Get
            Return m_ProductName
        End Get
        Set(ByVal value As String)
            m_ProductName = value
        End Set
    End Property
    Private m_ProductName As String
    Public Property CompanyName() As String
        Get
            Return m_CompanyName
        End Get
        Set(ByVal value As String)
            m_CompanyName = value
        End Set
    End Property
    Private m_CompanyName As String
    Public Property CategoryName() As String
        Get
            Return m_CategoryName
        End Get
        Set(ByVal value As String)
            m_CategoryName = value
        End Set
    End Property
    Private m_CategoryName As String
    Public Property QuantityPerUnit() As String
        Get
            Return m_QuantityPerUnit
        End Get
        Set(ByVal value As String)
            m_QuantityPerUnit = value
        End Set
    End Property
    Private m_QuantityPerUnit As String
    Public Property UnitPrice() As Double
        Get
            Return m_UnitPrice
        End Get
        Set(ByVal value As Double)
            m_UnitPrice = value
        End Set
    End Property
    Private m_UnitPrice As Double
End Class

This code has been tested with IE 6.0/8.0, Chrome 10.0, Firefox 3.6, Opera 11.01

Here is the output of the example.

Initial GridView (some records selected using C# Code)

Selecting one record and pressing Process button

Selecting Select All and pressing Process button

download the source code in C# here and in VB here

The other links on How to select multiple row in GridView:

1. Multirow Selection in GridView when CSS used for row style
2. Multirow Selection in GridView when alternative row colors used
3. Multirow Selection in GridView by retaining selections on Multiple Pages
4. Select All in Single Page GridView
5. Select All in Multiple Page GridView