Using DataSource to add data attributes

5 posts, 0 answers
  1. Matthias
    Matthias avatar
    20 posts
    Member since:
    Feb 2013

    Posted 21 May 2014 Link to this post

    I see that you can set the text and value of list items with dataValueField and dataTextField, but is there any way to set custom attributes with DataSource (ie: data-*)?
  2. Kiril Nikolov
    Kiril Nikolov avatar
    2596 posts

    Posted 23 May 2014 Link to this post

    Hi Matthias,

    In general you can create custom fields in the dataSource that you can access via the dataItem, however they are not directly related to the data attributes of the element, and this cannot be achieved out of the box. But as I am not really sure that I understand your question correctly, would it be possible to elaborate a bit more on this matter?

    Kiril Nikolov
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Bruce
    Bruce avatar
    14 posts
    Member since:
    Mar 2019

    Posted 10 Jul 2019 Link to this post

    I had the same question tonight and came across this post. So even though its a really old post, I'm going to answer it.

    You have to specify data_ instead of data- as part of the HtmlAttributes collection.

    So for example:

        .Content("Promote to Lead")
        .HtmlAttributes(new { type = "button", @class = "k-primary progress-button", data_label = "Lead Validation" })
        .Events(events => events.Click("onProgressClick"))

    Note the data_lead bit in the HtmlAttributes

    That will render at the below Html:

    <button class="k-primary progress-button" data-label="Lead Validation" id="btnProgressLeadValidation" type="button">Promote to Lead</button>


    Hope this helps someone.

  4. Dimitar
    Dimitar avatar
    481 posts

    Posted 12 Jul 2019 Link to this post

    Hi Bruce,

    Thank you for sharing this solution with the community.

    Best regards,
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  5. Jason
    Jason avatar
    2 posts
    Member since:
    Jun 2018

    Posted 08 Oct in reply to Bruce Link to this post

    This helped so much. I needed the data attribute and it wasnt clear how to add.
Back to Top