Dynamically update data for dropdown column

[Gerhard Polzhofer]

Hello, we have defined a column for a grid. The data for the dropdown come from a Rest API and are dependent on other properties. 

Is there a chance to update the data before switching into the edit mode but the grid is already displayed?

<e-column field='Project' headerText='Project' width='200px' popupwidth='600px' editType='dropdownedit' [edit]='m_oProjectParams'></e-column>

this.m_oProjectParams = {

      params: {

          actionComplete: () => false,

          allowFiltering: true,

          dataSource: new DataManager(this.m_oProjectData),

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

          width: '500%',

          filtering: (e) => {

            let query: Query = new Query();

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

            e.updateData(new DataManager(this.this.m_oProjectData), query);

          },

          query: new Query()

      }

    }

[Ajith Govarthan]

Hi Gerhard, 

Thanks for contacting Syncfusion support. 

Query: we have defined a column for a grid. The data for the dropdown come from a Rest API and are dependent on other properties. Is there a chance to update the data before switching into the edit mode but the grid is already displayed? 

 

Based on your query, we suspect that you want to dynamically change the dropdown datasource before editing the row. So, Before we procced to your query please share the below details to validate further on your requirement. 

1. Do you want to change the dropdown dataSource dynamically for each row before editing?

2. Please let us know that have you used batch or Normal edit mode in your Grid application.

 

3. Please share the screenshot or video demonstration of your requirement.

 

4. Share the Syncfusion package version.

 

Regards, 

Ajith G. 

[Gerhard Polzhofer]

1. Do you want to change the dropdown dataSource dynamically for each row before editing?

          No, I just want to change the data before editing the first line.
          However, only the data are available that were present when the grid or dropdown was initialized.

2. Please let us know that have you used batch or Normal edit mode in your Grid application.

             Normal edit mode
 

3. Please share the screenshot or video demonstration of your requirement.

           It's a little complicated because this are customer data and we didn't get permission from the customer to do that.

4. Share the Syncfusion package version.
        19.0.1.63
   

[Ajith Govarthan]

Hi Gerhard, 

  

Thanks for the update. 

  

Query: Query: we have defined a column for a grid. The data for the dropdown come from a Rest API and are dependent on other properties. Is there a chance to update the data before switching into the edit mode but the grid is already displayed? 

  

Based on your query you want to change the dataSource for the dropdown before switching into edit mode. So, we have prepared sample in that we have used the actionBegin event to change the dataSource for the dropdown edit column before switching into edit mode with the help of the column edit property. 

  

For your convenience we have attached the sample, please refer them for your reference. 

  

Code example: 

App.component.ts 

  

  actionBegin(args: any): void { 

    if (args.requestType === 'beginEdit' && this.initialLoad) { 

      this.initialLoad = false; 

  

      (this.grid.getColumnByField('ShipCountry').edit 

        .params as any).dataSource = new DataManager(this.customData);  // you can use your data here 

    } 

  } 

  

Sample Link: https://stackblitz.com/edit/angular-op9mhs-pmegya?file=app.component.ts 

  

If you still face the issue, then please share the video demonstration of your requirement with the attached the sample. 

  

Regards, 

Ajith G.