How to change Parent font of Kendo MVC treeview

5 posts, 0 answers
  1. Arun
    Arun avatar
    15 posts
    Member since:
    Oct 2014

    Posted 11 Nov 2015 Link to this post

    I am using Kendo MVC Treeview.

    How can I change font for all parents that has child nodes.

    Thank You.

  2. Arun
    Arun avatar
    15 posts
    Member since:
    Oct 2014

    Posted 13 Nov 2015 in reply to Arun Link to this post

    Want to add that I tried following based on answer I got from SO. but it's still not working.

     .k-treeview span.k-icon ~ span.k-in { font-weight: bold;}

     Here are my sample tree nodes

     <div class="k-mid"><span class="k-icon k-minus" role="presentation"></span><a class="k-in k-state-focused" href="Test/Edit/1">Node 3</a></div>

    <div class="k-top"><span class="k-icon k-minus" role="presentation"></span><a class="k-in k-state-focused" href="Test/Edit/2">Node 7</a></div>

     

    Thanks.

  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Bozhidar
    Admin
    Bozhidar avatar
    1102 posts

    Posted 13 Nov 2015 Link to this post

    Hello,

    The CSS you sent does work. This can be verified with the following page:
    <div class="demo-section">
        @(Html.Kendo().TreeView()
            .Name("treeview")
            .Items(treeview =>
            {
                treeview.Add().Text("My Web Site")
                    .SpriteCssClasses("folder")
                    .Expanded(true)
                    .Items(root =>
                    {
                        root.Add().Text("images")
                            .Expanded(true)
                            .SpriteCssClasses("folder")
                            .Items(images =>
                            {
                                images.Add().Text("logo.png")
                                    .SpriteCssClasses("image");
     
                                images.Add().Text("body-back.png")
                                    .SpriteCssClasses("image");
     
                                images.Add().Text("my-photo.jpg")
                                    .SpriteCssClasses("image");
                            });
     
                        root.Add().Text("resources")
                            .Expanded(true)
                            .SpriteCssClasses("folder")
                            .Items(resources =>
                            {
                                resources.Add().Text("pdf")
                                    .Expanded(true)
                                    .SpriteCssClasses("folder")
                                    .Items(pdf =>
                                    {
                                        pdf.Add().Text("brochure.pdf")
                                            .SpriteCssClasses("pdf");
     
                                        pdf.Add().Text("prices.pdf")
                                            .SpriteCssClasses("pdf");
                                    });
     
                                resources.Add().Text("zip")
                                    .SpriteCssClasses("folder");
                            });
     
                        root.Add().Text("about.html")
                            .SpriteCssClasses("html");
     
                        root.Add().Text("contacts.html")
                            .SpriteCssClasses("html");
     
                        root.Add().Text("index.html")
                            .SpriteCssClasses("html");
     
                        root.Add().Text("portfolio.html")
                            .SpriteCssClasses("html");
                    });
            })
        )
    </div>
     
    <style>
        .demo-section {
            width: 200px;
        }
     
        .k-treeview span.k-icon ~ span.k-in {
            font-weight: bold;
        }
     
        #treeview .k-sprite {
            background-image: url("@Url.Content("~/Content/web/treeview/coloricons-sprite.png")");
        }
     
        .rootfolder { background-position: 0 0; }
        .folder { background-position: 0 -16px; }
        .pdf { background-position: 0 -32px; }
        .html { background-position: 0 -48px; }
        .image { background-position: 0 -64px; }
    </style>

    Here's a screen capture of the result on my end:
    http://screencast.com/t/VTn3n2Kpi

    Can you confirm that this sample works on your end? If your setup differs in any way, please modify this sample code to reflect it and send it back.

    Regards,
    Bozhidar
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  5. Arun
    Arun avatar
    15 posts
    Member since:
    Oct 2014

    Posted 13 Nov 2015 in reply to Bozhidar Link to this post

    Below is sample code that is not working. Your example is working good. But not sure why is my attached code not working. Also mine is databound and yours is not . Please advice. Thank You.

     

    <script>
         function onDataBound(e) {
             $("#treeview").data("kendoTreeView").expand(".k-item")
         }
     </script>
     <style>
         .demo-section {
             display: inline-block;
             vertical-align: top;
             text-align: left;
             margin: 0 2em;
         }
    .k-treeview span.k-icon ~ span.k-in {
         font-weight: bold;
     }      
     </style>
     
     @(Html.Kendo().TreeView()
     .Name("treeview")
     .DataTextField("Name")
     .Events(events => events
                       .DataBound("onDataBound")
                     )
     .DataSource(dataSource => dataSource
                     .Model(model => model
                             .Id("Group_Guid")
                             .HasChildren("HasChildren")
                           )
                     .Read(read => read.Action("Groups_Read", "Groups"))
         )
      .HtmlAttributes(new { @class = "demo-section" })
     .DataUrlField("URL")
     )


  6. Arun
    Arun avatar
    15 posts
    Member since:
    Oct 2014

    Posted 13 Nov 2015 in reply to Arun Link to this post

    So finally got correct answer at SO by Steve Greene

     

    This is working

     .k-treeview span.k-icon ~ a.k-in { font-weight: bold;}

    Regards. 

     

Back to Top
UI for ASP.NET MVC is VS 2017 Ready