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

Multi Select Combo box

3 Answers 23 Views
ComboBox
This is a migrated thread and some comments may be shown as answers.
: Arumuga Vignesh
Top achievements
Rank 1
: Arumuga Vignesh asked on 18 Jul 2014, 12:42 PM
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
   

3 Answers, 1 is accepted

Sort by
0
Princy
Top achievements
Rank 1
answered on 21 Jul 2014, 05:32 AM
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.
0
: Arumuga Vignesh
Top achievements
Rank 1
answered on 24 Jul 2014, 10:30 AM
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.





0
Nencho
Telerik team
answered on 29 Jul 2014, 07:22 AM
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.

 
Tags
ComboBox
Asked by
: Arumuga Vignesh
Top achievements
Rank 1
Answers by
Princy
Top achievements
Rank 1
: Arumuga Vignesh
Top achievements
Rank 1
Nencho
Telerik team
Share this question
or