Find Header Checkbox

[Rawl]

Hi all!

In my Radgrid I inserted a <HeaderTemplate> with a checkbox where it checks/unchecks all the checkbox items. Now if I check/uncheck on of these checkbox items, I want to check/uncheck the header checkbox, but I can't find how.

I'm doing this client side via javascript. Can't do it server side.

function CheckReview(chk) {
   var grid = $find("<%=RadGrid.ClientID %>");
   var masterTable = grid.get_masterTableView();

   var flag = true;

   //this line doesn't find the header control
   var gridHeaderElement = masterTable.get_dataItems()[0].findElement("chkH");

   for (var i = 0; i < masterTable.get_dataItems().length; i++) {
      if (!chk.checked) {
         flag = false;
      }
   }

   if (flag) {
      gridHeaderElement.checked = true;
   }
   else {
      gridHeaderElement.checked = false;
   }
}

[Princy]

Hi,

Please take a look into the sample code snippet I tried with the same requirement.

ASPX:

<telerik:RadGrid ID="myRadGrid" runat="server" DataSourceID="SqlDataSource1" AutoGenerateColumns="false" >
    <MasterTableView>
        <Columns>
            .  .  .

            .  .  .

            <telerik:GridTemplateColumn HeaderText="templatecolumn">
                <HeaderTemplate>
                    <asp:CheckBox ID="chkSelectAll" runat="server" onclick="CheckAll(this)" />
                </HeaderTemplate>
                <ItemTemplate>
                    <asp:CheckBox ID="chkStatus" runat="server" onclick="unCheckHeader(this)" />
                </ItemTemplate>
            </telerik:GridTemplateColumn>
        </Columns>
    </MasterTableView>
</telerik:RadGrid>
<asp:HiddenField ID="HiddenField1" runat="server" />

C#:

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

Javascript:

<script type="text/javascript">
    function CheckAll(id) {
        var masterTable = $find("<%= myRadGrid.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("chkStatus").checked = true; // for checking the checkboxes

            }
        }
        else {
            for (var i = 0; i < row.length; i++) {
                masterTable.get_dataItems()[i].findElement("chkStatus").checked = false; // for checking the checkboxes
            }
        }
    }
    function unCheckHeader(id) {

        var masterTable = $find("<%= myRadGrid.ClientID %>").get_masterTableView();
        var row = masterTable.get_dataItems();
        if (id.checked == false) {
            var hidden = document.getElementById("HiddenField1");
            var checkBox = document.getElementById(hidden.value);
            checkBox.checked = false;
        }
    }
</script>

Thanks,
Princy.

[Rawl]

Hey thanks!

I only had to change this line 

//var hidden = document.getElementById("HiddenField1");

var hidden = document.getElementById("ctl00_ContentPlaceHolder1_HiddenField1");

[yuvaraj]

Hi

 

masterTable.get_dataItems()[i].findElement("chkStatus").checked = true;

 

This line the following error comes

0x800a138f - JavaScript runtime error: Unable to set property 'checked' of undefined or null reference

 

Please check

 

Thanks

V.Yuvaraj