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();
    }
}

Answer 2

Please try: HTML

<asp:TemplateField>
    <HeaderTemplate>
      <asp:CheckBox ID="checkAll" runat="server" onclick = "checkAll(this);" />
    </HeaderTemplate>
   <ItemTemplate>
     <asp:CheckBox ID="CheckBox1" runat="server" onclick = "Check_Click(this)" />
   </ItemTemplate>
</asp:TemplateField>

Highlight Row when checkbox is checked

<script type = "text/javascript">
function Check_Click(objRef)
{
    //Get the Row based on checkbox
    var row = objRef.parentNode.parentNode;
    if(objRef.checked)
    {
        //If checked change color to Aqua
        row.style.backgroundColor = "aqua";
    }
    else
    {   
        //If not checked change back to original color
        if(row.rowIndex % 2 == 0)
        {
           //Alternating Row Color
           row.style.backgroundColor = "#C2D69B";
        }
        else
        {
           row.style.backgroundColor = "white";
        }
    }

    //Get the reference of GridView
    var GridView = row.parentNode;

    //Get all input elements in Gridview
    var inputList = GridView.getElementsByTagName("input");

    for (var i=0;i<inputList.length;i++)
    {
        //The First element is the Header Checkbox
        var headerCheckBox = inputList[0];

        //Based on all or none checkboxes
        //are checked check/uncheck Header Checkbox
        var checked = true;
        if(inputList[i].type == "checkbox" && inputList[i] != headerCheckBox)
        {
            if(!inputList[i].checked)
            {
                checked = false;
                break;
            }
        }
    }
    headerCheckBox.checked = checked;

}
</script>

Check all checkboxes functionality

<script type = "text/javascript">
function checkAll(objRef)
{
    var GridView = objRef.parentNode.parentNode.parentNode;
    var inputList = GridView.getElementsByTagName("input");
    for (var i=0;i<inputList.length;i++)
    {
        //Get the Cell To find out ColumnIndex
        var row = inputList[i].parentNode.parentNode;
        if(inputList[i].type == "checkbox"  && objRef != inputList[i])
        {
            if (objRef.checked)
            {
                //If the header checkbox is checked
                //check all checkboxes
                //and highlight all rows
                row.style.backgroundColor = "aqua";
                inputList[i].checked=true;
            }
            else
            {
                //If the header checkbox is checked
                //uncheck all checkboxes
                //and change rowcolor back to original
                if(row.rowIndex % 2 == 0)
                {
                   //Alternating Row Color
                   row.style.backgroundColor = "#C2D69B";
                }
                else
                {
                   row.style.backgroundColor = "white";
                }
                inputList[i].checked=false;
            }
        }
    }
}
</script> 

For more details, please check IMPLEMENT CHECK ALL CHECKBOX FUNCTIONALITY IN ASP.NET GRIDVIEW CONTROL USING JAVASCRIPT

Answer 3

jQuery:

function selectAll()
{
    if($("#ck_All")[0].checked)
    {
        $(":checkbox").attr("checked",true);
    }
    else
    {
        $(":checkbox").attr("checked",false);
    }
}

Answer 4

the above code what he mentioned is perfect

But if you are having master page , then change this line of code like below inside function Check(id)

var hidden = document.getElementById("<%= HiddenField2.ClientID%>");