Key-value in the dropdownlist of the grid component

[Willemin]

Hello,

From the server, I receive user models that have a relationship with a model nationality. This relationship is contained in the nationalityId field of the user. Through the dropdown lists I would like to be able to choose the nationality of a user.

From these users (and their nationalityIds) as dataSource of Grid :

And these nationalities key/value:

Show the list of nationalities in the grid:

To be able to choose a nationality:

I should receive the modifications after a batchSave with the id of the selected nationality (via the key/value nationalities, instead of their value as below) :

My problem is, at the creation of the grid I have the ids instead of their corresponding values :

And on batchSave I get nationality values instead of ids :

How can I fix these problems ?

Note that the dropdown list in the grid should be copy and paste compatible.

Thank you in advance for your answers,
Sincerly Tom Willemin

Attachment: test_3df150e9.zip

[Rajapandiyan Settu]

Hi Willemin,

Thanks for contacting Syncfusion support.

Based on your requirement, you want to perform grid actions on one field and display another field in Grid. If so, you can achieve this by using to use foreignKey column feature.

To bind a foreign key column in the grid, we have to set foreignKeyValue, ForeignKeyField, and dataSource to that column. Refer to the below documentation for more information.

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

Demo: https://ej2.syncfusion.com/angular/demos/#/bootstrap5/grid/column/foreign-key

Note: The data mapping is performed based on the column field name and foreignKeyField. So, the foreignKeyField should contain the column field values in its dataSource. Then the corresponding foeignKeyValue will be shown in the Gird.

Sample: https://stackblitz.com/edit/angular-3bfvqv-etj36k?file=app.component.ts

If you want to provide custom dataSource for the dropdown edit component, you can achieve this by using editparams of the column or you can use the cellEditTemplate feature.

CellEditTemplate: https://ej2.syncfusion.com/angular/documentation/grid/editing/edit-types/#custom-editors-using-template

Provide custom dataSource for dropdown: https://ej2.syncfusion.com/angular/documentation/grid/editing/edit-types/#provide-custom-data-source-and-enabling-filtering-to-dropdownlist

Please let us know if you have any concerns.

Regards,

Rajapandiyan S

[Willemin]

Hello, thank you for your answer.

The foreignKey column feature works for my case but this is not copy/paste compatible.

In your example, when I want to copy/paste values in "Customers" column, I have empty cells :

And in result, instead of having ids I have values :


Sincerly, Tom Willemin

[Rajapandiyan Settu]

Hi Willemin,

Currently, we are checking your query (“The foreignKey column feature works for my case but this is not copy/paste compatible.”) at our end. We will update the further details on May 20^th, 2022.

We appreciate your patience until then.

Regards,

Rajapandiyan S

[Rajapandiyan Settu]

Hi Willemin,

Thanks for your patience.

Query: The foreignKey column feature works for my case but this is not copy/paste compatible.

By using beforePaste event of Grid, you can achieve the paste action on ForeignKey columns. Find the below code example and sample for more information.

beforePaste: https://ej2.syncfusion.com/angular/documentation/api/grid/#beforepaste

 

beforePaste(args) {

    if (args.column.foreignKeyValue) {

      args.cancel = true;

      // get the foreinkey row data

      var foreignKeyFieldVale = args.column.dataSource.executeLocal(new Query().where(args.column.foreignKeyValue, 'equal', args.data));

      if (foreignKeyFieldVale.length > 0) {

        // update the foreignKeyField value

        this.grid.editModule.updateCell(args.rowIndex, args.column.field, foreignKeyFieldVale[0][args.column.field]);

      }

    }

  }

 

Sample: https://stackblitz.com/edit/angular-3bfvqv-62xj6a?file=app.component.html,app.component.ts

Please get back to us if you need further assistance.

Regards,

Rajapandiyan S

[Willemin]

Hello,

It works fine and it solves my problem, thank you.

Sincerly, Tom Willemin

[Rajapandiyan Settu]

Hi Willemin,

We are happy to hear that you have achieved your requirement with the solution provided.

Please get back to us if you need further assistance.

Regards,

Rajapandiyan S