Home > ASP.Net, Javascript > Checkbox column with header template also having checkbox

Checkbox column with header template also having checkbox


Hi all ,

try this example to use CheckBox with header template of Gridview Control :-

Assuming that SqlDataSource1 is the datasource for my GridView

so we will add the following Javascript Code :-

<script type="text/javascript">
    function SelectAll(id) {
        var frm = document.forms[0];
        for (i=0;i<frm.elements.length;i++) {
            if (frm.elements[i].type == "checkbox") {
                frm.elements[i].checked = document.getElementById(id).checked;
            }
        }
    }
</script>

and in Our Page

<asp:GridView ID="GridView1" runat="server" DataSourceID="SqlDataSource1" Width="400px">
    <Columns>
        <asp:TemplateField>
            <AlternatingItemTemplate>
                <asp:CheckBox ID="CheckBox1" runat="server" />
            </AlternatingItemTemplate>
            <ItemTemplate>
                <asp:CheckBox ID="CheckBox1" runat="server" />
            </ItemTemplate>
            <HeaderTemplate>
                <asp:CheckBox ID="cbSelectAll" runat="server" Text="Select All" />
            </HeaderTemplate>
            <HeaderStyle HorizontalAlign="Left" />
            <ItemStyle HorizontalAlign="Left" />
        </asp:TemplateField>
    </Columns>
</asp:GridView>

and In code behind :-

protected void GridView1_RowDataBound(object sender, System.Web.UI.WebControls.GridViewRowEventArgs e)
 {
    if (e.Row.RowType == DataControlRowType.Header)
    {
        //adding an attribute for onclick event on the check box in the header
        //and passing the ClientID of the Select All checkbox
        ((CheckBox)e.Row.FindControl("cbSelectAll")).Attributes.Add("onclick", "javascript:SelectAll('" + ((CheckBox)e.Row.FindControl("cbSelectAll")).ClientID + "')");
    }
}

and to get checked row for delete with Delete button

foreach (GridViewRow row in GridView1.Rows)
   {
       CheckBox checkbox = (CheckBox)row.FindControl("cbxId");
       if (checkbox.Checked == true)
         {
           int Id = Convert.ToInt32(GridView1.DataKeys[row.RowIndex].Value);
           // your delete method here
         }
   }

Hope this helps

Good Luck

Advertisements
Categories: ASP.Net, Javascript
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: