This is a migrated thread and some comments may be shown as answers.

Grid template function performance

3 Answers 1146 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Anna
Top achievements
Rank 1
Anna asked on 15 Jun 2017, 01:12 AM

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.

3 Answers, 1 is accepted

Sort by
0
Stefan
Telerik team
answered on 16 Jun 2017, 10:40 AM
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.
0
Anna
Top achievements
Rank 1
answered on 16 Jun 2017, 05:04 PM

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?

0
Accepted
Stamo Gochev
Telerik team
answered on 20 Jun 2017, 11:38 AM
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.
Tags
Grid
Asked by
Anna
Top achievements
Rank 1
Answers by
Stefan
Telerik team
Anna
Top achievements
Rank 1
Stamo Gochev
Telerik team
Share this question
or