Cannot define custom filter Template for Excel Filter type

[Neo]

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: 

https://ej2.syncfusion.com/angular/documentation/grid/filtering/?no-cache=1#excel-filter

[Dhivya Rajendran]

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. 

Video : https://www.syncfusion.com/downloads/support/directtrac/general/ze/filtertemplate_video1889464047.zip 

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.

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

                

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

Regards, 

R.Dhivya 

[Neo]

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.

[Dhivya Rajendran]

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" 

      } 

  } 

} 

 

Sample : https://stackblitz.com/edit/angular-filter-itemtemplate-excel?file=app.component.ts 

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

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

Regards, 

R.Dhivya  

[Neo]

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" 

      } 

  } 

} 

 

Sample : https://stackblitz.com/edit/angular-filter-itemtemplate-excel?file=app.component.ts 

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

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]

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]

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]

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, 

  

Feedback link: https://www.syncfusion.com/feedback/12006/filter-dialog-not-closes-when-using-column-template-and-itemtemplate 

  

Regards, 

Prasanna Kumar N.S.V 

[Cesar Smerling]

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]

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 7^th October 2020. Until then your patience is appreciated. 

 

You can track the status of this request through the below feedback link, 

 

Feedback link: https://www.syncfusion.com/feedback/18019/filteritemtemplate-in-column-through-console-error-in-angular  

 

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, 

 

Sample: https://stackblitz.com/edit/angular-filter-itemtemplate-excel-gudaow?file=app.component.ts  

 

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]

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]

Hi Cesar, 

You’re welcome. 

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

Regards, 

Sujith R 

[Neo]

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]

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 7^th 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, 

 

Sample: https://stackblitz.com/edit/angular-filter-itemtemplate-excel-ie4pvq?file=app.component.html  

 

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]

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 7^th 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, 

 

Sample: https://stackblitz.com/edit/angular-filter-itemtemplate-excel-ie4pvq?file=app.component.html  

 

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 fltemp: TemplateRef<{}>;

ngOnInit() {

    this.filterSettings = {

      type: 'Excel',

    };

    this.filter = { itemTemplate: this.fltemp };

  }

public getFilterItemValue(e: any) {

    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]

Hi Shamil, 

 

Due to some technical difficulties, the weekly patch scheduled to be rolled out on October 7^th 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