Multi Select Combo box

5 posts, 0 answers
  1. : Arumuga Vignesh
    : Arumuga Vignesh avatar
    21 posts
    Member since:
    Jul 2013

    Posted 18 Jul 2014 Link to this post

    Hi,

    I have requirement using multi select combo box. Please see the scenarios below.

    1. We have two combo box
        a. Combo box 1: Frequency(Values will be Monthly, Quarterly, Half-yearly, Annual)
        b. Combo box 2: Months(Jan, Feb... Dec)
     Scenario 1:
    When we select Monthly in Frequency Combo box , all the months should be selected in the Months combo box, user cannot change the Months Combo box

    Scenario 2:
    When we select Half-yearly in Frequency Combo box, Only 2 months has to be selected in a year, with interval of 6 months. For Eg( If user selects Jan automatically July should be selected and all the other values in the month combo box should disabled)

    Scenario 3:
    When we select Quarterly in Frequency Combo box, Only 4 months has to be selected in a year, with interval of 3 months. For Eg( If user selects Jan automatically Apr, Jul, Oct should be selected and all the other values in the month combo box should disabled)

    Scenario 4:
    When we select Annual in Frequency Combo box, Only 1 months has to be selected in a year. For Eg( If user selects Jan all the other values in the month combo box should disabled)

    Can we do this in telerik, if possible can you pls help to do it

    Thanks,
    Arumugam
       
  2.
  3. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 21 Jul 2014 in reply to : Arumuga Vignesh Link to this post

    Hi Arumuga Vignesh,

    Please try the below sample code snippet to achieve your scenario.

    ASPX:
    <telerik:RadComboBox ID="rcboFrequency" runat="server" EmptyMessage="select" CheckBoxes="true"
        OnClientItemChecking="selectMonth">
        <Items>
            <telerik:RadComboBoxItem Text="Monthly" />
            <telerik:RadComboBoxItem Text="Quarterly" />
            <telerik:RadComboBoxItem Text="Half-yearly" />
            <telerik:RadComboBoxItem Text="Annual" />
        </Items>
    </telerik:RadComboBox>
    <telerik:RadComboBox ID="rcboMonths" runat="server" EmptyMessage="Select" CheckBoxes="true"
        OnClientItemChecking="enableMonths">
        <Items>
            <telerik:RadComboBoxItem Text="Januvary" />
            <telerik:RadComboBoxItem Text="February" />
            <telerik:RadComboBoxItem Text="March" />
            <telerik:RadComboBoxItem Text="April" />
            <telerik:RadComboBoxItem Text="May" />
            <telerik:RadComboBoxItem Text="June" />
            <telerik:RadComboBoxItem Text="July" />
            <telerik:RadComboBoxItem Text="August" />
            <telerik:RadComboBoxItem Text="September" />
            <telerik:RadComboBoxItem Text="October" />
            <telerik:RadComboBoxItem Text="November" />
            <telerik:RadComboBoxItem Text="December" />
        </Items>
    </telerik:RadComboBox>

    JavaScript:
    function selectMonth(sender, args) {
        var monthCombo = $find("<%=rcboMonths.ClientID%>");
        var itemCount = monthCombo.get_items().get_count();
        var index, checkedItem = args.get_item().get_text();
        if (args.get_item().get_checked()) {
            //if the item is unchecking it will clear all the selection of the other combobox
            monthCombo.set_text("");
            for (index = 0; index < itemCount; index++) {
                monthCombo.get_items().getItem(index)._checkBoxElement.checked = false;
                monthCombo.get_items().getItem(index).enable();
            }
        }
        else {
            if (checkedItem == "Monthly") {
                for (index = 0; index < itemCount; index++) {
                    monthCombo.get_items().getItem(index).check();
                    monthCombo.get_items().getItem(index).disable();
                }
            }
        }
    }
    function enableMonths(sender, args) {
        var frequencyCombo = $find("<%=rcboFrequency.ClientID%>");
        var itemCount = sender.get_items().get_count();
        var checkedItem = frequencyCombo.get_checkedItems()[0]._text;
        var firstIndex, secondIndex, thirdIndex, forthIndex, count;
        if (checkedItem == "Half-yearly") {
            firstIndex = args.get_item().get_index();
            secondIndex = parseInt(firstIndex) + 6;
            sender.get_items().getItem(secondIndex).check();
            for (count = 0; count < itemCount; count++) {
                if (count != firstIndex && count != secondIndex) {
                    sender.get_items().getItem(count).disable();
                }
            }
        }
        else if (checkedItem == "Quarterly") {
            firstIndex = args.get_item().get_index();
            secondIndex = parseInt(firstIndex) + 3;
            thirdIndex = parseInt(secondIndex) + 3;
            forthIndex = parseInt(thirdIndex) + 3;
            sender.get_items().getItem(secondIndex).check();
            sender.get_items().getItem(thirdIndex).check();
            sender.get_items().getItem(forthIndex).check();
            for (count = 0; count < itemCount; count++) {
                if (count != firstIndex && count != secondIndex && count != thirdIndex && count != forthIndex) {
                    sender.get_items().getItem(count).disable();
                }
            }
        }
        else if (checkedItem == "Annual") {
            firstIndex = args.get_item().get_index();
            for (count = 0; count < itemCount; count++) {
                if (count != firstIndex) {
                    sender.get_items().getItem(count).disable();
                }
            }
        }
    }

    Let me know if you have any concern.
    Thanks,
    Princy.
  5. : Arumuga Vignesh
    : Arumuga Vignesh avatar
    21 posts
    Member since:
    Jul 2013

    Posted 24 Jul 2014 in reply to Princy Link to this post

    Hi Princy,

    The code snippet is working fine but when I uncheck a radCombox it is not reverting back. Let me Explain with a scenario.

    1. We have two combo box
        a. Combo box 1: Frequency(Values will be Monthly, Quarterly, Half-yearly, Annual)
        b. Combo box 2: Months(Jan, Feb... Dec)

    Scenario 1)

    I am selecting Quarterly in Frequency Combobox.Now when I select or check "Jan" in Months Combobox, "Apr","July","Oct" automatically checked & rest ll is disabled...It is absolutely fine but my requirement is when I uncheck "Jan",("Apr","July","Oct") (i.e) checked items should be unchecked and all the items should be enabled.

    Scenario 2)

    Similarly  I am selecting HalfYearly in Frequency Combobox.Now when I select or check "Jan" in Months Combobox,"July" is automatically checked & rest all items are disabled...It is absolutely fine but my requirement is when I uncheck "Jan",("July") (i.e) checked items should be unchecked and all the items should be enabled.

    Please let me kow whether we can do it.





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

    Posted 24 Jul 2014 in reply to : Arumuga Vignesh Link to this post

    Hi Arumuga Vignesh,

    Please do the following modification in the 'enableMonths' JavaScript which works fine at my end.

    JavaScript:
    function enableMonths(sender, args) {
        var frequencyCombo = $find("<%=rcboFrequency.ClientID%>");
        var itemCount = sender.get_items().get_count();
        var checkedItem = frequencyCombo.get_checkedItems()[0]._text;
        var firstIndex, secondIndex, thirdIndex, forthIndex, count;
        if (checkedItem == "Half-yearly") {
            firstIndex = args.get_item().get_index();
            secondIndex = parseInt(firstIndex) + 6;
            if (args.get_item().get_checked() == false) {
                sender.get_items().getItem(secondIndex).check();
                for (count = 0; count < itemCount; count++) {
                    if (count != firstIndex && count != secondIndex) {
                        sender.get_items().getItem(count).disable();
                    }
                }
            }
            else {
                //if the 1st item is unchecked, uncheck the other item and will also enable
                sender.get_items().getItem(secondIndex).set_checked(false);
                for (count = 0; count < itemCount; count++) {
                    if (count != firstIndex && count != secondIndex) {
                        sender.get_items().getItem(count).enable();
                    }
                }
            }
        }
     
        else if (checkedItem == "Quarterly") {
            firstIndex = args.get_item().get_index();
            secondIndex = parseInt(firstIndex) + 3;
            thirdIndex = parseInt(secondIndex) + 3;
            forthIndex = parseInt(thirdIndex) + 3;
            if (args.get_item().get_checked() == false) {
                sender.get_items().getItem(secondIndex).check();
                sender.get_items().getItem(thirdIndex).check();
                sender.get_items().getItem(forthIndex).check();
                for (count = 0; count < itemCount; count++) {
                    if (count != firstIndex && count != secondIndex && count != thirdIndex && count != forthIndex) {
                        sender.get_items().getItem(count).disable();
                    }
                }
            }
            else {
                //if the 1st item is unchecked, uncheck the other item and will also enable
                sender.get_items().getItem(secondIndex).set_checked(false);
                sender.get_items().getItem(thirdIndex).set_checked(false);
                sender.get_items().getItem(forthIndex).set_checked(false);
                for (count = 0; count < itemCount; count++) {
                    if (count != firstIndex && count != secondIndex && count != thirdIndex && count != forthIndex) {
                        sender.get_items().getItem(count).enable();
                    }
                }
            }
        }
        else if (checkedItem == "Annual") {
            firstIndex = args.get_item().get_index();
            for (count = 0; count < itemCount; count++) {
                if (count != firstIndex) {
                    sender.get_items().getItem(count).disable();
                }
            }
        }
    }

    Thanks,
    Princy.
  8.
  9. Nencho
    Admin
    Nencho avatar
    1888 posts

    Posted 29 Jul 2014 Link to this post

    Hello Arumuga Vignesh,

    It seems that at my end, the code that Princy supplied is working properly in both directions - checking and unchecking, like demonstrated in this video:

    http://screencast.com/t/0vdCFLkCz

    Regards,
    Nencho
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top