Best practices in gridview programming

In this article, I will be explaining how to implement selectall functionality for gridview using javascript and reducing postbacks.

What shall be learnt through this post ?
Confused ?
Some javascript, some .net, some asp, some best practices , and some typical customer logged UI
bugs for row selection !

How do we achieve this functionalities ?
1) Check/Uncheck all row check boxes using header checkbox.2) Besed on all row checkboxes check, Check/uncheck of Header checkbox.

We'll use javascript to implement above mentioned functions.

To start with I have a GridView control with a header checkbox and checkbox for each individual record.

<asp:GridView ID="gvEmployee" runat="server" AllowPaging="True"  
            AllowSorting="True" AutoGenerateColumns="False"> 
            <Columns>
               <asp:TemplateField>
                    <HeaderTemplate>
                       <asp:CheckBox ID="chkSelect" runat="server" Text="Select All" onclick = "SelectAll(this)" />
                    </HeaderTemplate>
                    <ItemTemplate>
                        <asp:CheckBox ID="chkSelect" runat="server" onclick = "checkAllBox(this)" />
                    </ItemTemplate>
               </asp:TemplateField>
                 <asp:BoundField DataField="EmployeID" HeaderText="EmployeID" SortExpression="EmployeID" />
            </Columns> 
        </asp:GridView>


we have called "SelectAll(this)" function on header check box click and "checkAllBox(this)" on row checkbox click.

<script type="text/javascript">
        function SelectAll(CheckBoxControl) {
            if (CheckBoxControl.checked == true) {
                var i;
                for (i = 0; i < document.forms[0].elements.length; i++) {
                    if ((document.forms[0].elements[i].type == 'checkbox') && (document.forms[0].elements[i].name.indexOf('gvEmployee') > -1)) {
                        if (document.forms[0].elements[i].disabled) {
                            document.forms[0].elements[i].checked = false;
                        }
                        else {
                            document.forms[0].elements[i].checked = true;
                        }
                    }
                }
            }
            else {
                var i;
                for (i = 0; i < document.forms[0].elements.length; i++) {
                    if ((document.forms[0].elements[i].type == 'checkbox') && (document.forms[0].elements[i].name.indexOf('gvEmployee') > -1)) {
                        document.forms[0].elements[i].checked = false;
                    }
                }
            }
        }
       
        function checkAllBox(CheckBoxControl) {
            var row = CheckBoxControl.parentNode.parentNode;
            var GridView = row.parentNode;
            var checkBoxList = GridView.getElementsByTagName("input");
            for (var i = 0; i < checkBoxList.length; i++) {
                var headerCheckBox = checkBoxList[0];
                var checked = true;
                if (checkBoxList[i].type == "checkbox" && checkBoxList[i] != headerCheckBox) {
                    if (!checkBoxList[i].checked) {
                        checked = false;
                        break;
                    }
                }
            }
            headerCheckBox.checked = checked;
        }
    </script>


Hope you enjoyed browsing this post and would chip in with your comments, expectation on the same.