Call function inside template

3 posts, 0 answers
  1. Patrick
    Patrick avatar
    2 posts
    Member since:
    Aug 2016

    Posted 14 Sep Link to this post

    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)

  2. Patrick
    Patrick avatar
    2 posts
    Member since:
    Aug 2016

    Posted 14 Sep Link to this post

    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>',
    });
  3. Kendo UI is VS 2017 Ready
  4. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 16 Sep Link to this post

    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
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
Back to Top