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

Excel Filter should display values by ValueAccessor

I want to filter values that are displayed on grid by the valueAccessor. 

When I click on the filter icon, the excel filter should show values which is the same as the one displayed on grid. 

E.g Datasource has 6,7,8. Value Accessor converts to string1, string2, string3. 

Excel filter should show String1, string2, string3 and filter accordingly.

How can this be done on react? Thanks..

7 Replies

PS Pavithra Subramaniyam Syncfusion Team December 6, 2019 11:57 AM UTC

Hi Aman, 

You can achieve your requirement by using the Item Template feature of Grid filtering. For that you can use the column property filter and return the value as you want inside the html element in the  `itemTemplate` . Please refer the below code and sample for information. 


import { render } from 'react-dom'; 
import './index.css'; 
import * as React from 'react'; 
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns'; 
import { GridComponent, ColumnsDirective, ColumnDirective, Page, Filter, Inject } from '@syncfusion/ej2-react-grids'; 
import { orderDataSource } from './data'; 
import { SampleBase } from './sample-base'; 
export class FilterMenu extends SampleBase { 
    constructor() { 
        this.filterSettings = { type: 'Excel' }; 
        this.fields = { text: 'text', value: 'value' }; 
     valueAccess(field, data, column)

      return data[field] + 678 ;       // here you can customize your data 
     filterValue  = { 
    type: 'CheckBox', 
    itemTemplate: (e)=>{ 

      return   <span>{e.data[e.column.field] +'678'}</span>     // here you can return your customized data 

    render() { 
        return (<div className='control-pane'> 
                <div className='control-section row'> 
                    <GridComponent dataSource={orderDataSource} allowPaging={true} ref={grid => this.gridInstance = grid} pageSettings={{ pageSize: 10, pageCount: 5 }} allowFiltering={true} filterSettings={this.filterSettings}> 
                            <ColumnDirective field='OrderID' headerText='Order ID' width='120' textAlign='Right'></ColumnDirective> 
                            <ColumnDirective field='ShipCountry' headerText='Ship Country' width='150'  filter={this.filterValue} valueAccessor={this.valueAccess}></ColumnDirective> 
                            <ColumnDirective field='CustomerName' headerText='Customer Name' width='150'></ColumnDirective> 
                        <Inject services={[Filter, Page]}/> 


Please get back to us if you need further assistance. 
Pavithra S. 

AT Aman Thapar December 6, 2019 02:44 PM UTC

Thank you for quick response

TS Thavasianand Sankaranarayanan Syncfusion Team December 9, 2019 05:27 AM UTC

Hi Aman, 
Thanks for your update. 
We are happy that the problem has been resolved at your end. 
Thavasianand S.  

MS Mike Schall February 7, 2020 10:56 PM UTC

The search text box in the filter window still uses the bound field value, not the return value of the valueAccessor or the filterItemTemplate value.  If the column you are showing is sourced from a enum, the value is a number while the displayed value is a string.  So the user would need to search for 1?  Why does the filter search and filter item template not use what is returned from the valueAccessor?  Is there a workaround?

    [dataSource]="entities$ | async"
    [filterSettings]="{ type: 'Excel', columns: [{ field: 'status', operator: 'equal', value: 1 }] }"
      <e-column field="name" headerText="Super Group" [allowFiltering]="false">e-column>
      <e-column field="comments" headerText="Comments" [allowFiltering]="false">e-column>
        [filter]="{ type: 'CheckBox' }"
        <ng-template #filterItemTemplate let-data>{{ data.status === 1 ? 'Active' : 'Inactive' }}ng-template>
      <e-column field="enteredDate" headerText="Entered Date" type="datetime" format="MM/dd/yyyy hh:mm a">e-column>

function objectStatusValueAccessor(fieldstringdataobject) {
  const value = data[fieldas ObjectStatus;
  return ObjectStatus[value];

export enum ObjectStatus {
  Inactive = -1,
  Deleted = 0,
  Active = 1

DR Dhivya Rajendran Syncfusion Team February 11, 2020 12:56 PM UTC

Hi Mike, 

Greeting from syncfusion support 

We have validated your query and By default the valueAccessor is used to access/manipulate the value of the displayed data and its does not affect the original data source. If you done searching or filtering, it will perform the actions based on the field values in the dataSource this is our default behavior. 
Currently, we don’t have option to customize the search value based on that filter itemTemplate (Active, Inactive)so we have considered to provide an option to customize the search value and will include the fix in our upcoming February 21, 2020 patch release. 

Until then we appreciate your patience. 

JH Jonas Hjalland March 4, 2021 11:46 AM UTC

What is the status on release here?

Best regards,

"Currently, we don’t have option to customize the search value based on that filter itemTemplate (Active, Inactive)so we have considered to provide an option to customize the search value and will include the fix in our upcoming February 21, 2020 patch release. "

BS Balaji Sekar Syncfusion Team March 11, 2021 11:41 AM UTC

Hi Jonas, 

Before proceeding your query please ensure that you want to bind the “Active” and “Inactive” values in filter popup based in the corresponding column’s value and also you need to filter a value with filter popup showing value. If we misunderstood your query please share on your exact requirement to us that will help to validate further. 

Balaji Sekar 

Live Chat Icon For mobile
Up arrow icon