How to edit the column in Grid using the Multiselect Dropdown control

3 mins read

The MultiSelectDropdown editor prefers the Grid edit form. Using the 'cell-template' feature, you can render the MultiSelectDropdown editor in the Grid edit form.

In the MultiSelect component, DataSource accepts the array values. But the EJ2 Grid column accepts only number, text, date, dateTime, and Boolean datatypes by default. It does not allow array type values directly. If you want to bind the array value for the Grid column, set the column type to string and convert the array values into string type.

You can use the cellEditTemplate feature of Grid to render the MultiSelect component in the Grid edit form.

The cell edit template is used to add a custom component for a particular column by invoking the create, write, read, and destroy functions.

create function is used to create the element at the time of initialization.
write function is used to create a custom component or assign a default value at the time of editing.
read function is used to read the value from the component at the time of save.
destroy function is used to destroy the component

By using this feature, you can render the EJ2 MultiSelect component to edit the Ship Country field. The create, write, read, and destroy functions will be triggered each time when you edit a column.

edit: {
      create: () => {
          elem = document.createElement('input');
          return elem;
       },
       read: () => {
          return multiSelectObj.value.join(',');
       },
       destroy: () => {
          multiSelectObj.destroy();
       },
       write: (args: { rowData: object; column: any }) => {
          let tempVal = args.rowData[args.column.field]
            ? args.rowData[args.column.field].split(',')
            : [];
          multiSelectObj = new MultiSelect({
            value: tempVal,
            dataSource: multiselectDatasource,
            fields: { value: 'Country', text: 'Country' },
            floatLabelType: 'Never',
            mode: 'Box',
          });
          multiSelectObj.appendTo(elem);
       },
      }