CODEWITHSUNDEEP
javascriptkendo-uiasp.net-mvc-5kendo-gridkendo-asp.net-mvc
pwdst
pwdst

Reputation: 13755

Kendo UI for loop in grid column template causing infinite loop

I have a ajax bound Kendo UI grid where I am building a select list in a client template using code like-

<select name='@propertyName' required='@required'>
# for (var t = 0, length = 7; t < length; t++) { 
console.log(t); 
} #</select>

This is obviously not the finished template, but a stripped down test case to bug fix an apparent infinite loop when rendering the grip which is causing the browser tab to crash (and/or be caught and stopped by the tab manager - depending on the browser used). The value of "t" as shown in the console will continue to increment indefinitely, even with a hardcoded length value as shown here.

The string is assigned as a C# string to the ColumnSettings ClientTemplate string property within a BoundColumnContainer (as we need to order the grid columns based on user preferences). It is intact (with the ++ in place) after assignment and at the point the method exits (returning a Kendo UI GridBuilder object).

The issue appears to be that the plus plus operator is being stripped out on the client when the template is decoded, leaving the code-

<select name='TemplateId'>
# for (var t = 0, length = 7; t < length; t  ) { 
console.log(t); 
} #</select>

This was extracted from the column object using the Firefox dev tools after stopping the script when it stopped responding (failed to exit from the loop in a timely manner).

Clearly the missing plus symbols are not incrementing the variable, and this is going to result in the loop never exiting, which is consistent with what is happening here. The encoded template is as follows in the Fiddler trace-

{"title":"Template","width":"166px","template":"\u003cselect 
name=\u0027TemplateId\u0027\u003e# for (var t = 0, length = 7; t \u003c length; 
t  ) { console.log(t); } #\u003c/select\u003e",
"field":"TemplateId","filterable":{},"encoded":true}

Note that the ++ is already missing here.

Can anyone suggest how I can include the ++ in the template without it being removed in the encoding process?

For bonus points, why does it appear that the t variable is being incremented when console.logging it within the loop?

Upvotes: 1

Views: 1593

Answers (1)

Sebazzz
Sebazzz

Reputation: 1373

I have found a solution. Simply define a Javascript function elsewhere:

function increment(n) {
    return n + 1;
}

Then use it in your template:

# for (var i = 0; i < data.Componenten.length; i = increment(i)) { #

It is ridiculous of course, but it is the only way.

Upvotes: 1

Related Questions