Skip to main content

Check/Uncheck GridView Rows using a Checkbox in JavaScript ?


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
Download code Here…


Labels:

Comments

Post a Comment

Popular posts from this blog

Connected and disconnected architecture in ADO.Net with Example

Connected Architecture of ADO.NET The architecture of ADO.net, in which connection must be opened to access the data retrieved from database is called as connected architecture. Connected architecture was built on the classes connection, command, datareader and transaction.  Connected architecture is when you constantly make trips to the database for any CRUD (Create, Read, Update and Delete) operation you wish to do. This creates more traffic to the database but is normally much faster as you should be doing smaller transactions. Disconnected Architecture in ADO.NET The architecture of ADO.net in which data retrieved from database can be accessed even when connection to database was closed is called as disconnected architecture. Disconnected architecture of ADO.net was built on classes connection, dataadapter, commandbuilder and dataset and dataview. Disconnected architecture is a method of retrieving a recor
35 comments
Read more

HTTPHandler and HTTPModule in ASP.NET

If you want to implement pre-processing logic before a request hits the IIS resources. For instance you would like to apply security mechanism, URL rewriting, filter something in the request, etc. ASP.NET has provided two types of interception HttpModule and HttpHandler .   The web server examines the file name extension of the requested file, and determines which ISAPI extension should handle the request. Then the request is passed to the appropriate ISAPI extension.  For Example When an .aspx page is requested it is passed to ASP.Net page handler. Then Application domain is created and after that different ASP.Net objects like Httpcontext, HttpRequest, HttpResponse. HTTPModule: -    It's just like a filter. The Modules are called before and after the handler executes . -    HTTP Modules are objects which also participate the pipeline but they work before and after the HTTP Handler does its job, and produce additional services within the pipeline -  
125 comments
Read more

ASP.NET Page Life Cycle with example

In this article, we are going to discuss the different methods and order they are executed during the load of an .aspx web page. Methods Description Page_PreInit Before page Initialization Page_Init Page Initialization LoadViewState View State Loading LoadPostData Postback Data Processing Page_Load Page Loading RaisePostDataChangedEvent PostBack Change Notification RaisePostBackEvent PostBack Event Handling Page_PreRender Page Pre Rendering Phase SaveViewState View State Saving Page_Render Page Rendering Page_Unload Page Unloading PreInit : The entry point of the page life cycle is the pre-initialization phase called “PreInit”. You can dynamically set the values of master pages and themes in this event. You can also dynamically create controls in this event.  Init : This event fires after each control h
5 comments
Read more