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
65
Using a multiselect dropdown(combo) in iggrid
posted

HI, 

I have an iggrid with a column that should have a dropdown to allow multiple selection. I tried using the 'combo' editor. It allows me to select multiple but when a go on to update another column it just displays the first of the selection and also the multiple selections are gone. I need the values to be displayed comma separated.

Could you please help me with this. I've attached a sample

IGGridExample.zip
Parents
No Data
Reply
  • 17590
    Verified Answer
    Offline posted

    Hello Shahrukh,

    Thank you for posting in our community.

    Using multiselect for igCombo editor is not supported out of the box since the grid does not allow saving complex values in the data source. To support such scenario a custom implementation will need to be applied for the getValue/setValue methods of the igCombo provider to handle the scenarios where complex data (in the form of an array) is passed from the combo`s multiple selection to the grid and vice versa. For example:


    $.ig.ComboEditorProviderCustom = $.ig.EditorProviderCombo.extend({
         getValue: function () {           
         var val = this.editor.value();
         var text= this.editor.text();
         if ($.type(val) === "array" && val.length) {       
             //When the passed value is of complex type return the text instead.
             //This will be the value saved in the grid data source after editing ends.
             return text;
         }               
         return val;
         },
         setValue: function (val, fire) {                   
             var array = [];
             this.editor.deselectAll();                   
             if (this.options.multiSelection.enabled && val.contains(this.options.multiSelection.itemSeparator)) {
                 //if multiSelection is enabled and the value passed from the grid cell to the edito contains the specified itemSeparator
                 //Then split the value by the separator and set a complex value back to the editor so that the matching items will get selected.
                 array = val.split(this.options.multiSelection.itemSeparator);
                 return this.editor.value(array, null, fire);
             }   
             this.editor.value(val, null, fire);
         }               
     });

    A step by step procedure how this can be achieved can be found online in our "Working with combo editor provider" topic under "Custom configuring for igCombo editor to support multiple selection" section.

    Please have a look at this topic and let me know if you need any further assistance with this matter.

Children