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

Edit grid mode - complex field mapping

In my grid, a column „company” is mapped to an object that has fields: id, name. I use valueAccessor to display company name for this column.

Now I need this column to be editable within the grid, but I cannot map the selected value to a complex object. 

See these code snippets:

this.companies = [
{id: 1, name: 'Nestle'},
{id: 2, name: 'Nivea'}
this.idNameFields = { text: 'id', value: 'name' };
this.companyEdit = {
params: {
query: new Query(),
dataSource: this.companies,
fields: this.idNameFields

So now when I select Nestle, the company field is set to 1 and that breaks the mapping done via valueAccessor. I want the company to be set as a whole object {id: 1, name: 'Nestle'}. Is there a way to I set this up?

1 Reply

RS Rajapandiyan Settu Syncfusion Team November 8, 2022 10:21 PM

Hi Ignacy,

Thanks for contacting Syncfusion support.

By default, the EJ2 Grid column only supports number, string, date, dateTime, Boolean, checkbox type values, and it does not support Object, array type of values. Refer to the below documentation.

columnType: https://ej2.syncfusion.com/documentation/api/grid/columnType/ 

So, the Grid does not support any data actions like Filtering, Sorting, Editing, Searching, Grouping, etc., on the Object type of column. This is the behavior of EJ2 Grid.

However, You can achieve complex data binding in the grid by using the dot(.) operator in the column.field.

Complex data-binding: https://ej2.syncfusion.com/angular/documentation/grid/columns/complex-data-binding/


Rajapandiyan S

Live Chat Icon For mobile
Up arrow icon