Access checkbox in header from javascript

4 posts, 0 answers
  1. Shay
    Shay avatar
    4 posts
    Member since:
    Apr 2013

    Posted 06 Jun 2013 Link to this post

    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.
  2.
  3. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 06 Jun 2013 Link to this post

    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.
  5. Shay
    Shay avatar
    4 posts
    Member since:
    Apr 2013

    Posted 07 Jun 2013 Link to this post

    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.
  7. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 10 Jun 2013 Link to this post

    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.
  8.
Back to Top