Dynamically change DropDownList on Edit Dialog of Grid

[Jason]

Are there any examples of dynamically setting the values of a dropdown list which is displayed on the edit dialog of a Grid?

I am looking at a list of "transactions" that are classified by "Discipline". The dataset for the Grid will not have ALL of the disciplines to choose from when editing a transactions. So, I need to pull in the full list from a remote API (not using DataManager) and provide the full list of disciplines to the drop downs being displayed on the dialog.

I've found many examples in the forums of doing this with a dropdownlist displayed normally and for inline editing on a grid, but not for a dialog.

My grid:

  <ejs-grid

    #grid

    [dataSource]='dataSource'

    [allowPaging]='false'

    [allowSorting]='true'

    [allowFiltering]='true'

    [allowGrouping]='true'

    [editSettings]='editSettings'

    [toolbar]='toolbar'

    (actionComplete)='actionComplete($event)'

  >

    <e-columns>

      <e-column

        field='id'

        headerText='Id'

        textAlign='Right'

        width='50'

        isPrimaryKey='true'

      ></e-column>

      <e-column

        #disciplines

        id='disciplines'

        field='discipline'

        headerText='Discipline'

        textAlign='Right'

        width='90'

        editType='dropdownedit'

        [edit]='disciplineParams'

      ></e-column>

      <e-column

        field='entryDate'

        headerText='Date'

        width='60'

        editType='datepickeredit'

      ></e-column>

      <e-column field='hours' headerText='Hours' width='60'></e-column>

      <e-column

        field='dollars'

        headerText='Dollars'

        textAlign='Right'

        format='C2'

        width='60'

      ></e-column>

    </e-columns>

  </ejs-grid>

[Ajith Govarthan]

Hi Jason, 

Thanks for contacting Syncfusion support. 

Query: I am looking at a list of "transactions" that are classified by "Discipline". The dataset for the Grid will not have ALL of the disciplines to choose from when editing a transactions. So, I need to pull in the full list from a remote API (not using DataManager) and provide the full list of disciplines to the drop downs being displayed on the dialog. 

 

Based on your query you want to bind custom dataSource for dropdown component which is rendered in the Dialog edit mode. So, we have prepared sample and in that sample we have used the EditTemplate and bound the custom dataSource for the Dropdown component using the created event of the DropDownList. 

In the created event, we have fetched the data from API service and bounded the fetched data in the dropdown component.  For your convenience we have attached the sample, please refer them for your reference. 

Code Example: 

App.component.ts 

  created() { 

    const baseURL = 

      "https://ej2services.syncfusion.com/production/web-services/api/Orders"; 

    var ajax = new Ajax({ 

      type: "GET", 

      url: baseURL, 

      contentType: "application/json", 

      dataType: "json" 

    }); 

    ajax 

      .send() 

      .then(data => { 

        let drp = (document.getElementById("ShipCountry") as any) 

          .ej2_instances[0]; 

        drp.dataSource = this.data;                                // set datasource and value here 

        drp.value = this.orderData["ShipCountry"];         

        drp.dataBind(); 

      }) 

      .catch(xhr => {}); 

  } 

} 

Sample Link: https://stackblitz.com/edit/angular-6r5eex-svrp7r?file=app.component.ts 

Please get back to us if you need further assistance. 

Regards, 

Ajith G.