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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Cannot define custom filter Template for Excel Filter type

Thread ID:

Created:

Updated:

Platform:

Replies:

150980 Jan 27,2020 07:01 AM UTC Oct 8,2020 11:56 AM UTC Angular - EJ 2 15
loading
Tags: Grid
Neo
Asked On January 27, 2020 07:01 AM UTC

Hi all,

I want to use Filter Template for a column when using Excel Filter. According to the documentation I followed the implementation. But it didn't work. It seems the documentation demo example has the same issue and it is supposed to show a drop down list. Still it is showing default check boxes. Please advice to solve this issue.


Documentation: 



Dhivya Rajendran [Syncfusion]
Replied On January 28, 2020 11:47 AM UTC

Hi Neo, 

Greetings from syncfusion support. 

Query : I want to use Filter Template for a column when using Excel Filter. According to the documentation I followed the implementation. 
 
By default FilterTemplate is used to customize the custom filter of the particular column. please refer the screenshots and video link for more details. 


Img 1: without filter template(textbox) 

 

Img 2: with filter template(dropdown) 

 



Could you please share more or below details about your requirement that will help us to analyze and provide a better solution as soon as possible. 

  1. Explain more details about your exact requirement.

  1. Are you want to change the filter checklist in the dialog as shown below? How would you like to show this?

                

  1. Share any screenshot or video demonstration of your requirement.

Regards, 
R.Dhivya 


Neo
Replied On February 3, 2020 05:52 AM UTC

Hi Dhivya,

My requirement is to show two check boxes which are representing a Boolean column. By default it is showing 'true' and 'false'. I need to show text instead of 'true' and 'false' values. Following screen shot may help you.

Image

Dhivya Rajendran [Syncfusion]
Replied On February 4, 2020 07:16 AM UTC

Hi Neo, 

Thanks for sharing the details. 

We  have analyzed your requirement and we have an option to customize the excel filter check list. For your reference, we have created a sample. In the below sample, we have customize the excel check list using itemTemplate property of columns in Grid. 

Please refer the below sample and code example for more information. 

<ejs-grid #grid [dataSource]='data' [filterSettings]='filterSettings' allowFiltering='true'> 
  <e-columns> 
      . . . . . 
      <e-column field='Verified' [filter] = 'filter' headerText='Verified' width='150'></e-column> 
  </e-columns> 
</ejs-grid> 
 
<ng-template #filterItemTemplate let-data >{{getFilterItemValue(data)}}</ng-template> 

 

export class AppComponent { 
  . . . . . 
  @ViewChild('filterItemTemplate') 
  public fltemp: TemplateRef<{}>; 
  ngOnInit(): void { 
      . . . . . 
      this.filterSettings = { type: 'Excel' }; 
      this.filter = {itemTemplate: this.fltemp } 
  } 
   public getFilterItemValue(e: any) { 
      if (e.Verified == "Select All") { 
          return e.Verified 
      } 
      else if(e.Verified === true){ 
          return "Show selected IDs" 
      } else{ 
        return "Show Unselected IDs" 
      } 
  } 
} 

 



Please get back to us if you require further assistance on this. 

Regards, 
R.Dhivya  


Neo
Replied On February 6, 2020 05:35 AM UTC

Hi Neo, 

Thanks for sharing the details. 

We  have analyzed your requirement and we have an option to customize the excel filter check list. For your reference, we have created a sample. In the below sample, we have customize the excel check list using itemTemplate property of columns in Grid. 

Please refer the below sample and code example for more information. 

<ejs-grid #grid [dataSource]='data' [filterSettings]='filterSettings' allowFiltering='true'> 
  <e-columns> 
      . . . . . 
      <e-column field='Verified' [filter] = 'filter' headerText='Verified' width='150'></e-column> 
  </e-columns> 
</ejs-grid> 
 
<ng-template #filterItemTemplate let-data >{{getFilterItemValue(data)}}</ng-template> 

 

export class AppComponent { 
  . . . . . 
  @ViewChild('filterItemTemplate') 
  public fltemp: TemplateRef<{}>; 
  ngOnInit(): void { 
      . . . . . 
      this.filterSettings = { type: 'Excel' }; 
      this.filter = {itemTemplate: this.fltemp } 
  } 
   public getFilterItemValue(e: any) { 
      if (e.Verified == "Select All") { 
          return e.Verified 
      } 
      else if(e.Verified === true){ 
          return "Show selected IDs" 
      } else{ 
        return "Show Unselected IDs" 
      } 
  } 
} 

 



Please get back to us if you require further assistance on this. 

Regards, 
R.Dhivya  


Hi Dhivya,

It is working. Thank you very much for your valuable support.

Dhivya Rajendran [Syncfusion]
Replied On February 6, 2020 06:52 AM UTC

Hi Neo, 

Thanks for your update. 

We are happy to hear that the provided solution was helpful to achieve your requirement. Please get back to us if you require further assistance on this. 

Regards, 
R.Dhivya  


Neo
Replied On February 11, 2020 04:13 AM UTC

Hi Neo, 

Thanks for your update. 

We are happy to hear that the provided solution was helpful to achieve your requirement. Please get back to us if you require further assistance on this. 

Regards, 
R.Dhivya  


Hi R.Dhivya,

There is an issue when enabling true/false column as checkbox column. Filter Popup of other columns stays open and cannot be closed by clicking Ok or cancel. Below code for your reference,

<ejs-grid #grid [(dataSource)]='points' height='115' allowTextWrap='true' allowResizing='true' gridLines='Both'
    [allowSorting]="true" [allowFiltering]='true' [enableVirtualization]='false' [filterSettings]='filterSettings'>
    <e-columns>
        <e-column headerText=' ' field='isChecked' width='25' [filter]='filter'>
            <ng-template #template let-data>
                <ejs-checkbox [(checked)]="data.isChecked" (change)='checkBoxChange(data)'>ejs-checkbox>
            ng-template>
        e-column>
        <e-column [isPrimaryKey]='true' field='dataCollectionPointCode' headerTextAlign='center' headerText='Point ID'
            textAlign='Left' width='100'>e-column>
        <e-column field='dataCollectionPointName' headerTextAlign='center' textAllign headerText='Point Name'
            textAlign='Left' width='100'>e-column>
    e-columns>
ejs-grid>
<ng-template #filterItemTemplate let-data>{{getFilterItemValue(data)}}ng-template>


Prasanna Kumar Viswanathan [Syncfusion]
Replied On February 12, 2020 03:35 PM UTC

Hi Neo, 
We are able to reproduce the reported issue from our side. We will fix this and include the solution in our upcoming patch release which is expected to be rolled out on February 26, 2020. We appreciate your patience until then. 
  
You can track the status of this issue through the following feedback link, 
  
  
Regards, 
Prasanna Kumar N.S.V 


Cesar Smerling
Replied On September 22, 2020 02:09 PM UTC

Hi, this workaround is not working for me.

I want to translate the values in a CheckBox filter.
I tried this workaround and I get and error:

TypeError: Converting circular structure to JSON
    --> starting at object with constructor 'Object'
    |     property 'element' -> object with constructor 'Object'
    |     property 'componentProvider' -> object with constructor 'Object'
    --- property 'parent' closes the circle
    at JSON.stringify ()
    at ColumnsDirective.push../node_modules/@syncfusion/ej2-angular-base/src/complex-array-base.js.ArrayBase.isChanged (complex-array-base.js:147)
    at ColumnsDirective.push../node_modules/@syncfusion/ej2-angular-base/src/complex-array-base.js.ArrayBase.ngAfterContentChecked (complex-array-base.js:202)
    at callProviderLifecycles (core.js:32324)
    at callElementProvidersLifecycles (core.js:32293)
    at callLifecycleHooksChildrenFirst (core.js:32275)
    at checkAndUpdateView (core.js:44276)
    at callViewAction (core.js:44637)
    at execComponentViewsAction (core.js:44565)
    at checkAndUpdateView (core.js:44278)

Also in the exameples in the documentation, the template it's not working:

https://ej2.syncfusion.com/angular/documentation/grid/filtering/#excel-filter

In that example, you are creating a dropdownlist for CustomerId column but it never shows. I tried this example to templating inside the column 
but never changes, I tried call a method inside the tempplate and it's never call.
What exactly I need its to translate the values in a CheckBox filter, and I cannot find any easy solution.
Thanks

Here is my grid code:
ngOnInit() {
this.filterSettings = {type: 'Excel'};
console.log("INIT:",this.filterTemplate);
}

ngAfterViewInit() {
console.log("THIS:",this.filterTemplate);
this.filter = {itemTemplate: this.filterTemplate }
}
public logData(data){
console.log("DATA",data)

return data;
}
In the HTML
   <e-column [field]="columns.PROPERTY"
[headerText]="'txt.Property' | translate" [allowEditing]="false"
[filter]="filter"
>
<ng-template #template let-row>
{{row.propertyName | translate}}
ng-template>
e-column>

<ng-template #customFilter let-data >{{logData(data)}}ng-template>


Sujith Kumar Rajkumar [Syncfusion]
Replied On September 23, 2020 11:57 AM UTC

Hi Cesar, 
 
Greetings from Syncfusion support. 
 
We checked your reported problem and would like to let you know that this is a known issue from our end and we are currently working on it. The fix for this will be included in our weekly patch release scheduled on 7th October 2020. Until then your patience is appreciated. 
 
You can track the status of this request through the below feedback link, 
 
 
For now, you can achieve this requirement by directly defining the filterItemTemplate below the required column initialization as demonstrated in the below code snippet, 
 
app.component.html 
<ejs-grid #grid [dataSource]='data' ... > 
    <e-columns> 
        <e-column field='Verified' headerText='Verified' width='150'> 
            <ng-template #filterItemTemplate let-data>{{getFilterItemValue(data)}}</ng-template> 
        </e-column> 
    </e-columns> 
</ejs-grid> 
 
app.component.ts 
public getFilterItemValue(e: any) { 
        if (e.Verified == "Select All") { 
            return e.Verified 
        } 
        else if (e.Verified === true) { 
            return "Show selected IDs" 
        } else { 
            return "Show Unselected IDs" 
        } 
} 
 
Please find the sample prepared based on this for your reference below, 
 
 
As for your query related to the documentation – Also in the examples in the documentation, the template it's not working, the columns filterTemplate (not filter itemTemplate as in your requirement) is used in the sample which allows to customize the custom filter of the particular column. This is working fine in the documentation which is shown in the below image for your reference, 
 
 
 
Let us know if you have any concerns. 
 
Regards, 
Sujith R 


Cesar Smerling
Replied On September 23, 2020 07:36 PM UTC

Hi Sujith R!

With the <ng-template #filterItemTemplate> I achieved what I needed. Thanks

I misunderstood the docs, I though that the Custom Filter in the excel filter type was replacing the list box with the checkboxes.

Sujith Kumar Rajkumar [Syncfusion]
Replied On September 24, 2020 09:15 AM UTC

Hi Cesar, 

You’re welcome. 

Please get back to us if you require any further assistance. 

Regards, 
Sujith R 


Neo
Replied On September 24, 2020 11:13 AM UTC

Hi Neo, 

Thanks for your update. 

We are happy to hear that the provided solution was helpful to achieve your requirement. Please get back to us if you require further assistance on this. 

Regards, 
R.Dhivya  


Hi R.Dhivya,

There is an issue when enabling true/false column as checkbox column. Filter Popup of other columns stays open and cannot be closed by clicking Ok or cancel. Below code for your reference,

<ejs-grid #grid [(dataSource)]='points' height='115' allowTextWrap='true' allowResizing='true' gridLines='Both'
    [allowSorting]="true" [allowFiltering]='true' [enableVirtualization]='false' [filterSettings]='filterSettings'>
    <e-columns>
        <e-column headerText=' ' field='isChecked' width='25' [filter]='filter'>
            <ng-template #template let-data>
                <ejs-checkbox [(checked)]="data.isChecked" (change)='checkBoxChange(data)'>ejs-checkbox>
            ng-template>
        e-column>
        <e-column [isPrimaryKey]='true' field='dataCollectionPointCode' headerTextAlign='center' headerText='Point ID'
            textAlign='Left' width='100'>e-column>
        <e-column field='dataCollectionPointName' headerTextAlign='center' textAllign headerText='Point Name'
            textAlign='Left' width='100'>e-column>
    e-columns>
ejs-grid>
<ng-template #filterItemTemplate let-data>{{getFilterItemValue(data)}}ng-template>


Hi Sujith R,

Your solution is not working with my code. I'm using 'ejs-checkbox' inside 'ng-template'. Please advice to solve this?

Sujith Kumar Rajkumar [Syncfusion]
Replied On September 25, 2020 11:32 AM UTC

Hi Shamil, 
 
We checked your reported problem but unfortunately were unable to reproduce it from our end as the checkbox defined inside the columns template and checkbox filter item data defined inside the columns filterItemTemplate was working fine. 
 
We suspect you are defining the filterItemTemplate separately(not inside the corresponding column using ng-template) and trying to access and set it in the TS file. If so, as we had mentioned in our previous update using this approach is not currently working and we have already logged a bug task for that. The fix for this will be included in our weekly patch release scheduled on 7th October 2020. The status of this request can be tracked through this feedback link. 
 
So for now you can define them directly inside the Grid columns to achieve your requirement. This is demonstrated in the below code snippet, 
 
<ejs-grid #grid [dataSource]='data' ...> 
    <e-columns> 
        <e-column field='isChecked' headerText='Is Checked' width='150'> 
            <ng-template #template let-data> 
                <ejs-checkbox [(checked)]="data.isChecked" (change)='checkBoxChange(data)'></ejs-checkbox> 
            </ng-template> 
            <ng-template #filterItemTemplate let-data>{{getFilterItemValue(data)}}</ng-template> 
        </e-column> 
    </e-columns> 
</ejs-grid> 
 
We have prepared a sample based on this for your reference. You can find it below, 
 
 
If problem still persists please let us know the Syncfusion package version used in your application and share us your complete Grid rendering code to validate further. 
 
Regards, 
Sujith R 


Neo
Replied On October 7, 2020 09:38 AM UTC

Hi Shamil, 
 
We checked your reported problem but unfortunately were unable to reproduce it from our end as the checkbox defined inside the columns template and checkbox filter item data defined inside the columns filterItemTemplate was working fine. 
 
We suspect you are defining the filterItemTemplate separately(not inside the corresponding column using ng-template) and trying to access and set it in the TS file. If so, as we had mentioned in our previous update using this approach is not currently working and we have already logged a bug task for that. The fix for this will be included in our weekly patch release scheduled on 7th October 2020. The status of this request can be tracked through this feedback link. 
 
So for now you can define them directly inside the Grid columns to achieve your requirement. This is demonstrated in the below code snippet, 
 
<ejs-grid #grid [dataSource]='data' ...> 
    <e-columns> 
        <e-column field='isChecked' headerText='Is Checked' width='150'> 
            <ng-template #template let-data> 
                <ejs-checkbox [(checked)]="data.isChecked" (change)='checkBoxChange(data)'></ejs-checkbox> 
            </ng-template> 
            <ng-template #filterItemTemplate let-data>{{getFilterItemValue(data)}}</ng-template> 
        </e-column> 
    </e-columns> 
</ejs-grid> 
 
We have prepared a sample based on this for your reference. You can find it below, 
 
 
If problem still persists please let us know the Syncfusion package version used in your application and share us your complete Grid rendering code to validate further. 
 
Regards, 
Sujith R 


Hi,

Still not working to me. Following code snippets for your reference.

** HTML **

<ejs-grid #grid height='100%' allowTextWrap='true' allowResizing='true' gridLines='Both'
          [allowSorting]="true" [allowFiltering]='true' [enableVirtualization]='false' [filterSettings]='filterSettings'
          (actionComplete)="actionComplete($event)">
          <e-columns>
            <e-column headerText=' ' field='isChecked' width='25' [filter]='filter'>
              <ng-template #template let-data>
                <ejs-checkbox [(checked)]="data.isChecked" (change)='checkBoxChange(data)'></ejs-checkbox>
              </ng-template>
              <ng-template #filterItemTemplate let-data >{{getFilterItemValue(data)}}</ng-template>
            </e-column>
            <e-column [isPrimaryKey]='true' field='pointCode' headerTextAlign='center' headerText='Point ID'
              textAlign='Left' width='100'></e-column>
            <e-column field='pointName' headerTextAlign='center' textAllign headerText='Point Name'
              textAlign='Left' width='100'></e-column>
          </e-columns>
        </ejs-grid>

** TS **

@ViewChild('filterItemTemplate'public fltempTemplateRef<{}>;

ngOnInit() {
    this.filterSettings = {
      type: 'Excel',
    };
    this.filter = { itemTemplate: this.fltemp };
  }

public getFilterItemValue(eany) {
    if (e.isChecked === 'Select All') {
      return e.isChecked;
    } else if (e.isChecked === true) {
      return 'Show selected IDs';
    } else {
      return 'Show unselected IDs';
    }
  }

** package.json **

"dependencies": {
        "@agm/core""^1.0.0-beta.5",
        "@angular/animations""6.0.7",
        "@angular/cdk""6.4.7",
        "@angular/common""6.0.7",
        "@angular/compiler""6.0.7",
        "@angular/core""6.0.7",
        "@angular/forms""6.0.7",
        "@angular/http""6.0.7",
        "@angular/material""6.4.7",
        "@angular/platform-browser""6.0.7",
        "@angular/platform-browser-dynamic""6.0.7",
        "@angular/router""6.0.7",
        "@google/markerclusterer""^1.0.3",
        "@google/markerclustererplus""^2.1.11",
        "@material/card""^0.37.1",
        "@progress/telerik-angular-report-viewer""^4.18.905",
        "@syncfusion/ej2""18.2.54",
        "@syncfusion/ej2-angular-buttons""18.2.54",
        "@syncfusion/ej2-angular-calendars""18.2.54",
        "@syncfusion/ej2-angular-charts""18.2.54",
        "@syncfusion/ej2-angular-dropdowns""18.2.54",
        "@syncfusion/ej2-angular-grids""18.2.54",
        "@syncfusion/ej2-angular-inputs""18.2.54",
        "@syncfusion/ej2-angular-layouts""18.2.54",
        "@syncfusion/ej2-angular-lists""18.2.54",
        "@syncfusion/ej2-angular-maps""18.2.54",
        "@syncfusion/ej2-angular-navigations""18.2.54",
        "@syncfusion/ej2-angular-notifications""18.2.54",
        "@syncfusion/ej2-angular-popups""18.2.54",
        "@syncfusion/ej2-angular-richtexteditor""18.2.54",
        "@syncfusion/ej2-angular-splitbuttons""18.2.54",
        "@types/googlemaps""3.30.18",
        "classlist.js""^1.1.20150312",
        "core-js""^2.6.5",
        "file-saver""^2.0.2",
        "html2canvas""^1.0.0-alpha.12",
        "jquery""^3.4.1",
        "jspdf""^1.5.3",
        "jwt-decode""^2.2.0",
        "rxjs""6.3.3",
        "zone.js""^0.8.29"
    },
    "devDependencies": {
        "@angular-devkit/build-angular""0.13.5",
        "@angular/cli""6.0.8",
        "@angular/compiler-cli""6.0.7",
        "@angular/language-service""6.0.7",
        "@types/file-saver""^2.0.1",
        "@types/jasmine""^2.8.16",
        "@types/jasminewd2""^2.0.6",
        "@types/node""6.14.4",
        "codelyzer""^4.5.0",
        "jasmine-core""~2.8.0",
        "jasmine-spec-reporter""~4.2.1",
        "karma""^4.0.1",
        "karma-chrome-launcher""~2.2.0",
        "karma-coverage-istanbul-reporter""^1.2.1",
        "karma-jasmine""~1.1.0",
        "karma-jasmine-html-reporter""^0.2.2",
        "protractor""^5.4.2",
        "ts-node""~4.1.0",
        "tslint""~5.9.1",
        "typescript""2.7.2"
    }

Sujith Kumar Rajkumar [Syncfusion]
Replied On October 8, 2020 11:56 AM UTC

Hi Shamil, 
 
Due to some technical difficulties, the weekly patch scheduled to be rolled out on October 7th 2020 was not released. So, we have postponed the patch release to next week and the fix for this bug will be included in that patch. We apologize for the inconvenience caused and appreciated your patience until then. 
 
So for now please use the previously suggested approach of defining the filterItemTemplate directly below the required column to resolve the problem. 
 
<ejs-grid #grid [dataSource]='data' [filterSettings]='filterSettings' allowFiltering='true'> 
    <e-columns> 
        <e-column field='isChecked' headerText='Is Checked' width='150'> 
            <ng-template #filterItemTemplate let-data>{{getFilterItemValue(data)}}</ng-template> 
        </e-column> 
    </e-columns> 
</ejs-grid> 
 
Note: For this approach please remove the code(from your shared code snippet) where the filter template is accessed and set to the columns filter property in the TypeScript file. 
 
Let us know if you have any concerns. 
 
Regards, 
Sujith R 


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