TreeView text formatting

[Dimitry]

 @(Html.Kendo().TreeView()
                .Name("treeviewDetails")
                .Items(treeview =>
                {
                    treeview.Add().Text("Information")
                        .Expanded(true)
                        .Items(root =>
                        {
                            root.Add().Text("Priority" + ": " + InOnwHours);
                            root.Add().Text("Due Date" + ": " + "Today");
                            root.Add().Text("Return emails" + ": " + "[e-mail]");
                        });

}     

 

How i can format the part of text in  root.Add().Text text ?  i need show the text after ":"  in different color, style and size. (for example [e-mail]  in red) see attached image.

 

Thank you for help.

[Dimitar]

Hi Dimitry,

To achieve such styling of only part of the TreeView node text, TreeView Templates feature may be used in combination with adding Id to the respective tree node to place the email in a span with custom class:

 

<script id="treeview-details-template" type="text/kendo-ui-template">
    #: item.text #
    # if (item.id == "mail") { #
    <span class='red'> [e-mail]</span>
    # } #
</script>

    @(Html.Kendo().TreeView()
        .Name("treeviewDetails")
        .TemplateId("treeview-details-template")
        .Items(treeview =>
        {
            treeview.Add().Text("Information")
                .Expanded(true)
                .Items(root =>
                {
                    root.Add().Text("Priority" + ": " + "High");
                    root.Add().Text("Due Date" + ": " + "Today");
                    root.Add().Text("Return emails" + ": ").Id("mail");
                });
        })
    )

 

<style>
    .red {
        color: red;
    }
</style>

The result is the following:

Regards,
Dimitar
Progress Telerik

[Dimitry]

Thank you so much for your answer.

I have one additional question.

How can i  decrease the spacing between TreeView rows? 

Thank you.

 

[Dimitar]

Hi Dimitry,

Decreasing the space between TreeView nodes may be achieved by changing the line-height for the TreeView as follows (clarification comments added to the snippet):

    <style>
      .k-treeview {
        /*
        The height of treeview and any other component for that matter is determined by:
        1) the line-height and font-size
        2) any margin available
        */

        /* This will reduce the height by reducing the line-height*/
        line-height: 1;
      }

      /* Additionaly reduce the height of a TreeView node by reducing its top and bottom padding */
      .k-treeview .k-in {
        padding-top: 2px;
        padding-bottom: 2px;
      }

      /* Increase the distance between icons and text */
      .k-treeview .k-checkbox-wrapper,
      .k-treeview .k-in > .k-icon,
      .k-treeview .k-in > .k-image,
      .k-treeview .k-in > .k-sprite {
        margin-right: 10px;
      }
    </style>

The result of this customization may be observed on this Dojo snippet.

Regards,
Dimitar
Progress Telerik