How to select/unselect all checkboxes in RadlistView Items - Client Side

[Glenn]

Referring to the following example, how can I get the CheckAll Checklist to check/uncheck all CheckBoxSelect checkboxes using javascript/jquery?

<telerik:RadListView ID="RadListView1" runat="server" ItemPlaceholderID="PlaceHolder1">

<ItemTemplate>

<div class="favOuter">

<asp:CheckBox ID="CheckBoxSelect" runat="server" CssClass="favCheck"  />

</div>

</ItemTemplate>

<LayoutTemplate>

<asp:PlaceHolder ID="PlaceHolder1" runat="server"></asp:PlaceHolder>

<div class="actionRow">

<asp:CheckBox ID="CheckAll" runat="server" ToolTip="SelectAll" />

</div>

</LayoutTemplate>

</telerik:RadListView>

[Konstantin Dikov]

Hello Glenn,

For achieving such functionality with RadListView you could add a wrapping div around the place holder control, handle the onclick event of the CheckAll checkbox, get reference to all generated check boxes and change their changed property.

Here is a code snippet with the above approach:

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
    <script type="text/javascript">
        function selectAll(sender) {
            var checked = sender.checked;
            var wrappingDiv = $telerik.findElement(document.body, "PlaceHolderWrapper");
            var inputs = wrappingDiv.getElementsByTagName('input');
            for (var i = 0; i < inputs.length; i++) {
                if (inputs[i].type == "checkbox") {
                    inputs[i].checked = checked;
                }
            }
        }
    </script>
</telerik:RadCodeBlock>

<telerik:RadListView ID="RadListView1" runat="server" ItemPlaceholderID="PlaceHolder1" OnNeedDataSource="RadListView1_NeedDataSource">
    <ItemTemplate>
        <div class="favOuter">
            <asp:CheckBox ID="CheckBoxSelect" runat="server" CssClass="favCheck" />
            <asp:Label ID="Label1" runat="server" Text='<%#Eval("FirstName") %>'></asp:Label>
        </div>
    </ItemTemplate>
    <LayoutTemplate>
        <div id="PlaceHolderWrapper">
            <asp:PlaceHolder ID="PlaceHolder1" runat="server"></asp:PlaceHolder>
        </div>
            <div class="actionRow">
                <asp:CheckBox ID="CheckAll" runat="server" ToolTip="SelectAll" onclick="selectAll(this);" />
            </div>
    </LayoutTemplate>
</telerik:RadListView>

Hope that helps.


Regards,
Konstantin Dikov
Telerik

[Glenn]

Thanks I got that to work but only after excluding checkboxes from a form decorator using a skin (same problem when testing with numerous skins).  With the skin applied debugging shows that the checkboxes in the radlistview are in fact showing a value of checked (after the click all event) but the checkbox images are just not showing as checked.  It would obviously be a preference to use the skin to match the rest of the application.  Note this problem is with IE11, but not an issue using Firefox.

[Konstantin Dikov]

Hello Glenn,

I have tested the code snippet from my previous post with a RadFormDecorator and different skins, but I was not able to replicate the described issue in IE11 on my end (or any other browser whatsoever ).

Could you please provide the markup of your page, so we could try to determine the reasons behind the issue you are facing.

Looking forward to your reply.


Regards,
Konstantin Dikov
Telerik