Multi select in grid column

[Niels Van Goethem]

Dear, I have a column, with multiple values in. I want it to be editable, and have the user be able to select mutliple values from a dropdown list. Is this possible in the current dropdown list in the grid component? I am working with remote data for populating the grid, and the dropdown items

  <ejs-grid

    #grid

    [dataSource]="dataManager"

    [loadingIndicator]="loadingIndicator"

    [pageSettings]="pageSettings"

    [allowPaging]="true"

    [editSettings]="editSettings"

    (recordDoubleClick)="recordDoubleClick($event)"

    (actionBegin)="actionBegin($event)"

  >

    <e-columns>

      <e-column

        field="id"

        [isPrimaryKey]="true"

        [visible]="false"

        [allowEditing]="false"

      ></e-column>

      <e-column

        [field]="nameField"

        [headerText]="'Processes.Headers.Name' | translate"

        [allowEditing]="false"

      ></e-column>

      <e-column

        field="code"

        [headerText]="'Processes.Headers.Code' | translate"

        width="120"

      ></e-column>

      <e-column

        [field]="descriptionField"

        [headerText]="'Processes.Headers.Description' | translate"

        [allowEditing]="false"

      ></e-column>

      <e-column

        field="wcmPillars"

        [headerText]="'Processes.Headers.WcmPillars' | translate"

        [edit]="wcmPillarParams"

      ></e-column>

      <e-column

        field="strategicalAxises"

        [headerText]="'Processes.Headers.StrategicalAxis' | translate"

      ></e-column>

      <e-column

        [headerText]="'Processes.Headers.IsActive' | translate"

        width="70"

        textAlign="Right"

        [allowEditing]="false"

      >

        <ng-template #template let-data>

          <mat-slide-toggle [checked]="data.isActive"></mat-slide-toggle>

        </ng-template>

      </e-column>

    </e-columns>

  </ejs-grid>

public ngOnInit(): void {

    this.currentLanguage = this.translationService.getCurrentLanguage().toUpperCase();

    this.loadingIndicator = { indicatorType: 'Shimmer' };

    this.dataManager = this.processesService.getGridDataManager();

    this.pageSettings = { pageSize: 20 };

    this.editSettings = {

      allowEditing: true,

      allowAdding: true,

      allowDeleting: true,

      mode: 'Normal',

    };

    this.wcmPillarParams = {

      params: {

        dataSource: this.oDataService.getWcmPillarDataManager(),

        query: new Query().from('WcmPillars').select(['Id', `Name${this.currentLanguage}`]),

        fields: { value: 'Id', text: `Name${this.currentLanguage}` },

        allowFiltering: true,

      },

    };

  }



[Aishwarya Rameshbabu]

Hi Niels Van Goethem,

Greetings from Syncfusion support.

After examining your inquiry, we observed that your grid contains a column with multiple values, and you require users to select multiple values from a dropdown list during the editing process. This can be accomplished by integrating the MultiSelect component into the edit form. Detailed instructions on how to achieve this are available in our documentation. Please refer to the link provided below for further information.

Documentation Link: Render-Multiselect-Component-in-Edit-form

If you need any other assistance or have additional questions, please feel free to contact us.

Regards

Aishwarya R