Access checkbox in header from javascript

[Shay]

Hello,

I'm trying to access a checkbox within the header of my RadGrid via javascript.  Is there a way to do this?  Thank you.

[Shinu]

Hi,

Please take a look into the following code snippet to access header CheckBox in Javascript.

ASPX:

<telerik:GridTemplateColumn HeaderText="templ" AllowFiltering="true">
    <HeaderTemplate>
        <asp:CheckBox ID="chkSelectAll" runat="server" onclick="CheckAll(this)" />
    </HeaderTemplate>
</telerik:GridTemplateColumn>

Javascript:

<script type="text/javascript">
    function CheckAll(id)
    {
        if (id.checked == true)
        {
          alert("Checked");
        }
    }
</script>

Thanks,
Shinu.

[Shay]

I appreciate the response, but I think I should have been more clear.  I'm looking to access the check box within the header from another Javascript function.  Presently, I can access controls within the data items through the passed in control (chkBox is the control the function is being called from and which is passed into the function as a parameter):

var rowIndex = chkBox.parentNode.parentNode.sectionRowIndex;
var masterTable = $find("<%=RadGrid1.ClientID %>").get_masterTableView();
var row = masterTable.get_dataItems()[rowIndex];
var ctl = $telerik.findElement(chkBox.parentNode.parentNode, "TextBox1");

That's great for finding another control within the data row of the grid.  But I need to know how to access a checkbox within the header of the grid itself from a JavaScript function called from an event within a control in a data row.

Again, any help is appreciated.

[Shinu]

Hi,

One suggestion is to add a Hidden Field in the ASPX, so that you can get the ClientID of the Header CheckBox in the Javascipt. Please check the following code snippet.

ASPX:

<telerik:RadGrid ID="RadGrid1" runat="server" AutoGenerateColumns="false">
 <MasterTableView>
   <Columns>
      <telerik:GridTemplateColumn HeaderText="templ" AllowFiltering="true">
         <HeaderTemplate>
             <asp:CheckBox ID="chkSelectAll" runat="server" />
         </HeaderTemplate>
      </telerik:GridTemplateColumn>
   </Columns>
 </MasterTableView>
</telerik:RadGrid>
<asp:HiddenField ID="HiddenField1" runat="server" />

C#:

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

Javascript:

function Header()
{
    var masterTable = $find("<%= RadGrid1.ClientID %>").get_masterTableView();
    var hidden = document.getElementById("HiddenField1");
    var checkBox = document.getElementById(hidden.value); // accessing the header Checkbox
    checkBox.checked = false;
}

Thanks,
Shinu.