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; }
The reason why an exception is thrown is that the multiple selected values are combined to a string, where different values are separated with the character set to the itemSeparator option of the combo editor, which is ", " by default. This is required because by design igGrid does not support complex values in the underlying data source. To support such scenario a custom implementation is needed for the getValue/setValue methods of the igCombo provider to handle the complex data (in the form of array) passed from the combo multiple selection.
In your scenario if you select PC1 and PC2 they will be represented in the grid as "PC1,PC2" and this is going to be the val that you will be evaluating in the formatter function. My suggestion for applying formatting is separating values in an array, using split method and loop trough them. This will give you an array of substrings which you can itterate.
Please keep in mind that formatter function is going to be applied initially when the grid is loaded and this scenario should also be handled.
Please let me know if you need any further assistance with this matter,
Thanks for your reply.Everything is working fine except editing.when i edit the combo editor cell value am not able to see the existing selected values.But when i cancel the editing it is showing the existing selected values.
formatter function
function formatProduct(val) { var i, product,c; var n=[]; val=val.toString(); if(val.contains(',')) { val = val.replace(/,\s*$/, ""); c=val.toString().split(','); if(c[0].length>2) { for (i = 1; i < Products.length; i++) { for(var j=0;j<c.length;j++){ product = Products[i]; if (product.txtProductName == c[j]) { } } } n.push(val); } else{ for (i = 1; i < Products.length; i++) { for(var j=0;j<c.length;j++){ product = Products[i]; if (product.txtProductCode == c[j]) { val=Product.txtProductName n.push(val); } } } } return n; } else { for (i = 0; i < Products.length; i++) { product = Products[i]; if (product.txtProductCode == val) { val = product.txtProductName; } return val; } } }
I have primary key as txtProductCode
Thank you for providing me your code snippet.
What I noticed is that in the formatter function you are returning an array in case of multiple selected items. By design igGrid does not support arrays. That`s why I modified your function in order to return a string, which is concatenation of all selected values in the drop down editor separated with a space.
Here you will find a small working sample including my modifications for your reference. Please test it on your side and let me know whether it helps you achieve your requirement.
Do not hesitate to contact me if you need any further assistance with this matter.