Filtering on complex object bound column not working

[Issam DANO]

I defined a data-grid with 2 columns. One column bound to an object field. Then I specified the 'valueAccessor' on the object-bound column to display the right object attribute (i.e. label): 

import { GridModule, EditService, ToolbarService, SortService, FilterService } from '@syncfusion/ej2-angular-grids'

import { Component } from '@angular/core';

@Component({

    selector: 'object-column-grid',

    template: `      

      <ejs-grid #objectColumnGrid id='objectColumnGrid'

      [dataSource]='gridData' [allowFiltering]='true' [filterSettings]='filterSettings'>

        <e-columns>

          <e-column field='orderID' headerText='Order ID' width='140' textAlign='Right' isPrimaryKey='true'></e-column>

          <e-column field='countryKey' headerText='Country' width='150' [valueAccessor]="countryValueAccessor"></e-column>                    

        </e-columns>

      </ejs-grid>        

    `,

    providers: [EditService, ToolbarService, SortService, FilterService],

    standalone: true,

    imports: [GridModule],

})

export class ObjectColumnGrid {

   

  public gridData: Object[] = [

    {orderID:10248, countryKey: {label: 'United States of America', reference: 'USA'}},

    {orderID:10249, countryKey:  {label: 'Canada', reference: 'CAN'}},

    {orderID:10250, countryKey:  {label: 'United Kingdom', reference: 'UK'}},

    {orderID:10251, countryKey:  {label: 'Belgium', reference: 'BEL'}}

  ];

  public filterSettings: Object;

 

  constructor() {    

   

  }

  public ngOnInit(): void {        

    this.filterSettings = { type: 'Excel'};

  }

  countryValueAccessor(field: string, data: any, column: any): string {

    return data.countryKey?.label || '';

  }  

}

 When I open the filter popup, the filtering is not populated with the columns values and an error is thrown in the console:

How to specify to the filter the right object's attribute (for instance, label) ? 

[Aishwarya Rameshbabu]

Hi Issam DANO,

Greetings from Syncfusion support.

Upon reviewing your query and the provided code example, we observed that you are utilizing the valueAccessor property of the columns in the Syncfusion Grid. When opening the filter dialog for that column results in with a script issue. Our analysis of the shared code example indicates that the data bound to the Grid contains complex data, which leads to the script error when opening the filter dialog. Complex data can be bound to the Grid columns using the dot (.) operator. This topic is already discussed in our documentation. Please refer to the documentation link below for more detailed information. Additionally, we have updated your sample to incorporate the concept of complex data binding. Please refer to the sample and the screenshot provided below, where the filter dialog of the 'countryKey' column is rendered properly without any script issues.

App.component.html

 

    <ejs-grid [dataSource]='gridData' [allowFiltering]='true' [filterSettings]='filterSettings'>

        <e-columns>

            <e-column field='orderID' headerText='Order ID' width='140' textAlign='Right' isPrimaryKey='true'></e-column>

            <e-column field='countryKey.label' headerText='Country' width='150'></e-column>    

        </e-columns>

    </ejs-grid>

 

Sample: Dna4jd (forked) - StackBlitz

Screenshot:

Documentation Link: complex-data-binding

If you need any other assistance or have additional questions, please feel free to contact us.

Regards

Aishwarya R