Monday, September 12, 2011

Check/Uncheck GridView Rows using a Checkbox in JavaScript ?

Posted by Rahul Kharde at 9:40 PM

Many times you want to check/Uncheck checkboxes within a GridView control using JavaScript.
In this article a GridView control is used. Inside the GridView control there are 2 fields. One template field and other are bound fields to display some book data.

Inside the TemplateField a CheckBox control is placed in the HeaderTemplate and ItemTemplate in GridView

JavaScript

Add this JavaScript in the page’s head section
<script language="javascript" type="text/javascript">
        function SelectAll(oCheckbox) {
            var GridView1 = document.getElementById("<%=GridView1.ClientID %>");
            for (i = 1; i < GridView1.rows.length; i++) {
                GridView1.rows[i].cells[0].getElementsByTagName("INPUT")[0].checked = oCheckbox.checked;
            }
        }

HTML

I have used a TemplateField inside the GridView and put a CheckBox in the ItemTemplate as well as another CheckBox in the HeaderTemplate of the TemplateField. On checkbox in header call the JavaScript function on click event.
  <asp:GridView ID="GridView1" runat="server" BackColor="White" BorderColor="#CC9966"
        BorderStyle="None" BorderWidth="1px" CellPadding="4" AutoGenerateColumns="False">
        <FooterStyle BackColor="#FFFFCC" ForeColor="#330099" />
        <RowStyle BackColor="White" ForeColor="#330099" />
        <Columns>
            <asp:TemplateField>
                <HeaderTemplate>
                    <asp:CheckBox ID="CheckBox2" runat="server" onclick="javascript:SelectAll(this)" />
                </HeaderTemplate>
                <ItemTemplate>
                    <asp:CheckBox ID="CheckBox1" runat="server" />
                </ItemTemplate>
            </asp:TemplateField>
            <asp:BoundField DataField="Book" HeaderText="Book" />
        </Columns>
        <PagerStyle BackColor="#FFFFCC" ForeColor="#330099" HorizontalAlign="Center" />
        <SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="#663399" />
        <HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="#FFFFCC" />
    </asp:GridView>


Code Behind

Create a Temporary Dataset which is containing the book names Column bind to Gridview
  protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                DataSet ds = new DataSet();
                ds.Tables.Add();
                ds.Tables[0].Columns.Add("Book");

                for (int i = 0; i < 5; i++)
                {
                    DataRow dr = ds.Tables[0].NewRow();
                    switch (i)
                    {
                        case 0: dr["Book"] = "ASP.Net"; break;
                        case 1: dr["Book"] = "SQL"; break;
                        case 2: dr["Book"] = "HTML"; break;
                        case 3: dr["Book"] = "JavaScript"; break;
                        case 4: dr["Book"] = "C#"; break;
                    }
                    ds.Tables[0].Rows.Add(dr);
                }
                GridView1.DataSource = ds.Tables[0];
                GridView1.DataBind();
            }
        }





Download




If you enjoyed this post and wish to be informed whenever a new post is published, then make sure you subscribe to my regular Email Updates. Subscribe Now!


Kindly Bookmark and Share it:

YOUR ADSENSE CODE GOES HERE

0 comments:

Have any question? Feel Free To Post Below:

 

Popular Posts

Recent Comments

© 2011. All Rights Reserved | Help to understand .Net | Template by Blogger Widgets

Home | About | Top