Scope of "this" for column templates

[Alan]

Very surprised I couldn't find more information on this. Most grid libraries allow direct js functions for their column renders. In the case of Kendo UI it must be a string template, which is quite limiting. The problem I am currently facing is this:

// Inside my view
config: {
  a: "A",
  b: "B"
},

foo: function(data) {
  return this.config[data.config];
},

initGrid: function() {
  this.ui.grid.kendoGrid({
    columns: [{
      title: "Column A",
      field: "columnA",
      template: "#= this.foo(data) #"
    }]
  });
}

I have no way to access a member method in my template. This is crazy limiting. ANY of the following scenarios would be workable:

// Direct function access
template: this.foo

// Set scope of template execution
template: { template: "#= this.foo(data) #", scope: this }

// Templates always executed in scope they are defined in
template: "#= this.foo(data) #"  // Just works

The current requirement that only global methods can be called is severe (not to mention a terrible practice). Please advise on how to circumvent this limitation.

[Alexander Valchev]

Hi Alan,

By default the context of Kendo template is the global window object. If you want to change the content of a template you can use jQuery proxy.
For example:

template: { template: $.proxy(kendo.template("#= this.foo(data) #"), { foo: "bar" }) }

Actually you can also use direct function access (because kendo.template actually compiles a JavaScript function).

For example:

<div id="grid"></div>
<script>
    var foo = {
        bar: function(data) {
            return data.name + "_format";
        },
        baz: function() {
            $("#grid").kendoGrid({
                dataSource: {data:[{name: "One"}, {name: "Two"}]},
                columns: [
                { field: "name" },
                { template: this.bar }
                ]
            });
        }
    };

    foo.baz();
</script>

Regards,
Alexander Valchev
Telerik

 

 

[Alan]

Excellent news! Thanks for the clarification, there is no mention of direct function access in the docs. Would nice to have them updated.