css class and a new div to each node of the treeview draggable

[Farfetch.com]

This is my tree javascript:

  $("#treeview-left").kendoTreeView({
                    dragAndDrop: true,
                    dataSource: [
                        { text: "Furniture", expanded: true, items: [
                            { text: "Tables & Chairs" },
                            { text: "Sofas" },
                            { text: "Occasional Furniture" }
                        ] },
                        { text: "Decor",expanded: true, items: [
                            { text: "Bed Linen" },
                            { text: "Curtains & Blinds" },
                            { text: "Carpets" }
                        ] },

                        { text: "Shoes", expanded: true, items: [
                            { text: "YVES SAINT LAURENT" },
                            { text: "LUXE" },
                            { text: "249" },
                            { text: "GeoBlock" },
                            { text: "LUXE" },
                            { text: "Categoryid" },
                            { text: "CategoryName" },
                            { text: "ParentCategoryid" },
                            { text: "Name" },
                            { text: "Color" },
                            { text: "Thumbnailurl" },
                            { text: "Rolloverurl" },
                            { text: "Designername" },
                            { text: "Department" },
                            { text: "GenderID" },
                            { text: "Travel Tailoring" },
                            { text: "Lab Designers" },
                            { text: "Boots" },
                            { text: "Belts" },
                            { text: "Accessories" },
                            { text: "Espadrilles" },
                        ] }


                    ]
                });

            });
            </script>

i need to add a div with a color and a checkbox to each item of the tree is this possible?


Thanks!

[Iliana Dyankova]

Hello,

You could add CSS class to the TreeView's items using jQuery. As an example:

$(".k-item").addClass("someCustomClass");

As for the checkboxes - there is a checkboxes configuration option which can be used for this purpost. For working example take a look at this online demo.  Regards,
Iliana Nikolova
Telerik

[Farfetch.com]

is it possible to add a class just to some items of the tree not all of them?

Thanks for your answer!

[Iliana Dyankova]

Hello,

Yes, you could add a class only to some items - just specify the correct selector. For example: 

var treeView = $("#treeView").data("kendoTreeView");
var getNode = treeView.findByText("about.html");
$(getNode).addClass("someCustomClass");

The aforementioned code snippet will add "someCustomClass" class to each element which has "about.html" text.
 
Regards,
Iliana Nikolova
Telerik

[Rahul]

Hi lliana Nikolova,
I want to set the tree view node color based on the value configured in the datasource field, I also tried your suggestion even this I can not use in my case, but I failed with this sampel, will you please help me? I created the jsfiddle

http://jsfiddle.net/KendoDev/E4Ez7/

[Iliana Dyankova]

Hi Rahul,

When using template you should add the condition in this template (documentation link). For your convenience here is a simple example which demonstrates a possible implementation.

Regards,
Iliana Nikolova
Telerik