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

How to use a global function on a data field in template?

Thread ID:





142628 Feb 12,2019 06:22 PM UTC Feb 14,2019 10:44 AM UTC JavaScript - EJ 2 5
Tags: AutoComplete
Asked On February 12, 2019 06:22 PM UTC


I have an ESJ2 AutoComplete control that looks like this:

let search = new AutoComplete({
    dataSource: searchData,
    floatLabelType: 'Auto',
    highlight: true,
    fields: { value: 'name', groupBy: 'atomType' },
    groupTemplate: "<strong>${atomType}</strong>"

name and atomType are fields sent back by the data source. this works fine.
But if I change groupTemplate by this:

    groupTemplate: "<strong>${translate(atomType)}</strong>

with 'translate' being a function defined at window level (it works fine when I call translate('blablah') from chrome console for example), then it doesn't work any more (I get a Request failed).

I've also tested this

    groupTemplate: "<strong>${translate(${atomType})}</strong>

But none works.

So what's the good syntax to call a global window function on a field from a template?


Prince Oliver [Syncfusion]
Replied On February 13, 2019 10:58 AM UTC

Hi Simon, 

Thank you for contacting Syncfusion support. 

We have checked your requirement to use a global function on a data field in template. You can call the function in template ${translate(data.Category)}, by passing the argument without using “$”. Kindly refer to the following code snippet. 

(window as any).translate = function (str: string) { 
    return str.toUpperCase(); 
let groupList: AutoComplete = new AutoComplete({ 
    dataSource: (data as any).vegetableData, 
    fields: { groupBy: 'Category', value: 'Vegetable' }, 
    placeholder: 'Select vegetables', 
    groupTemplate: '<strong>${translate(data.Category)}</strong>' 

Kindly refer to the following link for the sample: https://stackblitz.com/edit/d8xixa-wkftt2  

For further reference, please check the following UG documentation: https://ej2.syncfusion.com/documentation/common/template-engine/#custom-helper  

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


Replied On February 13, 2019 11:11 AM UTC


Ah, I was missing the "data." prefix. FYI, I don't think this is mentioned anywhere in the documentation.

Thanks a lot!

Prince Oliver [Syncfusion]
Replied On February 14, 2019 10:25 AM UTC

Hi Simon,  

Thank you for your update.  

We have validated the reported issue in our end and we are considering this as a defect with the Template Engine. The fix for the issue will be included in our 2019, Volume 1 main release scheduled on the mid of March 2019. You can now track the current status of your request, review the proposed resolution timeline, and contact us for any further inquiries through this link: https://www.syncfusion.com/feedback/4799/  

Meanwhile you can use the solution provided in the previous update. Once the issue fixed, you will be able to provide directly without prefixes. Please let us know if you need any further assistance on this. 

Replied On February 14, 2019 10:36 AM UTC

Does this mean this will break my code when I update?

Anyway, thanks very much.

Prince Oliver [Syncfusion]
Replied On February 14, 2019 10:44 AM UTC

Hi Simon, 

Thanks for the update. 

Yes, once you have updated to 2019 Volume 1 release. you need to remove the prefix solution and give the field directly as before. 



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