Thursday, 10 July 2014

javascript GridView , header check box checked effect to client check boxes

function SelectheaderCheckboxes(headerchk) {
            // debugger;
            var gvcheck = document.getElementById('<% =GridView1.ClientID%>');
            var i;
            //Condition to check header checkbox selected or not if that is true checked all checkboxes
            if (headerchk.checked) {
                for (i = 0; i < gvcheck.rows.length; i++) {
                    var inputs = gvcheck.rows[i].getElementsByTagName('input');
                    if (inputs != null && inputs.length != 0)
                        inputs[0].checked = true;
                }
            }
            //if condition fails uncheck all checkboxes in gridview
            else {
                for (i = 0; i < gvcheck.rows.length; i++) {
                    var inputs = gvcheck.rows[i].getElementsByTagName('input');
                    if (inputs != null && inputs.length != 0)
                        inputs[0].checked = false;
                }
            }
        }
        //function to check header checkbox based on child checkboxes condition
        function Selectchildcheckboxes(header) {
            var ck = header;
            var count = 0;
            var gvcheck = document.getElementById('<% =GridView1.ClientID%>');
            var headerchk = document.getElementById(header);
            var rowcount = gvcheck.rows.length;
            //By using this for loop we will count how many checkboxes has checked
            for (i = 1; i < gvcheck.rows.length; i++) {
                var inputs = gvcheck.rows[i].getElementsByTagName('input');
                if (inputs != null && inputs.length != 0)
                    if (inputs[0].checked) {
                    count++;
                }
            }
            //Condition to check all the checkboxes selected or not
            if (count == rowcount - 1) {
                headerchk.checked = true;
            }
            else {
                headerchk.checked = false;
            }
        }


gridview design


 <asp:GridView ID="GridView1" AutoGenerateColumns="false" runat="server" ShowFooter="false"
                                DataKeyNames="Employee_ID"  AllowPaging="false"  CssClass="gridstyle" OnRowDataBound="GridView1_OnRowDataBound"
                                HorizontalAlign="Center" Width="80%" EmptyDataText="Record Not found!">
                                <RowStyle HorizontalAlign="Center" CssClass="even" />
                                <HeaderStyle CssClass="header-cell" />
                                <AlternatingRowStyle HorizontalAlign="Center" CssClass="odd" />
                                <Columns>
                                    <asp:TemplateField HeaderText="S.No.">
                                        <ItemTemplate>
                                            <%#Container.DataItemIndex+1 %>
                                        </ItemTemplate>
                                        <HeaderStyle CssClass="header-cell" />
                                    </asp:TemplateField>
                                    <asp:TemplateField>
                                        <HeaderTemplate>
                                        <center>
                                            <asp:CheckBox ID="chAllEmp" AutoPostBack="true" onclick="javascript:SelectheaderCheckboxes(this)"
                                                Checked="true" runat="server" /></center>
                                        </HeaderTemplate>
                                        <HeaderStyle CssClass="header-cell" />
                                        <ItemTemplate>
                                            <asp:CheckBox ID="chEmp" AutoPostBack="true" onClick="javascript:SelectheaderCheckboxes(headerchk)"
                                                Checked="true" runat="server" />
                                        </ItemTemplate>
                                        <HeaderStyle CssClass="header-cell" />
                                    </asp:TemplateField>
                                     <asp:TemplateField >
                                        <HeaderTemplate>
                                           <center >Employee Code</center>
                                        </HeaderTemplate>
                                        <ItemTemplate>
                                            <asp:Label runat="server" ID="labEmployee_code" Visible="true" Text='<%#Bind("Employee_code") %>'></asp:Label>
                                       
                                        </ItemTemplate>
                                    </asp:TemplateField>
                                    <asp:TemplateField >
                                        <HeaderTemplate>
                                           <center >Employee Name</center>
                                        </HeaderTemplate>
                                        <ItemTemplate>
                                            <asp:Label runat="server" ID="Label1" Visible="true" Text='<%#Bind("Employee_Name") %>'></asp:Label>
                                            <asp:Label runat="server" ID="labempid" Visible="false" Text='<%#Bind("Employee_ID") %>'></asp:Label>
                                                     <asp:Label runat="server" ID="labrankid" Visible="false" Text='<%#Bind("Rank_ID") %>'></asp:Label>
                                                              <asp:Label runat="server" ID="lanLocation" Visible="false" Text='<%#Bind("Loc_Code") %>'></asp:Label>
                                        </ItemTemplate>
                                    </asp:TemplateField>
                                    <asp:TemplateField>
                                        <HeaderTemplate>
                                          <center >   Days</center>
                                        </HeaderTemplate>
                                        <ItemTemplate>
                                            <asp:TextBox runat="server" ID="txtAmount" Text="0" onkeypress="return numeralsOnly(event)" Width="100px"></asp:TextBox>
                                        </ItemTemplate>
                                    </asp:TemplateField>
                                </Columns>
                            </asp:GridView>