How to set the scope of `this`on Kendo UI's autocomplete template?

Question

Kendo UI's template API lets you use JavaScript in the template. This is useful to customize the autocomplete template.

When the generated code runs, the scope of this is the Window object. I want to set the scope to the autocomplete instance, for example, to use the _prev value to customize the results.

On this demo code, to change the color of the customer's name to red on the substring equivalent to the search text, you can search for the autocomplete instance within the template code. On the given sample, just change the template property to

 template: 
    '<span class="k-state-default"><img src= \"../content/web/Customers/#:data.CustomerID#.jpg\" alt=\"#:data.CustomerID#\" /></span>' +
    '<span class="k-state-default">'+
    '# var searchText= $("\\#customers").data("kendoAutoComplete")._prev; #'+
    '# data.coloredName= '+
        '"<span style=\\"color:red;\\">"  '   +
         '+ data.ContactName.substring(0, searchText.length) +'   +
         '"</span>" + data.ContactName.substring(searchText.length);  #'+
        '<h3>#= data.coloredName #</h3>'+
        '<p>#: data.CompanyName #</p>'+
    '</span>',

However, if I can't use the $() "search", I would want to do it by setting the scope of the function generated by the template. Is it possible?

Unless you are in full charge of the calling code, `this` will be whatever it is. Your best bet is probably to keep a reference to the autocomplete instance somewhere in scope of the code you are trying to write. — Roamer-1888, Feb 24 '15 at 01:08
Keeping a reference on the `Window` object is not desirable, since my case is a reusable component. — Ricardo, Feb 24 '15 at 22:46
By default, the scope of the `this` is the `Window` object and the only object available during template generated code execution is the `data`, which refers to each item of the autocomplete `dataSource`. None of them are good places to store a reference to the `autocomplete` instance. — Ricardo, Feb 25 '15 at 16:12
I think you misunderstand the term "scope", which is not a synonym for "this". Anyway I won't labour it as you have accepted an answer which is broadly along the line of what I had in mind. — Roamer-1888, Feb 25 '15 at 16:51
I didn't, though! Maybe I should have clarified that, besides `this`, the other objects available at the scope of the function call were not desirable to store a reference to the `autocomplete` instance. — Ricardo, Feb 25 '15 at 17:08

score 1 · Accepted Answer · edited May 23 '17 at 10:24

1

It is possible:

var autocomplete = $("#customers").kendoAutoComplete({
   // standard options, not the template
}).data("kendoAutoComplete");

var templateHtml = 'your template html using "this" here ...';
// compile the template from the html
var compiledTemplate = kendo.Template.compile(templateHtml);
// bind the template function to whatever you want, e.g. the autocomplete
var boundTemplate = compiledTemplate.bind(autocomplete);
//  set the template on the widget
autocomplete.setOptions({
    template: boundTemplate
});

(demo)

Note that any properties you may have on the context will get overridden by the data that is passed to the template, so you can't access those from the outer scope (see structure of the template function here).

edited May 23 '17 at 10:24

Community

1
1

answered Feb 24 '15 at 02:01

Lars Höppner

18,252
2
45
73

I [updated the demo](http://dojo.telerik.com/ERuwE) based on your solution, to get the search text from the `this` reference to the `autocomplete` object, instead of `$("\\#customers").data("kendoAutoComplete")`. But your solution is correct. Thanks! – Ricardo Feb 24 '15 at 22:39
right, I didn't pay attention to that; glad I could help – Lars Höppner Feb 25 '15 at 00:23

How to set the scope of `this`on Kendo UI's autocomplete template?

1 Answers1