Template Engine

[Abdul Mounem]

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"]

[Pavithra Subramaniyam]

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

[Abdul Mounem]

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

[Pavithra Subramaniyam]

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

[Abdul Mounem]

Hi,

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

[Pavithra Subramaniyam]

Hi Abdul Mounem,

Welcome!

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

Regards,

Pavithra S