Hi,
am using ig 17.1 version.
I have to create comboeditor with multiselect option in mvc.For that i need to create a custom editorprovider.
How to create new custom editorprovider in mvc. Can you please provide some sample code?
Hello George,
Setting custom editor provider in MVC scenario can be achieved as following:
1) Create custom editor provider that extends the default EditorProviderCombo. Some further reference about working with combo editor provider is available here.2) Set the editorProvider option in the MVC Wrapper along with its editorOptions.
For example:
<body> @{ @(Html.Infragistics().Grid(Model) .ID("grid") .Height("300px") .Width("100%") .PrimaryKey("Id") .AutoCommit(true) .Regional("bg") .Language("bg") .Columns(column => { column.For(x => x.Id).Width("60px"); column.For(x => x.StartTime).Width("100px"); column.For(x => x.Description); column.For(x => x.Percentage); column.For(x => x.Amount).DataType("number"); }) .Features(f => { f.Updating() .EnableAddRow(false) .EditMode(GridEditMode.Row) .ColumnSettings(cs => { cs.ColumnSetting().ColumnKey("Id").ReadOnly(true); cs.ColumnSetting().ColumnKey("StartTime").EditorType(ColumnEditorType.DatePicker); cs.ColumnSetting().ColumnKey("Description").EditorProvider("new $.ig.ComboEditorProviderCustom()").EditorOptions("mode: 'dropdown', dataSource: northWindCategoriesJSON, textKey: 'Name', valueKey: 'Name',allowCustomValue: true,multiSelection: {enabled: true,showCheckboxes: true,itemSeparator: ', '}"); }); .DataBind() .Render(); } <script> $(function () { northWindCategoriesJSON = [ { "ID": 0, "Name": "Food" }, { "ID": 1, "Name": "Beverages" }, { "ID": 2, "Name": "Electronics" } ]; $.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> </html>
Please test it on your side and let me know if you have any additional questions regarding this matter
Thank you for your reply.It is working fine.But am having formatter function.when i pass multiple values, while clicking done it is reuturning error.
ex
PC1,PC2=> it should return fridge,washingmachine.
But am getting error like could not find record for the val.
function formatProduct(val) { var i, product; for (i = 0; i < ProductANDJSON.length; i++) { product = ProductANDJSON[i]; if (product.txtProductCode == val) { val = product.txtProductName; } } return val; }
Hello Vasya,I'm using the Infragistics version 2019.1 I used the columnsetting
cs.ColumnSetting().ColumnKey("LocationName").EditorProvider("new $.ig.ComboEditorProviderCustom()").EditorOptions("mode:'dropdown',dataSource:dataSource, textKey: 'Name', valueKey: 'Name',allowCustomValue:true,multiSelection:{enabled:true,showCheckBoxes:true,itemSeparator:','}");
$.ig.ComboEditorProviderCustom = $.ig.EditorProviderCombo.extend({ setSize: function (width, height) { this.editor.element.css({ width: width, height: height }); }, getValue: function () { return this.editor.value(); }, destroy: function () { this.editor.element.remove(); } });