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

4 posts, 0 answers
  1. Glenn
    Glenn avatar
    47 posts
    Member since:
    Nov 2011

    Posted 20 Nov 2013 Link to this post

    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>


  2. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    1795 posts

    Posted 25 Nov 2013 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Glenn
    Glenn avatar
    47 posts
    Member since:
    Nov 2011

    Posted 25 Nov 2013 Link to this post

    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.









  5. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    1795 posts

    Posted 28 Nov 2013 Link to this post

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