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
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Excel Filter should display values by ValueAccessor

Thread ID:

Created:

Updated:

Platform:

Replies:

149695 Dec 5,2019 04:36 PM UTC Mar 11,2021 11:41 AM UTC React - EJ 2 7
loading
Tags: Grid
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..

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. 

 


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
Replied On December 6, 2019 02:44 PM UTC

Thank you for quick response

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.  


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
}


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 


Jonas Hjalland
Replied On March 4, 2021 11:46 AM UTC

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 [Syncfusion]
Replied On 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. 

Regards, 
Balaji Sekar 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon