Checkbox inside the gridview header

(ASP.NET)


Hi,
In this article i placed the checkbox inside the gridview header, if user check the checkbox in the gridview header, it will check all the checkboxes in the gridview rows and vice versa. I used jquery to implement this functionality.

.aspx page

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">

    <script type="text/javascript" src="../Scripts/jquery-1.9.1.js"></script>

    <title></title>
    <script type="text/javascript">
        $(function () {

            var chckAll = $(".chckselectall"); //header checkbox name
            var chckItem = $(".chckselect");

            chckAll.click(function () { //header checkbox click event

                var itr = 0; //for row number

                       //grdvw name + header checkbox name
                if ($('#grdvw_checkall_chck_selectall').is(':checked')) { //if header chckbox checked
                 

                    chckItem.each(function () {

                        //gridview name + row checkbox name + coresponding row number
                        $('#grdvw_checkall_chck_select_' + itr).prop('checked', true);

                        itr++;
                    })
                }
                else { //if header chckbox unchecked

                  
                    chckItem.each(function () {

                        $('#grdvw_checkall_chck_select_' + itr).prop('checked', false);

                        itr++;
                    })
                }
             
            });
        });
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:GridView AutoGenerateColumns="false" DataSourceID="sqlds_prodtype"  AllowPaging="true" AllowSorting="true" ID="grdvw_checkall" runat="server" CellPadding="4" ForeColor="#333333" GridLines="None">
            <AlternatingRowStyle BackColor="White" />
            <EditRowStyle BackColor="#2461BF" />
            <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
            <HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
            <PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
            <RowStyle BackColor="#EFF3FB" />
            <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
            <SortedAscendingCellStyle BackColor="#F5F7FB" />
            <SortedAscendingHeaderStyle BackColor="#6D95E1" />
            <SortedDescendingCellStyle BackColor="#E9EBEF" />
            <SortedDescendingHeaderStyle BackColor="#4870BE" />

           <Columns>
               <asp:TemplateField>
                   <HeaderTemplate>
                       <asp:CheckBox ID="chck_selectall" CssClass="chckselectall" runat="server" />
                   </HeaderTemplate>
            <ItemTemplate> 
              <asp:CheckBox ID="chck_select"  CssClass="chckselect" runat="server" />
            </ItemTemplate> 
        </asp:TemplateField> 

               <asp:TemplateField HeaderText="Submit">
                   <ItemTemplate>
                       <asp:Button ID="btn_submit" Text="Submit" runat="server" OnClick="btn_submit_Click" />
                   </ItemTemplate>
               </asp:TemplateField>

               <asp:TemplateField HeaderText="Products Type">
                   <ItemTemplate>
                   
                       <asp:DropDownList ID="drp_productstype"  DataSourceID="SqlDataSource1"
                    DataValueField="ProductID" DataTextField="ProductName"
                    runat="server" EnableViewState="true"
                     Width="100%" >
                       
                    
                </asp:DropDownList>
                  <asp:SqlDataSource ID="SqlDataSource1" runat="server"
                        ConnectionString="<%$ ConnectionStrings:Northwindconstring %>"
                        SelectCommand="SELECT * FROM Products">
                    </asp:SqlDataSource>
                   </ItemTemplate>

               </asp:TemplateField>
               <asp:BoundField DataField="ProductID"  HeaderText="Product ID" />
               <asp:BoundField DataField="ProductName"  HeaderText="ProductName" />
               <asp:BoundField DataField="SupplierID"  HeaderText="SupplierID" />
               <asp:BoundField DataField="CategoryID"  HeaderText="CategoryID" />
           </Columns>

        </asp:GridView>


   
        <asp:SqlDataSource ID="sqlds_prodtype" runat="server" ConnectionString="<%$ ConnectionStrings:Northwindconstring %>"
            SelectCommand="SELECT * FROM Products" />


        <br />
        <br />
        <asp:Button ID="btn_check" runat="server" OnClick="btn_check_Click" Text="Submit" />
           
    </div>
    </form>
</body>
</html>

Image

Ratings


Average Rating: 0.00 by 0 users
Giri Prasad
6/10/2013
6/10/2013
Download PDF

Comments