CODEWITHSUNDEEP
javascriptkendo-ui
Andrew Savinykh
Andrew Savinykh

Reputation: 26290

What scope kendo templates are executed in?

I have a kendo template like this:

<script id="rowTemplate" type="text/x-kendo-tmpl">
        <tr data-uid="#: uid #" role="row">
        <td role="gridcell">#= kendo.toString(kendo.parseDate(WhenDate, 'yyyy-MM-dd'), 'dd MMM yyyy') #</td>
        <td role="gridcell">#= Activity #</td>
        <td role="gridcell">#= Description #</td>
        <td role="gridcell">#if (isButtonShown(Activity)){# #= editTemplate # #}#</td>
        <td role="gridcell">#if (isButtonShown(Activity)){# #= delTemplate # #}#</td>
        </tr>
</script>

You can see that it calls isButtonShown function. The only way I can make this work is by putting isButtonShown function in the global scope, which I, obviously, want to avoid. Where can I define this function so that it's available when the template is compiled (apart from the global scope)?

Same question applies to editTemplate and delTemplate, those are also currently defined globally so they are visible to the template.

WhenDate, Activity and Description all are properties of entities that come from the data source the kendo grid is bound to.

Here is how the tempalate is referenced in javascript:

$("#grid").kendoGrid({
    rowTemplate: kendo.template($("#rowTemplate").html()),
    ....

Upvotes: 4

Views: 1842

Answers (2)

CodingWithSpike
CodingWithSpike

Reputation: 43718

You can test this yourself with this code in the console:

kendo.template('#debugger#')({x:1});

Then your browser should break into the compiled template function, which looks like this:

(function(data
/**/) {
var o,e=kendo.htmlEncode;with(data){o='';debugger;o+='';}return o;
})

When your template runs, data is the passed in object {x:1} and this is window.

The easiest thing to do is make your function accessible to global scope, but maybe put it in a namespace object, like app.utils.isButtonShown

Though understandably you probably don't want to pollute global scope. Your object passed in as data (the items displayed in your grid) are probably in a DataSource so you might be able to call .parent() repeatedly to traverse up the observable hierarchy. That might get you to someplace where you can add your function.

Upvotes: 3

JFlox
JFlox

Reputation: 708

I'm not sure that is possible other than putting it in the global scope.

Could you instead loop through your data before binding it to the grid and set a property 'isButtonShown' based on the Activity? Then it would just be a matter of checking property in your template rather than calling a function.

Upvotes: 0

Related Questions