How to change Parent font of Kendo MVC treeview

[Arun]

I am using Kendo MVC Treeview.

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

Thank You.

[Arun]

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.

[Bozhidar]

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

[Arun]

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")
 )

[Arun]

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.