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
close icon

Template Engine

Hi,

I'm working with Grid to display data, I have an API endpoint that will return the data and the schema, so I'm building the columns at the run time, and for some columns, I have a template to display the data as a hyperlink, this is the template 

${if("' + fieldName + '")}<a rel='nofollow' href="#" class="entity-reference" style="color: inherit;" data-entity-name="${"' + fieldName + 'target"}" data-entity-id="${"' + fieldName + 'id"}">${"' + fieldName + 'name"}</a>${/if}

Now the problem is, for some columns that returned from the API, there is a dot in the field name, so once the template is parseing it will end up like this data.fieldname.fieldname, and it should be data["fieldname.fieldname"]


Is there a way I can tell the template engine not to add the data and I will insert it in my template as data["fieldname"]



5 Replies 1 reply marked as answer

PS Pavithra Subramaniyam Syncfusion Team November 3, 2022 07:08 AM

Hi Abdul Mounem,


Thanks for contacting Syncfusion support.


By default, the “data” will be added to the string interpolation while compiling. If you want to override this behavior, then we suggest the “Custom helper” function in which the data will be passed to the customer function and inside this function, you can return the required values. Please refer to the below code example and the sample link for more information.


{ field: 'CustomerName', template: '${customFunction(data)}', headerText: 'Customer Name', width: 150,},

 

window.customFunction = (args) => {

  console.log(args);

  return '<a rel='nofollow' href="#">hi</a>';

};

 


Sample               : https://stackblitz.com/edit/f3awyf?file=index.js


Please get back to us if you need further information.


Regards,

Pavithra S



AM Abdul Mounem November 3, 2022 07:55 AM

Hi,

The problem is, i don't know the column name, as this value is in the run time, so the function should be like this

{ field: 'CustomerName', template: '${customFunction(data,"fieldName")}', headerText: 'Customer Name', width: 150,},

 

window.customFunction = (args, fieldName) => {

  console.log(args);

  return '<a rel='nofollow' rel='nofollow' href="#">hi</a>';

};

 

but once I tried it, it will throw an error



PS Pavithra Subramaniyam Syncfusion Team November 7, 2022 01:56 AM

Hi Abdul Mounem,


You can get the field name from the argument of the custom helper function “data.column.field”. Please refer to the below screenshot and sample link for more information.



https://stackblitz.com/edit/f3awyf-xuqntp?file=index.js


please get back to us if you need further assistance on this.


Regards,

Pavithra S


Marked as answer

AM Abdul Mounem November 7, 2022 02:55 AM

Hi,

Thanks a lot for the solution, I didn't notice that the column will be inside the passed object



PS Pavithra Subramaniyam Syncfusion Team November 8, 2022 01:17 AM

Hi Abdul Mounem,


Welcome!


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


Regards,

Pavithra S


Loader.
Live Chat Icon For mobile
Up arrow icon