Grid template function performance

[Anna]

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.

[Stefan]

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

[Anna]

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?

[Stamo Gochev]

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