Widget data- attribute documentations

8 posts, 2 answers
  1. Chico
    Chico avatar
    5 posts
    Member since:
    Jun 2013

    Posted 24 Jul 2013 Link to this post

    Hi,

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

    Thank you!
  2. Answer
    Bart
    Bart avatar
    11 posts
    Member since:
    Jul 2013

    Posted 24 Jul 2013 Link to this post

    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.
  3. Answer
    Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2596 posts

    Posted 25 Jul 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  4. Chico
    Chico avatar
    5 posts
    Member since:
    Jun 2013

    Posted 25 Jul 2013 Link to this post

    Thank you guys! :)
  5. Bart
    Bart avatar
    11 posts
    Member since:
    Jul 2013

    Posted 26 Jul 2013 Link to this post

    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?
  6. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2596 posts

    Posted 26 Jul 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  7. Bart
    Bart avatar
    11 posts
    Member since:
    Jul 2013

    Posted 26 Jul 2013 Link to this post

    This does help. Thanks.

    Does only the last example automatically update the html when the datasource changes?
  8. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2596 posts

    Posted 29 Jul 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top