This is a migrated thread and some comments may be shown as answers.

TreeView text formatting

3 Answers 58 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
Dimitry
Top achievements
Rank 1
Dimitry asked on 22 Mar 2021, 12:08 PM

 @(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" + ": " + "example@gmail.com");
                        });

}     

 

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 example@gmail.com  in red) see attached image.

 

Thank you for help.

3 Answers, 1 is accepted

Sort by
0
Dimitar
Telerik team
answered on 25 Mar 2021, 07:35 AM

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'> example@gmail.com</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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Dimitry
Top achievements
Rank 1
answered on 29 Mar 2021, 06:29 AM

Thank you so much for your answer.

I have one additional question.

How can i  decrease the spacing between TreeView rows? 

Thank you.

 

0
Dimitar
Telerik team
answered on 31 Mar 2021, 09:43 AM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
TreeView
Asked by
Dimitry
Top achievements
Rank 1
Answers by
Dimitar
Telerik team
Dimitry
Top achievements
Rank 1
Share this question
or