4

On this website--Kendo UI's Autocomplete widget documentation--there's a piece of code that I only partly understand.

$(document).ready(function() {
var autocomplete = $("#customers").kendoAutoComplete({
    minLength: 1,
    dataTextField: "ContactName",
    headerTemplate: '<div class="dropdown-header">' +
            '<span class="k-widget k-header">Photo</span>' +
            '<span class="k-widget k-header">Contact info</span>' +
        '</div>',
    template: '<span class="k-state-default"><img src=\"../../content/web/Customers/#:data.CustomerID#.jpg\" alt=\"#:data.CustomerID#\" /></span>' +
              '<span class="k-state-default"><h3>#: data.ContactName #</h3><p>#: data.CompanyName #</p></span>',
    dataSource: {
        transport: {
            read:{
                dataType: "jsonp",
                url: "http://demos.telerik.com/kendo-ui/service/Customers"
            }
        }
    },
    height: 370,
}).data("kendoAutoComplete");
});

Here's what I do understand: this is a standard Autocomplete control that uses templates to make the widget look a little better. I understand how templates work (mostly), and I get that putting it in a .ready() function causes it to be run when the DOM has loaded.

What I don't understand is the need for jQuery's .data() function at the end. Why is it there? I tried to make sense of the jQuery documentation, but it appears that there's something deeper going on. The variable autocomplete is not used in the rest of this code sample, so I wonder if this is a mistake on Kendo's part.

The .data() function attaches arbitrary data to DOM elements. To what extent does Kendo use this arbitrary data?

Lincoln Bergeson
  • 3,301
  • 5
  • 36
  • 53

1 Answers1

4

In your example you don't need it since you are actually no longer using autocomplete.

As you say, jQuery data function attaches arbitrary data to DOM elements, that's exactly what KendoUI does when creates any Widget: any data that is needed, is attached to the DOM element associated to the widget so if in the future you need to do some operation with the widget, you can get a reference to it using data.

Example: You create a Kendo Window, and the user can close it (which does not mean destroy it, simply hides it). If in the future you need to open it, you simply do $("#win-id").data("kendoWindow").open(). If you need to do many operations with that window, instead of having to execute $("#win-id").data("kendoWindow") each time you might do:

var myWindow = $("#win-id").data("kendoWindow");

but sometime you do it when creating it:

var myWindow = $("#win-id").kendoWindow({}).data("kendoWindow");

Which means that you create a kendoWindow attached to a DOM element which id is win-id and then you get a reference to it by executing .data("kendoWindow") on it.

In the code that you show, this is basically what they do: create an autocomplete and get a reference to it for future use.

OnaBai
  • 40,767
  • 6
  • 96
  • 125
  • 1
    From a design perspective, why do you think Kendo didn't make the .kendoWindow() function (or .kendoGrid() or .kendoAutocomplete() or whatever) return a reference for later use in the first place? – Lincoln Bergeson Mar 12 '14 at 22:03
  • Its a pretty common pattern in jQuery where methods return a reference to themselves. – OnaBai Mar 12 '14 at 22:12
  • Exactly, so why don't Kendo methods return a reference to the element in question as well? – Lincoln Bergeson Mar 12 '14 at 22:14
  • When I say a reference to the element I mean to the jQuery element that it refers to so you can concatenate jQuery methods with others. Ex: `$(".number").kendoNumericTextBox({}).addClass("text-green")` creates multiple `kendoNumericTextBox` in a single call and then add some CSS style to _all_ of them. – OnaBai Mar 12 '14 at 22:24
  • Gotcha, and if Kendo returned a reference by default you wouldn't be able to chain functions like that? – Lincoln Bergeson Mar 12 '14 at 22:28