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

Option to display Select/Deselect All checkbox

2 Answers 100 Views
ListBox
This is a migrated thread and some comments may be shown as answers.
miksh
Top achievements
Rank 1
Iron
miksh asked on 04 Dec 2012, 07:08 PM

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 Answers, 1 is accepted

Sort by
0
Princy
Top achievements
Rank 2
answered on 05 Dec 2012, 04:48 AM
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.
0
miksh
Top achievements
Rank 1
Iron
answered on 05 Dec 2012, 01:10 PM
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.
Tags
ListBox
Asked by
miksh
Top achievements
Rank 1
Iron
Answers by
Princy
Top achievements
Rank 2
miksh
Top achievements
Rank 1
Iron
Share this question
or