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
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:
Note that you could also use the combined scripts and there are more details in JavaScript Files in Ignite UI.
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
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.
@using Infragistics.Web.Mvc <script type="text/javascript"> var northwindProductsJSON = [ { "ID": 0, "Name": "Bread", "Description": "Whole grain bread", "Price": "2.5", "CategoryID": "Food" }, { "ID": 1, "Name": "Milk", "Description": "Low fat milk", "Price": "3.5", "CategoryID": "Beverages" }, { "ID": 2, "Name": "Vint Soda", "Description": "Americana Variety ", "Price": "20.9", "CategoryID": "Beverages" }, { "ID": 3, "Name": "Havina Cola", "Description": "The Original Key Lime Cola", "Price": "19.9", "CategoryID": "Beverages" }, { "ID": 4, "Name": "Fruit Punch", "Description": "Mango flavor, 8.3 Ounce Cans (Pack of 24)", "Price": "22.99", "CategoryID": "Beverages" }, { "ID": 5, "Name": "Cranberry Juice", "Description": "16-Ounce Plastic Bottles (Pack of 12)", "Price": "22.8", "CategoryID": "Beverages" }, { "ID": 6, "Name": "Pink Lemonade", "Description": "36 Ounce Cans (Pack of 3)", "Price": "18.8", "CategoryID": "Beverages" }, { "ID": 7, "Name": "DVD Player", "Description": "1080P Upconversion DVD Player", "Price": "35.88", "CategoryID": "Electronics" }, { "ID": 8, "Name": "LCD HDTV", "Description": "42 inch 1080p", "Price": "1088.8", "CategoryID": "Electronics" } ], northWindCategoriesJSON = [ { "ID": 0, "Name": "Food" }, { "ID": 1, "Name": "Beverages" }, { "ID": 2, "Name": "Electronics" } ]; $(function () { $("#grid").igGrid({ dataSource: northwindProductsJSON, autoGenerateColumns: true, primaryKey: "ID", autoCommit: true, features: [ { name: 'Updating', columnSettings: [{ //The combo is defined as a custom editor provider. Combo options are defined under 'editorOptions'. columnKey: "CategoryID", editorProvider: new $.ig.ComboEditorProviderCustom(), editorOptions: { mode: "dropdown", dataSource: northWindCategoriesJSON, textKey: "Name", valueKey: "Name", allowCustomValue: true, multiSelection: { enabled: true, showCheckboxes: true, itemSeparator: ', ' } } }] }] }); }); $(function () { $.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); } }); }); </script> <body> <table id="grid"></table> </body>
Am getting error in this line
editorProvider: new $.ig.ComboEditorProviderCustom(),Error is Object doesn't support this action
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.