Excel Filter should display values by ValueAccessor

[Aman Thapar]

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..

[Pavithra Subramaniyam]

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. 

Sample : https://stackblitz.com/edit/react-ydm2mb-uts5x2?file=index.js 

 

UG : https://ej2.syncfusion.com/documentation/api/grid/column/#filter 

         https://ej2.syncfusion.com/documentation/api/grid/column/#filtertemplate 

         https://ej2.syncfusion.com/documentation/api/grid/column/#valueaccessor 

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() { 

        super(...arguments); 

         

        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}> 

                        <ColumnsDirective> 

                            <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> 

                       </ColumnsDirective> 

                        <Inject services={[Filter, Page]}/> 

                    </GridComponent> 

                </div> 

            </div>); 

    } 

} 

Please get back to us if you need further assistance. 

 

Regards, 

Pavithra S. 

[Aman Thapar]

Thank you for quick response

[Thavasianand Sankaranarayanan]

Hi Aman, 

 

Thanks for your update. 

 

We are happy that the problem has been resolved at your end. 

 

Regards, 

Thavasianand S.  

[Mike Schall]

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?

html:

  <ejs-grid

    #existingItemsGrid

    [dataSource]="entities$ | async"

    [filterSettings]="{ type: 'Excel', columns: [{ field: 'status', operator: 'equal', value: 1 }] }"

    allowFiltering="true"

  >

    <e-columns>

      <e-column field="name" headerText="Super Group" [allowFiltering]="false">e-column>

      <e-column field="comments" headerText="Comments" [allowFiltering]="false">e-column>

      <e-column

        field="status"

        headerText="Active"

        [valueAccessor]="objectStatusValueAccessor"

        [filter]="{ type: 'CheckBox' }"

      >

        <ng-template #filterItemTemplate let-data>{{ data.status === 1 ? 'Active' : 'Inactive' }}ng-template>

      e-column>

      <e-column field="enteredDate" headerText="Entered Date" type="datetime" format="MM/dd/yyyy hh:mm a">e-column>

    e-columns>

  ejs-grid>

ts:

function objectStatusValueAccessor(field: string, data: object) {

  const value = data[field] as ObjectStatus;

  return ObjectStatus[value];

}

enum:

export enum ObjectStatus {

  Inactive = -1,

  Deleted = 0,

  Active = 1

}

[Dhivya Rajendran]

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. 

Regards,
R.Dhivya 

[Jonas Hjalland]

Hello!

What is the status on release here?

Best regards,

Jonas

"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. "

[Balaji Sekar]

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. 

Regards, 

Balaji Sekar