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
  1. Home
  2. Forum
  3. Angular - EJ 2
  4. Cannot define custom filter Template for Excel Filter type

Cannot define custom filter Template for Excel Filter type

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: 



15 Replies
DR Dhivya Rajendran Syncfusion Team 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 


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

DR Dhivya Rajendran Syncfusion Team 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  


NE Neo replied to Dhivya Rajendran 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.

DR Dhivya Rajendran Syncfusion Team 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  


NE Neo replied to Dhivya Rajendran 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>


PK Prasanna Kumar Viswanathan Syncfusion Team 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 


CS Cesar Smerling 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>


SK Sujith Kumar Rajkumar Syncfusion Team 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 


CS Cesar Smerling 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.

SK Sujith Kumar Rajkumar Syncfusion Team 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 


NE Neo replied to Shamil Rupasinghe 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?

SK Sujith Kumar Rajkumar Syncfusion Team 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 


NE Neo replied to Sujith Kumar Rajkumar 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> 
   &nbs