Using a multiselect dropdown(combo) in iggrid

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

Attachments:

1. IGGridExample.zip

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.

Hi there… i am still using old version Infragistics ASP.Net 2015.1 via MVC on VS 2015…
sample:

settings.ColumnSetting().ColumnKey("CID").Required(false).ReadOnly(false)
                            .EditorType(ColumnEditorType.Combo)
                            .ComboEditorOptions(co => co.DataSource(companies).ID("CIDCombo").ValueKey("CO").TextKey("CO").Mode(ComboMode.DropDown).EnableClearButton(false)
                            .MultiSelectionSettings(ms => ms.Enabled(true).ShowCheckBoxes(true).ItemSeparator(","))
                            .DropDownOrientation(ComboDropDownOrientation.Bottom)
                        )

so, my db-table field CID (comma delimited string values) would require to bind to this combo editor with multi selection capability…  however, i cannot get the API required per your javascript sample…  please, advise if it's because either the version I have is too old or because I might be missing any references…  if you have a sample for my situation i will appreciate it…

Note: I want to stick to the MVC way if possible…

The solution provided requires using JavaScript as it is extending the jQuery object to add functionality that doesn't exist out of the box in the EditorProviderCombo.  If you wanted to have an MVC wrapper for this you would need to create the new EditorProvider as in the above example and then write your own MVC wrapper for it.

Hi,

Can you give us some code example for this in mvc?

Because whenever i tried to create a editor provider in mvc it is showing the error 'Unable to create editorprovider'  

George,

Please share a sample containing your attempt a creating the editor provider that reproduces the error 'Unable to create editorprovider' so that we can review what is happening.

@using Infragistics.Web.Mvc




    


    

    

Am getting error in this line 

editorProvider: new $.ig.ComboEditorProviderCustom(),

Error is Object doesn't support this action

George,

In the code provided there are two handlers for the jQuery .ready method and the are called in the order they are on the page so the one that is building the grid is being called before the one that is creating the $.ig.ComboEditorProviderCustom. 

I recommend moving the logic to define $.ig.ComboEditorProviderCustom out of the .ready handler like it is in the example that Vasya provided earlier in this thread as well as the example in the Working with igCombo editor provider.

Hi Alan ,

Hope you are good !

I need a clarification from your side (i.e)

 what resource file should be added in igloader for "Custom Editor Provider Combo " . I referred the following link to create the Custom Editor Provider Combo 

https://www.igniteui.com/help/working-with-combo-editor-provider#_ga=2.102499777.1541257041.1533129963-2137341010.1533129963

waiting for the reply . Mail Me @ VigneshCse05@gmail.com

Vignesh,

You can see the dependencies for any widget in the API documentation, the link that you are referencing will need both the igGrid and the igCombo:

• igCombo
• igGrid

Note that you could also use the combined scripts and there are more details in JavaScript Files in Ignite UI.