Widget data- attribute documentations

[Chico]

Hi,

Where can I get/find a documentation for the usable data- attributes for all the widgets?

Thank you!

[Bart]

http://docs.kendoui.com/getting-started/framework/mvvm/bindings/attr

This lists all of the binding attributes, but does not cover things like data-role, data-target, and etc. It would be nice to have one list of everything. I'm interested in that as well.

[Kiril Nikolov]

Hello Bart,

You can read more about Data Attribute Initialization on the following link:

http://docs.kendoui.com/getting-started/data-attribute-initialization

The data attributes are the same as the configuration options that you can see in the API reference, but are converted using certain convention - camel-cased options are set via dash-separated attributes. For example, the ignoreCase option of the AutoComplete is set via data-ignore-case. You can check the API reference here:

http://docs.kendoui.com/api/mobile/listview
 
Regards,
Kiril Nikolov
Telerik

[Chico]

Thank you guys! :)

[Bart]

To make sure I understand, what you are saying is all three of these code samples are basically equivalent?

$("#myid").data("kendoMobileListView").setDataSource(dataSource);

<ul id="myid" data-role="listview" data-source="dataSource"></ul>

<ul id="myid" data-role="listview" data-bind="source: dataSource"></ul>

Can you explain the cases where it might be better to use one of these over the other, if there are cases? Also, can you expand on the difference between the last two examples?

[Kiril Nikolov]

Hi Bart,

I will go through each of the code samples an explain the differences:

$("#myid").data("kendoMobileListView").setDataSource(dataSource);

The above syntax is used to change the DataSource of an already initialized ListView. The most important thing here is that you already have an initialized widget with DataSource.

<ul id="myid" data-role="listview" data-source="dataSource"></ul>

This syntax is used to attach DataSource instance to ListView during the initialization of the widget. The DataSource must be defined as a global variable. This is equivalent to:

$("#listview").kendoMobileListView({
          dataSource: dataSource
        });

And the third case:

<ul id="myid" data-role="listview" data-bind="source: dataSource"></ul>

This example uses the MVVM design pattern, which means that you need to have dataSource defined as a field in the ViewModel. Also the View should be bound to a ViewModel via data-model attribute.

I hope that this information will be helpful, but if you have any further questions do not hesitate to contact us back.
 
Regards,
Kiril Nikolov
Telerik

[Bart]

This does help. Thanks.

Does only the last example automatically update the html when the datasource changes?

[Kiril Nikolov]

Hi Christian,

All of the widgets binded to an instance of a Kendo UI DataSource will update if there are changes in the DataSource.
 
Regards,
Kiril Nikolov
Telerik