Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
55
How do I bind ComboBox with MultipleSelection(OnWithCheckboxes) with another ComboBox with MultipleSelection(OnWithCheckboxes)?
posted

Hello All,

Please guide me which event should I fire to select another ComboBox with MultipleSelection(OnWithCheckboxes). Let me explain:

Lets say I have a combobox whose MultipleSelection(OnWithCheckboxes) and i select 3 items after I select 3 items I want another comboBox with MultipleSelection(OnWithCheckboxes) to bind on the basis of items selected on lets say onblur or lostfocus or when my first combobox closes down. SelectionEvent will not suffice my need.

Please help.Its very urgent,

Thanks in Advance

  • 10685
    Offline posted

    Hello Reena,

     

    There could be several different implementations of how to use an igCombo and its selection to populate a dataSource to be used in another igCombo. I have prepared a code sample implementing such scenatio. I have handled dropDownClosed event and based on the selection populate and bind a dataSource to be used for the second igCombo.

         

           var colors = [
                { Name: "Black" },
                { Name: "Blue" },
                { Name: "Brown" },
                { Name: "Green" },
                { Name: "Orange" },
                { Name: "Purple" },
                { Name: "Red" },
                { Name: "White" },
                { Name: "Yellow" },
            ];

    var dsFromComboBox = [];

    $(function() {

        $("#multiSelectCombo").igCombo({
            width: "270px",
            dataSource: colors,
            textKey: "Name",
            valueKey: "Name",
            multiSelection: "onWithCheckboxes",
            dropDownClosed: function(evt, ui) {

                //clear the last selection DataSource dsFromComboBox
                dsFromComboBox.length = 0;
                //clear the checkboxSelectCombo selection
                $("#checkboxSelectCombo").igCombo("selectedIndex", -1);
                var valuesToAdd = [];
                var valuesToAdd = ui.owner.values();
                var length = valuesToAdd.length;

                for (i = 0; i < length; i++) {
                    var tmp = "";
                    tmp = ui.owner.values()[i]
                        dsFromComboBox.push(tmp)
                        $("#checkboxSelectCombo").igCombo("dataBind");
                }
            }
        });

        $("#checkboxSelectCombo").igCombo({
            width: "270px",
            dataSource: dsFromComboBox,
            textKey: "Name",
            valueKey: "Name",
            multiSelection: "onWithCheckboxes"
        });
    });



     

    For more details please refer to the file attachment.

    igComboBoxSelectionAsDataSourceForAnother_igCombo.zip
  • 10685
    Offline posted

    Just for reference, here is an online sample illustrating the use of Cascading Combos.

    http://igniteui.com/combo/cascading-combos

    It covers a scenario when the values populated in the next lv Combo depend on the previous lv combo selection.