Option to display Select/Deselect All checkbox

3 posts, 0 answers
  1. miksh
    miksh avatar
    275 posts
    Member since:
    Nov 2006

    Posted 04 Dec 2012 Link to this post

    I wonder would it be possible when a listveiw is rendered as a list of checkboxes, add an option to display Select/Deselect All checkbox at the top of the list? It could separated by a horizontal line.
    E.g.

    Select/Deselect All
    ---------------------
    Checkbox 1
    Checkbox 2
    Checkbox 3
    Checkbox 4
    ...

  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 04 Dec 2012 Link to this post

    Hi miksh,

    Following is the sample code I tried to achieve your scenario.

    CSS:
    <style type="text/css">
        .categories
        {
            background-color: Gray;
        }
    </style>

    ASPX:
    <telerik:RadListBox ID="RadListBox1" runat="server" CheckBoxes="true" OnClientItemChecked="OnClientItemChecked">
        <Items>
            <telerik:RadListBoxItem Text="All" />
            <telerik:RadListBoxItem CssClass="categories" Checkable="false" />
            <telerik:RadListBoxItem Text="RadListBoxItem1" />
            <telerik:RadListBoxItem Text="RadListBoxItem2" />
            <telerik:RadListBoxItem Text="RadListBoxItem3" />
            <telerik:RadListBoxItem Text="RadListBoxItem4" />
            <telerik:RadListBoxItem Text="RadListBoxItem5" />
            <telerik:RadListBoxItem Text="RadListBoxItem6" />
            <telerik:RadListBoxItem Text="RadListBoxItem7" />
            <telerik:RadListBoxItem Text="RadListBoxItem8" />
            <telerik:RadListBoxItem Text="RadListBoxItem9" />
            <telerik:RadListBoxItem Text="RadListBoxItem10" />
            <telerik:RadListBoxItem Text="RadListBoxItem11" />
        </Items>
    </telerik:RadListBox>

    JS:
    <script type="text/javascript">
        function OnClientItemChecked(sender, e) {
            var item = e.get_item();
            var items = sender.get_items();
            var checked = item.get_checked();
            var firstItem = sender.getItem(0);
            if (item.get_text() == "All") {
                items.forEach(function (itm) { itm.set_checked(checked); });
            }
            else {
                if (sender.get_checkedItems().length == items.get_count() - 1) {
                    firstItem.set_checked(!firstItem.get_checked());
                }
            }
        }
    </script>

    Hope this helps.

    Regards,
    Princy.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. miksh
    miksh avatar
    275 posts
    Member since:
    Nov 2006

    Posted 05 Dec 2012 Link to this post

    Thanks Princy, certainlty it helps.
    But my point is to have this feature out-of-the-box as I've seen in this forum many people need it.
Back to Top