Grid template function performance

4 posts, 1 answers
  1. Anna
    Anna avatar
    64 posts
    Member since:
    Jul 2015

    Posted 14 Jun 2017 Link to this post

    Hi Telerik folk,

    Once upon a time, I stumbled upon on an undocumented "feature" - Kendo Grid template take javascript function as value. e.g:

    {
        // taking function as value
        template: function(data) {
            return "Name: " + data.name;
        },
        // string template
        template: "Name: #: name#",
    }

    I vaguely remember reading somewhere (in this forum?) there is a performance different between passing a function to template option vs passing string version. Can you confirm that? If so, how (is it memory usage? CPU? rendering time?) and why? We are finding this "template function" to be very convenient and want to use it more, but want to know if and what price we pay for it.

    Thanks you.

  2. Stefan
    Admin
    Stefan avatar
    2880 posts

    Posted 16 Jun 2017 Link to this post

    Hello Anna,

    In general, both methods will be almost identical in terms of performance.

    A difference may occur when using a function because the function itself may contain other operations as looping through a collection or making additional calculations.

    I made an example demonstrating the performance, and in the console can be observed that the dataBound is at the same time for both Grids. Please have in mind that visually one of the Grids will be rendered first as this depends on the order they are initialized in the code:

    http://dojo.telerik.com/Ineqo

    Also, the function option is already documented:

    http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-columns.template

    Regards,
    Stefan
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Anna
    Anna avatar
    64 posts
    Member since:
    Jul 2015

    Posted 16 Jun 2017 in reply to Stefan Link to this post

    Thanks for replying. Good to hear there's no significant difference. So just to make sure I'm understanding you correctly, if I perform the same operation through the 3 method below, will there be any difference between them? 

    // v1. using kendo expression
    template: "#for (var i=0,len=KeyPairs.length; i<len; i++){#" +
            "<li>#: KeyPairs[i] #</li>" +
    "# } #"
     
    // v2. using function directly
    template: this.buildListItems,
     
    // v3. use angularJs binding
    template: "{{ctrl.buildListItems(dataItem)}}"
     
    var buldListItems = function (data) {
        var template = "";
        for (var i=0,len=data.KeyPairs.length; i<len; i++) {
            template += "<li>" + data.KeyPairs[i] + "<li>";
        }
        return template;
    }

     

    I image angular expression (3rd version) is probably less optimized than the other two, since it introduce extra angular binding? Lastly, I read here Kendo has done much optimization to the template, does this also apply when we pass function as template value?

  4. Answer
    Stamo Gochev
    Admin
    Stamo Gochev avatar
    208 posts

    Posted 20 Jun 2017 Link to this post

    Hello Anna,

    You are correct about your assumptions - v1 and v2 have similar performance results in most cases, whereas v3 is supposedly less optimal as AngularJS functionality is involved.

    On the other hand, the different approaches provide convenience over performance, i.e. v3 might be slower, but it is a lot more convenient to take advantage of the AngularJS integration, so the exact approach depends on the requirements of the project.

    Regards,
    Stamo Gochev
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top