Javascript function to select/deselect check all check box in radgrid header template

Question

Please some one provide me the java script function to select/deselect check all check box which is in the header template, when i checked a check box in item template in template column of rad grid.

i am using the following code to select/deselect all check boxes in the grid rows when i click on check all check box, which is working fine.

protected void ToggleSelectedState(object sender, EventArgs e)
{
    CheckBox headerCheckBox = (sender as CheckBox);
    foreach (GridDataItem dataItem in RadWages.MasterTableView.Items)
    {
        (dataItem.FindControl("chkTax") as CheckBox).Checked = headerCheckBox.Checked;
        dataItem.Selected = headerCheckBox.Checked;
    }
}

Thanks in advance.

Answer 1

Finally i got the answer for my question and i think it may helpful for some one who is searching for answer.

<telerik:GridTemplateColumn UniqueName="CheckTemp" HeaderStyle-Width="40" 
 HeaderStyle-HorizontalAlign="Left" ItemStyle-Width="30" 
 ItemStyle-HorizontalAlign="Left" HeaderStyle-ForeColor="Black"
 AllowFiltering="false">
       <HeaderTemplate>
        <asp:CheckBox ID="chkall" runat="server" onclick="CheckAll(this);" AutoPostBack="false" />
       </HeaderTemplate>
       <ItemTemplate>
       <asp:CheckBox ID="chkTax" runat="server" onclick="Check(this);"AutoPostBack="false" />
       </ItemTemplate>
</telerik:GridTemplateColumn>

and place one hidden field like this

<asp:HiddenField ID="HiddenField1" runat="server" />

and the respected java scripts is

click of header row check box.

<script type="text/javascript">
        function CheckAll(id) {
            var masterTable = $find("<%= RadWages.ClientID %>").get_masterTableView();
            var row = masterTable.get_dataItems();
            if (id.checked == true) {
                for (var i = 0; i < row.length; i++) {
                    masterTable.get_dataItems()[i].findElement("chkTax").checked = true;
                }
            }
            else {
                for (var i = 0; i < row.length; i++) {
                    masterTable.get_dataItems()[i].findElement("chkTax").checked = false;
                }
            }
        }
    </script>

click of grid row check box.

 <script type="text/javascript">
        function Check(id) {

            var masterTable = $find("<%= RadWages.ClientID %>").get_masterTableView();
            var row = masterTable.get_dataItems();
            var hidden = document.getElementById("HiddenField1");
            if (id.checked == false) {

                var checkBox = document.getElementById(hidden.value);
                checkBox.checked = false;
            }
            else {
                var checkBox = document.getElementById(hidden.value);
                checkBox.checked = true;
                for (var i = 0; i < row.length; i++) {
                    if (masterTable.get_dataItems()[i].findElement("chkTax").checked == false) {
                        var checkBox = document.getElementById(hidden.value);
                        checkBox.checked = false;
                    }
                }
            }
        }
    </script>

and add the bellow code in item created event

 protected void RadWages_ItemCreated(object sender, GridItemEventArgs e)
{
    if (e.Item is GridHeaderItem)
    {
        GridHeaderItem hItem = (GridHeaderItem)e.Item;
        CheckBox chk1 = (CheckBox)hItem.FindControl("chkall");
        HiddenField1.Value = chk1.ClientID.ToString();
    }
}