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

[Simon]

Hi,

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?

Thanks,

[Prince Oliver]

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>' 

}); 

groupList.appendTo('#group'); 

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. 

Regards, 

Prince 

[Simon]

Hi,

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

Thanks a lot!

[Prince Oliver]

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. 

       

Regards, 

Prince 

[Simon]

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

Anyway, thanks very much.

[Prince Oliver]

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. 

Regards, 

Prince