Explanation of data-role attribute

Thread is closed for posting
5 posts, 0 answers
  1. Gary
    Gary avatar
    62 posts
    Member since:
    Sep 2013

    Posted 16 Apr 2012 Link to this post

    I keep coming across usage of the data-role attribute, but I can't find any documentation that explains what it is for and how to use it. Can you help?
  2. Petyo
    Admin
    Petyo avatar
    2444 posts

    Posted 18 Apr 2012 Link to this post

    Hello,

    You can find a thorough explanation of the supported data attributes in our documentation (Declarative widget initialization based on data attributes).
     
    Regards,
    Petyo
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Hans
    Hans avatar
    6 posts
    Member since:
    May 2012

    Posted 26 Mar 2013 Link to this post

    Hello,

    The link provided by Petyo in April 2012 now points to a general explanation of widgets but does not explain the "declarative widget initialization based on data attributes".  I was not able to find this topic elsewhere in the documentation.  Please post an updated link here.

    As a side note, Telerik could improve the quality of the Kendo UI (Mobile) documentation dramatically by adding basic topics like the one mentioned above as a subtopic in the relevant section.  Currently, the Mobile section for both the API Reference and the "Getting Started" is still limited to only the controls.

    The lack of clear and comprehensive documentation is the biggest hurdle in developing with Kendo UI; and it is impacting an otherwise fantastic product.

    Thank you,
    Hans
  4. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 27 Mar 2013 Link to this post

    Hello Hans,

     Information about the data-role attribute can be found here: http://docs.kendoui.com/getting-started/data-attribute-initialization#example---initialize-a-kendo-ui-widget-using-a-data-attributes

     Here is a quote:

    The value of the role data attribute is the name of the widget in lower case e.g. "autocomplete", "dropdownlist" etc.


     Could you please elaborate on the following "As a side note, Telerik could improve the quality of the Kendo UI (Mobile) documentation dramatically by adding basic topics like the one mentioned above as a subtopic in the relevant section."  

    Which topic do you refer to and what is the relevant section?

    Regards,
    Atanas Korchev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. Arshad
    Arshad avatar
    1 posts
    Member since:
    Apr 2013

    Posted 25 Apr 2013 Link to this post

    Hello,

    Is there any place in your documentation that provides a complete list of custom "data-xxxxx" attributes. I have looked at the Kendo Music Store hybrid application -- the index.html is peppered with data-this and and data-that but I cannot find their explanation of the following at the central place in the documentation. I can guess what each attribute is being used but it is very risky. Specifically, I do not know:

    1.  not knowing what other custom data attributes and events are out there
    2.  what are the possible values of each attribute or event
    3. what is the expected behavior if for a ul element the data-role="indexedlistview" or data-role="listview"? And how do the li elements get inserted even though the template associated with the view does not include it? For example, lets look at segments of index.html in the Kendo Music Store for the Kendo Mobile:

            <div data-role="view" id="genres-view" data-layout="home-layout" data-title="Genres" data-model="app.genresView.viewModel" data-show="app.genresView.onShow">
                <ul data-role="listview" data-bind="source: genres" data-template="genre-list-template", data-style="inset"></ul>
            </div>
    ...
            <script id="genre-list-template" type="text/x-kendo-template">
                <a href="\#albums-view?field=GenreId&operator=eq&value=#=GenreId#&title=#:encodeURIComponent(Name).replace("'", "%27")#">#=Name#</a>
            </script>

    Trust me, I have tried to read the some of the JS code to get my head around this but most of these files are minified.  I thank you in advance for responding.

Back to Top