Question

I would like to implement a jQuery client-side script to be able to check/un-check all checkboxes that are in the <ItemTemplate> column of a TreeList by clicking in a checkbox located in the <HeaderTemplate>. The javascript code that I have doesn’t work right now.

<telerik:TreeListTemplateColumn HeaderText="" SortExpression="IsSelected" UniqueName="IsSelected">
    <ItemTemplate>
        <telerik:RadButton ID="btnSelected" runat="server" AutoPostBack="false"  ButtonType="ToggleButton" 
            ToggleType="CheckBox" OnCheckedChanged="btnSelected_CheckedChanged" >
        </telerik:RadButton>
    </ItemTemplate>
    <HeaderTemplate>
        <asp:CheckBox ID="chkSelectAll" runat="server" Text="Select All" onclick="selectAll(this);" />
    </HeaderTemplate>
    <HeaderStyle HorizontalAlign="Center" Width="35px"/>
    <ItemStyle VerticalAlign="Middle" HorizontalAlign="Center" />
</telerik:TreeListTemplateColumn>

Javascript:

<telerik:RadCodeBlock>
    <script type="text/javascript">
    function SelectAll(CheckBox) {
        TotalChkBx = parseInt('<%= this.rtlRshItems.Items.Count %>');
        var TargetBaseControl = document.getElementById('<%= this.rtlRshItems.ClientID %>');
        var TargetChildControl = "btnSelected";
        var Inputs = TargetBaseControl.getElementsByTagName("input");
        for (var iCount = 0; iCount < Inputs.length; ++iCount) {
            if (Inputs[iCount].type == 'checkbox' && Inputs[iCount].id.indexOf(TargetChildControl, 0) >= 0)
                Inputs[iCount].checked = CheckBox.checked;
        }
    }
    </script>
</telerik:RadCodeBlock>

Answer 1

It looks like the problem is that RadButtons aren’t emitted as actual html inputs. According to this post on the Telerik site, if you require a client-side solution the easiest way to check/uncheck all the RadButtons is to handle the load (OnClientLoad property) client-side event of the button, and populate a global array of buttons. So in your case:

Add this bit of javascript:

<script type="text/javascript">
    var buttons = [];
    function ButtonLoad(sender, args)
    {
        Array.add(buttons, sender);
    }

    var checked = true;
    function SelectAll()
    {
        var length = buttons.length;
        for (var i = 0; i < length; i++)
        {
            buttons[i].set_checked(checked);
        }
        checked = !checked;
    }
</script>

And then add this to your btnSelected:

OnClientLoad="ButtonLoad"

So it would look like:

<ItemTemplate>
    <telerik:RadButton 
        ID="btnSelected" 
        runat="server" 
        AutoPostBack="false" 
        ButtonType="ToggleButton" 
        ToggleType="CheckBox" 
        OnClientLoad="ButtonLoad"
        OnCheckedChanged="btnSelected_CheckedChanged">
    </telerik:RadButton>
</ItemTemplate>

I am not sure what you are doing with OnCheckedChanged="btnSelected_CheckedChanged" but hopefully this still works.