Adding custom data attrubutes

4 posts, 0 answers
  1. Steven
    Steven avatar
    2 posts
    Member since:
    Jul 2017

    Posted 02 Aug Link to this post

    Is there a way to add a custom data attribute to a field and give it the value of another field?

    Something like this:

    $("#treelist").kendoTreeList({
                   
                    columns: [
                        {
                            field: "Index",
                            attributes: {
                                "data-WorkpaperGuid": data.WorkpaperGuid
                            }
                        },
                        { field: "Name" }
                    ],
                    dataSource: dataSource
                });

  2. Stefan
    Admin
    Stefan avatar
    1145 posts

    Posted 04 Aug Link to this post

    Hello Steven,

    The desired result can be achieved using the columns.template property. This will allow setting a custom element in the cell and modifying its attributes and their values:

    http://docs.telerik.com/kendo-ui/api/javascript/ui/treelist#configuration-columns.template

    http://dojo.telerik.com/UgIni

    The result is:



    I hope this is helpful.

    Regards,
    Stefan
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Steven
    Steven avatar
    2 posts
    Member since:
    Jul 2017

    Posted 04 Aug in reply to Stefan Link to this post

    This does not solve my problem. I don't want to add additional elements. The templates only seem to modify what is within the tag. I want to add an attribute to the Index tag and give it a value that is not fixed but the value of another property field.
  4. Stefan
    Admin
    Stefan avatar
    1145 posts

    Posted 08 Aug Link to this post

    Hello Steven,

    Currently, the Kendo UI TreeList supports add dynamic values using the template property.

    Custom attributes can be added to the cells directly, but this will allow setting only static values as that property does not have access to the row data as the template does:

    http://docs.telerik.com/kendo-ui/api/javascript/ui/treelist#configuration-columns.attributes

    Still, I can suggest another custom approach to add a custom class, and then on the dataBound event to select all elements using jQuery and to append the desired custom attribute to them:

    http://docs.telerik.com/kendo-ui/api/javascript/ui/treelist#events-dataBound

    http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#methods-view

    Please refer to the runnable example demonstrating this:

    http://dojo.telerik.com/eLOte

    I hope this is helpful.

    Regards,
    Stefan
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top