Dropdown edit observable list

[Jonas Blazinskas]

Hi Guys, 

Once again this just might be me not understanding some basics. But I am trying to figure out how to take an observable value and use it as a datasource in dropdown column edit.

I started off with this example and it works fine with static data: 
https://ej2.syncfusion.com/angular/documentation/grid/editing/edit-types/#provide-custom-data-source-and-enabling-filtering-to-dropdownlist

But I would like to call getUsers() observable result instead of static data and of course because they are both on the ngOnInit means that my    this.users = value;     gets resolved last after     this.userParams  has already been set with the static data. Now if I put the whole  this.userParams     inside subscribe well then it wont be defined as well when the component initializes. Could you potentially point me in the right direction? I am highly confused about this one.

    <ejs-grid

      class="route-grid"

      #routeGrid

      (actionComplete)="actionCompleteRoute($event)"

      (rowSelected)="onRowSelected($event)"

      [editSettings]="editSettings"

      [toolbar]="routeToolbar"

      allowFiltering="true"

      [filterSettings]="filterSettings"

      allowResizing="true"

      height="100%"

      [allowSorting]="true"

    >

      <e-columns>

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

        <e-column

          field="user"

          headerText="User"

          editType="dropdownedit"

          [edit]="userParams"

        ></e-column>

        <e-column

          field="date"

          headerText="Date"

          type="date"

          format="dd/MM/yyyy"

          editType="datepickeredit"

        >

        </e-column>

      </e-columns>

    </ejs-grid>

----

  // user dropdown

  public userParams: IEditCell;

  public users: object[];

  ngOnInit(): void {

this.users = [

      { uid: 'United States' },

      { uid: 'Australia' },

      { uid: 'India' },

    ];

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

      this.users = value;

    });

 

 

    this.userParams = {

      params: {

        allowFiltering: true,

        dataSource: new DataManager(this.users),

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

        query: new Query(),

        actionComplete: () => false,

      },

    };

[Pavithra Subramaniyam]

Hi Frank Alberts,

Thanks for contacting Syncfusion support.

You can set the DropDownList dataSource inside the service by accessing the grid column directly. Please refer to the below code example and the sample link for more information.

this.service.getData({}).subscribe((value: any) => {

  this.grid.columns[2].edit.params.dataSource = value.result;

});

 

Sample: https://stackblitz.com/edit/angular-7c8www?file=app%2Fapp.module.ts,app.component.ts

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

Regards,

Pavithra S

[Jonas Blazinskas]

Hi Pavithra,

I am getting this error on .edit  and I am unsure what is causing it. Located on this line        this.routeGrid.columns[1].edit.params.dataSource = value.result;
Property 'edit' does not exist on type 'string | Column | ColumnModel'.
Property 'edit' does not exist on type 'string'.

    <ejs-grid

      class="route-grid"

      #routeGrid

      (actionComplete)="actionCompleteRoute($event)"

      (rowSelected)="onRowSelected($event)"

      [editSettings]="editSettings"

      [toolbar]="routeToolbar"

      allowFiltering="true"

      [filterSettings]="filterSettings"

      allowResizing="true"

      height="100%"

      [allowSorting]="true"

    >

      <e-columns>

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

        <e-column

          field="user"

          headerText="User"

          editType="dropdownedit"

          [edit]="editparams"

        ></e-column>

        <e-column

          field="date"

          headerText="Date"

          type="date"

          format="dd/MM/yyyy"

          editType="datepickeredit"

        >

        </e-column>

      </e-columns>

    </ejs-grid>

 @ViewChild('routeGrid') public routeGrid: GridComponent;

  public users: object[];

  public editparams: Object;

  ngOnInit(): void {

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

      this.users = value;

      this.routeGrid.columns[1].edit.params.dataSource = value.result;

    });

    this.users = [

      { uid: 'United States' },

      { uid: 'Australia' },

      { uid: 'India' },

    ];

    this.editparams = {

      params: {

        allowFiltering: true,

        dataSource: new DataManager(this.users),

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

        query: new Query(),

        actionComplete: () => false,

      },

    };

[Pavithra Subramaniyam]

You can overcome the Type error by setting the type for the grid column as in the below code example.

import { DropDownListModel } from '@syncfusion/ej2-dropdowns';

import { Column } from '@syncfusion/ej2-grids';

 

.  .  .

 

((this.routeGrid.columns[1] as Column).edit.params as DropDownListModel).dataSource = [];

 

[Jonas Blazinskas]

Hi Pavithra Subramaniyam, 

Just something to note in the end I had to do this otherwise it was expecting a boolean for some reason.

  ((this.routeGrid.columns[1] as Column).edit.params as DropDownListModel).dataSource = new DataManager(this.users);

But Thank you it finally works!!! I am very happy!

[Pavithra Subramaniyam]

Welcome!

We are happy to hear that you have resolved the issue. Please get back to us if you need further assistance on this.