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
75
How to add custom editor provider in mvc for combo with multi checkbox
posted

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?

Parents
  • 17430
    Offline posted

    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

Reply Children
No Data