Data grid dialiog edit, multiselect column external data source.

[Frank Alberts]

Hello, I am trying to get dynamic data into a dropdown for a grid column that is multiselect. 

I borrowed the implementation of a multi select dropwdown from here:

https://www.syncfusion.com/kb/12916/how-to-edit-the-column-in-grid-using-the-multiselect-dropdown-control

https://stackblitz.com/edit/angular-bda4p5-5wesng?file=app.component.ts

And I had help before with a normal dropdown in a grid when setting an external dynamic data source:
https://www.syncfusion.com/forums/178743/dropdown-edit-observable-list

But I am unable to combine the two ideas together:

<ejs-grid

  color="primary"

  height="270"

  #supplierGrid

  (actionComplete)="actionComplete($event)"

  enableInfiniteScrolling="true"

  [pageSettings]="options"

  allowResizing="true"

  [allowSorting]="true"

  [editSettings]="editSettings"

  [toolbar]="toolbar"

  [allowFiltering]="true"

  [filterSettings]="filterOption"

>

  <e-columns>

    <e-column field="name" headerText="Name" width="120"></e-column>

    <e-column field="address" headerText="Address" width="120"></e-column>

    <e-column field="postcode" headerText="Postcode" width="120"></e-column>

    <e-column

      field="docprovided"

      headerText="ID Provided"

      width="150"

      editType="dropdownedit"

      [edit]="userParams"

    ></e-column>

    <e-column field="idnumber" headerText="ID no." width="150"></e-column>

    <e-column field="phone" headerText="Tel No." width="150"></e-column>

    <e-column field="info" headerText="Additional Info" width="150"></e-column>

    <e-column

    field="user"

    [validationRules]="customeridrules"

    headerText="Ship Country"

    width="150"

    [edit]="dpParams"

  ></e-column>

  </e-columns>

</ejs-grid>

  public dropDown: DropDownListComponent;

  public data: Object[];

  public orderidrules: Object;

  public customeridrules: Object;

  public freightrules: Object;

  public editparams: Object;

  public pageSettings: Object;

  public formatoptions: Object;

  public dpParams;

  public elem: HTMLElement;

  public multiSelectObj: MultiSelect;

  // public multiselectDatasource = [

  //   { email: 'France', Id: '1' },

  //   { email: 'Germany', Id: '2' },

  //   { email:'Brazil', Id: '3' },

  //   { email: 'Switzerland', Id: '4' },

  //   { email:'Venezuela', Id: '5' },

  // ];

  public users: object[];

  public multiselectDatasource: object[];

  changevalue(e) {}

  ngOnInit(): void {

    this.options = { pageSize: 50 };

    // this.infiniteOptions = { enableScroll: true };

    this.editSettings = {

      allowEditing: true,

      allowAdding: true,

      allowDeleting: true,

      mode: 'Dialog',

    };

    this.toolbar = ['Add', 'Edit', 'Delete', 'Search'];

    this.userParams = {

      params: {

        allowFiltering: true,

        dataSource: new DataManager(this.user),

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

        query: new Query(),

        actionComplete: () => false,

      },

    };

    this.customeridrules = { required: true };

    this.dpParams = {

      create: () => {

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

        return this.elem;

      },

      read: () => {

        return this.multiSelectObj.value.join(',');

      },

      destroy: () => {

        this.multiSelectObj.destroy();

      },

      write: (args: { rowData: object; column: any }) => {

        let tempVal = args.rowData[args.column.field]

          ? args.rowData[args.column.field].split(',')

          : [];

        this.multiSelectObj = new MultiSelect({

          value: tempVal,

          // dataSource: this.multiselectDatasource,

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

          floatLabelType: 'Never',

          mode: 'Box',

         

        });

        this.multiSelectObj.appendTo(this.elem);

      },

    };

    this.firebasedb.getUsers().subscribe((value) => {

      this.multiselectDatasource = value;

      (

        (this.supplierGrid.columns[7] as Column).edit.params as DropDownListModel

      ).dataSource = new DataManager(this.multiselectDatasource);

    });

  }

My code might be a mess, but maybe you could demonstrate the right approach to having dynamic data in a multi-select dropdown.

 Thank you for your help in advance!

[Rajapandiyan Settu]

Hi Frank,

Thanks for contacting Syncfusion support.

When using cellEditTemplate feature, we can’t use the column.edit.params to customize the properties of edit component. We suggest you to bind the dynamic data directly to the variable and access it inside the write method.

  public ngOnInit(): void {

    this.editparams = {

      create: () => {

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

        return this.elem;

      },

      read: () => {

        return this.multiSelectObj.value.join(',');

      },

      destroy: () => {

        this.multiSelectObj.destroy();

      },

      write: (args) => {

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

        this.multiSelectObj = new MultiSelect({

          //set the data to dataSource property

          dataSource: this.multiselectDatasource,

          value: cellvalue,

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

          floatLabelType: 'Never',

          mode: 'Box',

        });

        this.multiSelectObj.appendTo(this.elem);

      },

    };

    const ajax = new Ajax(

      'https://ej2services.syncfusion.com/production/web-services/api/Orders',

      'GET'

    );

    ajax.send();

    ajax.onSuccess = (data) => {

      var result = JSON.parse(data);

      this.multiselectDatasource = new DataManager(result);

    };

  }

 

Sample: https://stackblitz.com/edit/angular-jgtwac-frnf3a?file=app.component.html,app.component.ts

Regards,
Rajapandiyan S

[Frank Alberts]

Thank you so much Rajapandiyan, maybe as a side note you could assist me in making the search in this dropdown do "contains instead of begins with?

[Rajapandiyan Settu]

Hi Frank,

Based on your requirement you want to search the value with contains operator in the MultiSelect component. You can achieve this by using the filtering event of MultiSelect.

Filtering: https://ej2.syncfusion.com/documentation/multi-select/filtering/#change-the-filter-type

        this.multiSelectObj = new MultiSelect({

          //set the data to dataSource property

          dataSource: this.multiselectDatasource,

          value: cellvalue,

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

          floatLabelType: 'Never',

          allowFiltering: true,

          //Bind the filter event

          filtering: (e) => {

            let query = new Query();

            //frame the query based on search string with filter type.

            query =  e.text != '' ? query.where('ShipCountry', 'contains', e.text, true) : query;

            var filteredData = new DataManager(this.multiSelectObj.dataSource).executeLocal(query);

            //pass the filtered data source.

            e.updateData(filteredData);

          },

          mode: 'Box',

        });

 

Sample: https://stackblitz.com/edit/angular-jgtwac-3r112y?file=app.component.ts

Regards,
Rajapandiyan S