What purpose does jQuery's .data() function serve in the Kendo UI?

Question

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?

Answer 1

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.