Call function inside template

[Patrick]

Hi there!

We are using NPM and webpack to build own apps. All still working except when we try to call any required function from the template string due the scope of that.

How can we call foo function in this example?

<p>import { foo } from "../utilities/foo";<br></p><p>let template = require("html!../../templates/details/research-detail-template.html");<br></p><p>$('#onlineshop-orders-grid').kendoGrid({<br>   dataSource: dataSrc,<br>       height: fullHeight,<br>       sorteable: true,<br>       pageable: true,<br>       columnMenu: true,<br>       selectable: 'multiple, row',<br>       allowCopy: { delimeter: ';' },<br>       filterable: { mode: "row" },<br>          rowTemplate: kendo.template( template )</p><p>});<br></p>

And the template contains: <button onclick="foo()">Foo plz!</button>

(if I declare the function as global.foo works... but don't want do that)

[Patrick]

We are using NPM and webpack to build our apps. 

Imagine a grid with a rowTemplate in a separate file. When I try to run a function from the template I get an "undefined myFunction" error. Could you help me setting that up?

main.js

require('./pages/component.js');

 

component.js

function myFunction() {
    alert('test');
}

$('#grid').kendoGrid({
    dataSource: [
        {id: 1, name: 'John Doe'}
    ],
    height: 800,
    rowTemplate: '<div onclick="myFunction()">Test</div>',
});

[Dimo]

Hi Patrick,

The question does not seem to be directly related to Kendo UI, but I will leave the thread open, in case anyone from the community would like to comment.

For example, in the first post, the Grid should be initialized after the contents of research-detail-template.html is loaded, otherwise the template variable used by the rowTemplate property will be undefined.

Regards,
Dimo
Telerik by Progress

[vijay]

Hi Patrick,

I am also getting the same problem in React. Do you get any solution for this problem?

Please let me know.

Thanks.