Excel Filter should display values by ValueAccessor

Aman Thapar

Asked On December 5, 2019 04:36 PM UTC

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

Reply | Reply with quote

Pavithra Subramaniyam [Syncfusion]

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

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

<GridComponent dataSource={orderDataSource} allowPaging={true} ref={grid => this.gridInstance = grid} pageSettings={{ pageSize: 10, pageCount: 5 }} allowFiltering={true} filterSettings={this.filterSettings}>

</ColumnsDirective>

</GridComponent>

</div>

</div>);

}

Please get back to us if you need further assistance.

Regards,

Pavithra S.

Reply | Reply with quote

Aman Thapar

Replied On December 6, 2019 02:44 PM UTC

Thank you for quick response

Reply | Reply with quote

Thavasianand Sankaranarayanan [Syncfusion]

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

Regards,

Thavasianand S.

Reply | Reply with quote

Mike Schall

Replied On 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?

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
}

Reply | Reply with quote

Dhivya Rajendran [Syncfusion]

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

Regards,
R.Dhivya

Reply | Reply with quote

Thread ID:	Created:	Updated:	Platform:	Replies:
149695	Dec 5,2019 04:36 PM UTC	Feb 11,2020 12:56 PM UTC	React - EJ 2	5

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US