using MultiSelect Dropdown Control in grid inline edit mode

[Ahmed]

Hello,

I have a grid with inline edit mode.

One of my columns should be multiSelect dropdown control.

But this is not native in a inline edit mode.

What is the workaround in this case?

[Pavithra Subramaniyam]

Hi Ahmed,

Thanks for contacting Syncfusion support.

You can render the MultiSelect component while inline editing by using the “CellEditTemplate” feature which is used for adding a custom editor component for a cell.

We have prepared a sample based on your requirement. In which we have rendered the MultiSelect component using cellEditTemplate feature of Grid. Find the below documentation for more information.

cellEditTemplate: https://ej2.syncfusion.com/aspnetmvc/documentation/grid/editing/edit-types#custom-editors-using-template

MultiSelect        : https://ej2.syncfusion.com/javascript/documentation/multi-select/es5-getting-started/

The EJ2 Grid column does not support the array type of value. So, we have maintained the multi select values in string format and separated them by a comma.

 

[index.cshtml]

 

<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" toolbar="@(new List<string>() { "Add", "Edit", "Delete","Update","Cancel" })">

    <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" mode="Normal"></e-grid-editSettings>

        <e-grid-columns>

            <e-grid-column headerText="Order Details" columns="@( new List<Syncfusion.EJ2.Grids.GridColumn>() { new Syncfusion.EJ2.Grids.GridColumn{

                            Field="ShipCountry",

                            HeaderText="ShipCountry",

                            TextAlign=Syncfusion.EJ2.Grids.TextAlign.Center,

                            Edit=new {create = "tradeCreate", read = "tradeRead", destroy = "tradeDestroy", write = "tradeWrite"},

                            Width="220",

                        }})">

            </e-grid-column>

 

        </e-grid-columns>

</ejs-grid>

 

<script>

    var multiSelectObj;

    function tradeCreate(args) {

        var elem = document.createElement('input');

        return elem;

    }

    function tradeWrite(args) {

        // split the cell value by comma

      var cellvalue = args.rowData[args.column.field] ? args.rowData[args.column.field].split(',') : [];

      multiSelectObj = new ej.dropdowns.MultiSelect({

        //set the data to dataSource property

        dataSource: @Html.Raw(Json.Serialize(ViewBag.DataSource)),

        fields: { text: 'ShipCountry', value: 'ShipCountry' },

        value: cellvalue, // bind the value in array format

        mode: 'CheckBox',

        popupWidth: 300,

        hideSelectedItem: false,

        enableSelectionOrder: false,

      });

      multiSelectObj.appendTo(args.element);

    }

 

    function tradeDestroy() {

        multiSelectObj.destroy();

    }

    function tradeRead(args) {

        // join the value by comma

        return multiSelectObj.value.join(','); // store the string value in the Grid dataSource

    }

</script>

 

Please get back to us if you need further assistance on this.

Regards,

Pavithra S

Attachment: core_3_grid_multiselect_edit1341039769_2a7feb9a.zip

[Ahmed]

Thank you very much!

[Swetha Srikumar]

Most welcome.