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

6 posts, 0 answers
  1. Farfetch.com
    Farfetch.com avatar
    4 posts
    Member since:
    Aug 2011

    Posted 07 Jun 2013 Link to this post

    This is my tree javascript:


    $(function() {

      $("#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!
  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2592 posts

    Posted 11 Jun 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Farfetch.com
    Farfetch.com avatar
    4 posts
    Member since:
    Aug 2011

    Posted 12 Jun 2013 Link to this post

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

    Thanks for your answer!
  5. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2592 posts

    Posted 14 Jun 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Rahul
    Rahul avatar
    2 posts
    Member since:
    Apr 2012

    Posted 01 Aug 2014 in reply to Iliana Nikolova Link to this post

    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/
  7. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2592 posts

    Posted 05 Aug 2014 Link to this post

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