Change count of selected items

2 posts, 0 answers
  1. Sebastian
    Sebastian avatar
    1 posts
    Member since:
    Oct 2017

    Posted 06 Apr 2018 Link to this post

    Hi,

    I have a RadComboBox which has an extra "Select All"-type item to select a sub set of all items. When this item is checked and the combobox is closed, I would like for the counter to ignore it when displaying how many items are checked.

    e.g. The combobox contains "Select all", "Select all fruits", "apple", "banana", "monkey"

    If I check "banana" and "monkey", it displays "2 items checked".

    If I check "select all fruits", "apple" and "banana" will be checked but since "select all fruits" is also an item, it will display "3 items checked"

     

    I haven't been able to find a way to have the combobox ignore one of the listitems or to change the count of selected items. Is this possible?

  2.
  3. Eyup
    Admin
    Eyup avatar
    4046 posts

    Posted 10 Apr 2018 Link to this post

    Hello Sebastian,

    You can achieve this requirement using the following approach:
    <telerik:RadComboBox ID="RadComboBox1" runat="server" EmptyMessage="Select options"
        CheckBoxes="true" EnableCheckAllItemsCheckBox="true" Width="200px"
        OnClientItemChecked="itemChecked">
        <Items>
            <telerik:RadComboBoxItem Text="Select all fruits" Value="Fruits" BackColor="SkyBlue" />
            <telerik:RadComboBoxItem Text="Apple" Value="Apple" />
            <telerik:RadComboBoxItem Text="Banana" Value="Banana" />
            <telerik:RadComboBoxItem Text="Lemon" Value="Peach" />
            <telerik:RadComboBoxItem Text="Select all vegetables" Value="Vegetables" BackColor="SkyBlue" />
            <telerik:RadComboBoxItem Text="Onion" Value="Onion" />
            <telerik:RadComboBoxItem Text="Potato" Value="Potato" />
            <telerik:RadComboBoxItem Text="Select all animals" Value="Animals" BackColor="SkyBlue" />
            <telerik:RadComboBoxItem Text="Monkey" Value="Monkey" />
            <telerik:RadComboBoxItem Text="Cat" Value="Cat" />
            <telerik:RadComboBoxItem Text="Dog" Value="Dog" />
            <telerik:RadComboBoxItem Text="Bird" Value="Bird" />
        </Items>
    </telerik:RadComboBox>
    JavaScript:
    function itemChecked(sender, args) {
        if (sender.get_text().indexOf("items checked") > 0) {
            sender.set_text("Multiple items checked");
        }
    }

    I hope this will prove helpful.

    Regards,
    Eyup
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top