How to call Angular custom function in ej2 grid column filter itemTemplate

[Timothy Pang]

Hi

In the filter of grid column, I'd like to show another values instead of the column data. The code snippet is shown below:

xxx.component.html

<ejs-grid #grid [dataSource]='data' allowFiltering='true'  [filterSettings]='filterSettings'>
...
     <e-column field='operatorName' [valueAccessor]="getTranslate" [allowEditing]='false' [filter]='filter'>
...
</ejs-grid>

xxx.component.ts

...
ngOnInit(): void {
   this.filterSettings = { type: 'Excel' };
   this.filter = { itemTemplate: '<div>${getValue(operatorName)}</div>' };
}

public getValue = (data: Object) => {
        return (data as any).operatorName !== undefined ? this.localizationService.getTranslation((data as any).operatorName) : "Select All");
}

But an error occurred when the Excel filter is open. The error message is "ReferenceError: getValue is not defined"

How can I call getValue in itemTemplate? Thanks!!

[Venkatesh Ayothi Raman]

Hi Timothy, 

Thanks for contacting Syncfusion support. 

We have validated the reported issue and We have confirmed “Using Angular services to replace display values in excel filter(filterItemTemplate)” as a bug and the fix for this issue will be available in our upcoming patch release.  

 

Please use the following workaround until then.  

 

 

Code example: 

 

[app.comoponent.html] 

 

<ejs-grid #grid [dataSource]='data' [allowFiltering]='true' [filterSettings]='filterSettings'> 

        <e-columns> 

            <e-column field='EmployeeID' headerText='Employee ID' width='125' textAlign='Right'></e-column> 

 

            <e-column field='FirstName' headerText='First Name' width='120'></e-column> 

            <e-column field='Title' [valueAccessor]='valueAccess' [filter]='filter' headerText='Title' width='170'></e-column> 

        </e-columns> 

 

    </ejs-grid> 

 

 

[app.component.ts] 

 

   . . . 

        export class FilteringMenuComponent implements OnInit { 

    . . . 

     public filter: IFilter; 

 

 

 

    @ViewChild('grid') 

    public grid: GridComponent; 

 

    ngOnInit(): void { 

      . . . 

        this.filterSettings = { type: 'Excel' }; 

         this.filter = { itemTemplate: '#temp' }; 

 

    } 

. .  . 

 

    } 

 

  } 

 

 

[Index.html] 

 

<script id='temp' type='text/x-template'> ${getValue(data)}</script> 

    <script> 

        function getValue(data) { 

 

            var val; 

            if (data['Title'] != undefined) { 

                if (data['Title'] === "Select All") { 

                    val = "Select All"; 

                } 

else{ 

         // change your  value here 

           val = data['Title']+" "+"custom"; 

         } 

                return val 

            } 

        } 

 

    </script> 

 

 

 

 

Sample :  https://stackblitz.com/edit/angular-tdtxry-48dfk5?file=index.html 

 

 

Please let us know if you have any further assistance on this. 

 

 

Regards, 

Venkatesh Ayothiraman. 

[Timothy Pang]

Hi Venkatesh,

Thanks for your response.

But you workaround cannot help me much. Hope that Syncfusion can release the patch as soon as possible. Wait for the patch.

[Hariharan J V]

Hi Timothy , 

 

Thanks for your update. 

 

We will let you know once the patch release done for the issue “Using Angular services to replace display values in excel filter(filterItemTemplate)”. Until we appreciate your patience. 

 

Regards, 

Hariharan