This is a migrated thread and some comments may be shown as answers.

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

3 Answers 199 Views
ListView
This is a migrated thread and some comments may be shown as answers.
Glenn
Top achievements
Rank 1
Glenn asked on 21 Nov 2013, 04:28 AM

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>


3 Answers, 1 is accepted

Sort by
0
Konstantin Dikov
Telerik team
answered on 25 Nov 2013, 04:18 PM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
0
Glenn
Top achievements
Rank 1
answered on 26 Nov 2013, 04:45 AM

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.









0
Konstantin Dikov
Telerik team
answered on 28 Nov 2013, 02:39 PM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
Tags
ListView
Asked by
Glenn
Top achievements
Rank 1
Answers by
Konstantin Dikov
Telerik team
Glenn
Top achievements
Rank 1
Share this question
or