How to customize display labels in Excel Filter dropdown without changing actual filter values?

[Romain DEVAUX]

Hi Syncfusion team,

I have an Angular grid (ejs-grid) with a column bound to a boolean field (content.wfHasError). The column uses a custom queryCellInfo renderer that displays a button component based on whether the value is true or false — this part works perfectly.

The issue is with the Excel filter dropdown for this column. The data source for the filter is fetched from our backend via a custom DataManager adaptor (set in filterBeforeOpen), which correctly returns:

{ "result": [{ "content": { "wfHasError": false } }, { "content": { "wfHasError": true } }] }

The filter itself works correctly — selecting an item filters the grid as expected, and the backend receives the right boolean predicates.

What I want: Instead of showing "True" / "False" in the dropdown list, I want to display custom translated labels like "with error(s)" / "without error(s)" — while keeping the actual filter value as true/false so the backend query is not affected.

My question: What is the correct way to customize the display label of items in the Excel filter dropdown without changing the underlying filter predicate value? Is filterItemTemplate supported for this use case, and if so, what is the correct way to wire it up in Angular when using a custom adaptor data source?

Any sample or guidance would be greatly appreciated. Thank you!

[Joseph Christ Nithin Issack]

Hi Romain,

Greetings from Syncfusion support.

Based on your query, you want to display custom text in the filter choice item of the Excel filter. Your requirement can be achieved  by using the column.filterSettings.filterItemTemplate property of the EJ2 Grid. Where you can define the custom item template to the filter choice items in the excel filter.

Please refer to the below code example:

 

[app.component.html]

 

<e-column field="Discontinued"  headerText="Discontinued"  width="100" displayAsCheckBox="true" [filter]="columnFilterSettings">

        <ng-template #filterItemTemplate let-data><span >{{data.Discontinued ? "with error(s)" : "without error(s)" }}</span>  </ng-template></e-column>

[app.component.ts]

 

public columnFilterSettings?: Object;

  @ViewChild('filterItemTemplate')

  public filterItemTemplate?: any;

 

  ngOnInit(): void {

    this.data = categoryData;

    this.columnFilterSettings = {

      type: 'Excel',

      filterItemTemplate: this.filterItemTemplate,

    };

  }

 

 

Sample: https://stackblitz.com/edit/angular-qcqwmdbk?file=src%2Fapp.component.ts

Regards,

Joseph I.

[Romain DEVAUX]

Hi,

Thank you for the sample. Unfortunately, your solution does not work in our case because our grid uses dynamic columns via the [columns] input binding — we do not have <e-column> tags in the template. As a result, the #filterItemTemplate ng-template that would normally be a child of <e-column> cannot be declared inline.

Here is our setup:

app.component.html — columns are passed dynamically, and the ng-template is declared outside the grid:

<ejs-grid
  #grid
  [dataSource]="$displayData()"
  [columns]="columns()"
  [filterSettings]="userFilterSettings().filterSettings"
  [allowFiltering]="true"
  ...>
</ejs-grid>


<!-- Declared outside the grid — NOT a child of <e-column> -->
<ng-template #wfStatusFilterItemTemplate let-data>
  <span>{{ data?.content?.wfHasError === true ? 'with error(s)' : 'without error(s)' }}</span>
</ng-template>

app.component.ts — columns are built programmatically in a service and passed as ColumnModel[]:

// Column built in a service:
cln.push({
  type: 'string',
  field: 'content.wfHasError',   // nested field path
  headerText: 'Workflow Status',
  allowFiltering: true,
  uid: 'column-wfstatus',
  // filter.filterItemTemplate set here has no effect
});


// In the component, we tried assigning via the filter property on the ColumnModel:
column.filter = {
  type: 'Excel',
  filterItemTemplate: this.wfStatusFilterItemTemplate, // @ViewChild ref
};


// We also tried assigning AFTER init via getColumnByField():
ngAfterViewInit() {
  const wfCol = this.grid.getColumnByField('content.wfHasError');
  if (wfCol) {
    (wfCol as any).filter = {
      type: 'Excel',
      filterItemTemplate: this.wfStatusFilterItemTemplate,
    };
  }
}

Neither approach works — the filter dropdown still shows true / false.

Our questions:

- Is filterItemTemplate supported when columns are declared programmatically via [columns]="columnArray" rather than <e-column> tags?

- If yes, at what point in the lifecycle must filterItemTemplate be assigned to the column object for it to be picked up by the Excel filter?

- Is there an alternative event (e.g., actionBegin with filterBeforeOpen) where we could inject a custom template reference at the moment the filter popup opens?

Thank you.

[Joseph Christ Nithin Issack]

Hi Romain,

Based on your requirement, it appears that the grid columns are being bound dynamically, and you would like to assign the filter template dynamically as well. This can be achieved by using the column.filter.itemTemplate property, where the template can be assigned through ViewChild.

Please refer to the following example:

 

[html]

 

<div class="control-section">

    <ejs-grid #grid [dataSource]="data" [columns]="columns" allowPaging="true" allowFiltering="true" [pageSettings]="pageSettings" [filterSettings]="filterOptions" >

    

    </ejs-grid>

  </div>

  <ng-template #filterItemTemplate let-data><span >{{data.Discontinued ? "with error(s)" : "without error(s)" }}</span>  </ng-template>

 

 

[ts]

 

  public columnFilterSettings?: Object;

  @ViewChild('filterItemTemplate', { static: true })

  public filterItemTemplate!: TemplateRef<any>;

 

ngOnInit(): void {

    this.data = categoryData;

    this.columnFilterSettings = {

      type: 'Excel',

      itemTemplate: this.filterItemTemplate,

    };

 

    this.columns = [

      {

        field: 'CategoryName',

        headerText: 'Category Name',

        width: 150,

      },

      {

        field: 'Discontinued',

        headerText: 'Discontinued',

        width: 100,

        displayAsCheckBox: true,

        filter: this.columnFilterSettings,

      },

      {

        field: 'ProductID',

        headerText: 'ProductID',

        width: 120,

      },

    ];

  }

 

In this approach, the filter template is defined using ng-template and then referenced in the component through ViewChild. The retrieved template reference is assigned to the itemTemplate property inside the column’s filter settings. This allows the filter template to be applied dynamically even when the columns are generated programmatically.

For your convenience, a working sample is available here:

Sample: https://stackblitz.com/edit/angular-qcqwmdbk-rf8mnrjb?file=src%2Fapp.component.ts

[Romain DEVAUX]

Hi,

Thank you for your help! The itemTemplate approach with ViewChild works perfectly with our dynamically-bound columns. The filter dropdown now displays our custom translated labels as expected.

Best regards,
Romain

[Joseph Christ Nithin Issack]

Hi Romain,

Thanks for your update, we are glad that the provided solution resolved the issue you are facing.

[Antoine Benson]

That's a really neat solution for customizing filter choices! It's always great when a framework offers that level of flexibility. I can imagine how useful this would be for improving user experience with more descriptive filter options. Speaking of neat and flexible, have you ever tried out paper.io 2?

[Bumne Habit]

You may need to use a mapped/display field or customize the filter template, since the default Excel filter usually won’t allow changing labels without affecting the underlying values.

Sample: https://stackblitz.com/edit/angular-qcqwmdbk-rf8mnrjb?file=src%2Fapp.component.tsfnaf