Grid inline edit dropdown issue

[Sanjay Singh]

Hello,

We have a Grid where on inline edit mode, one of the column allows user to select values from a Drop down.

This drop down data is coming from am API, in below format

[{code:'001', desc:'Test desc1'}, {code:'002', desc:'Test desc2'} ]

When clicked on drop down and we select  a value it displays the desc value to user( while still in edit mode). However as soon we click on update, this selected value changes to its corresponding code.

For example:  Test desc1 is selected from dropdown and it changes to 001 when clicked on update button on toolbar.

Field parameter we have configured is: {text:desc, value: code}

So we want description to displayed in drowpdown and code to be saved in backend.

I hope my query is clear, if not do let me know.

Thanks,

Sanjay

[Santhosh Iruthayaraj]

Hi Sanjay Singh,

Greetings from Syncfusion support.

When utilizing the dropdown edit feature with a custom dataSource, the value in the text field serves solely for display purposes. The value in the value field is the one stored in the dataSource. By default, the Grid can only exhibit column values based on the dataSource. Consequently, the code value is displayed on the Grid. Nevertheless, if your intention is to display the value from the "desc" field in the Grid while retaining the "code" value in the dataSource, you can fulfill this requirement by leveraging the ForeignKey Column feature of the Grid. For additional information about the ForeignKey Column feature, please refer to the documentation link provided below:

Documentation: https://ej2.syncfusion.com/angular/documentation/grid/columns/foreign-key-column

If you have any further queries or need additional assistance, please let us know.

Regards,

Santhosh I

[Sanjay Singh]

Hello,

We are already using the data source to populate the column dropdown in edit mode.

Not sure how to implement solution provided above.

Can you please share an example..?

Thanks,

Sanjay

[Santhosh Iruthayaraj]

Hi Sanjay Singh,

We have prepared a code snippet and a sample that explains the "Foreign Key Column" feature in response to your query. You can find the code snippet and sample below:

[app.component.html]

 

<ejs-grid

    [dataSource]="data"

    [toolbar]="toolbar"

    [editSettings]="editSettings"

  >

    <e-columns>

      .  .  .  .  .

      <!-- provide the same dataSource which is bound to the drop down -->

      <e-column

        field="ShipCountry"

        headerText="Ship Country"

        width="150"

        editType="dropdownedit"

        [edit]="countryParams"

        foreignKeyField="code"

        foreignKeyValue="desc"

        [dataSource]="dropDownData"

      ></e-column>

    </e-columns>

</ejs-grid>

 

[app.component.ts]

 

public dropDownData: object[] = [

    { code: '1', desc: 'United States' },

    { code: '2', desc: 'Australia' },

    { code: '3', desc: 'India' },

];

 

ngOnInit(): void {

    .  .  .  .  .

    this.countryParams = {

      params: {

        allowFiltering: true,

        dataSource: new DataManager(this.dropDownData),

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

        query: new Query(),

        actionComplete: () => false,

      },

    };

}

 

Sample: https://stackblitz.com/edit/angular-grid-foreign-key-column

Foreign Key Column Documentation: https://ej2.syncfusion.com/angular/documentation/grid/columns/foreign-key-column

Please let us know if you have any further queries.

Regards,

Santhosh I

[arun kumar]

Hi  Santhosh Iruthayaraj,

In my Gantt chart when i implemented dropdown in a column then my dropdown option is not coming in ui . It is showing "no record found"

This is my ts code 


This is my html code