Multi Select Combo box

[: Arumuga Vignesh]

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
   

[Princy]

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.

[: Arumuga Vignesh]

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.

[Nencho]

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