We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Dropdown edit observable list

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,
      },
    };

5 Replies 1 reply marked as answer

PS Pavithra Subramaniyam Syncfusion Team November 10, 2022 01:54 AM

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


Marked as answer

FA Frank Alberts November 10, 2022 09:37 AM

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,
      },
    };




PS Pavithra Subramaniyam Syncfusion Team November 11, 2022 01:04 AM

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[1as Column).edit.params as DropDownListModel).dataSource = [];

 



FA Frank Alberts November 12, 2022 12:32 PM

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!





PS Pavithra Subramaniyam Syncfusion Team November 14, 2022 05:30 AM

Welcome!


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


Loader.
Live Chat Icon For mobile
Up arrow icon