TreeView-how to color text

1 Answer 239 Views
TreeView
A
Top achievements
Rank 1
Iron
Iron
A asked on 03 Feb 2023, 02:43 PM

Hi,

can anyone provide example how to color text in treeview in react  according to  database response.

For example,if trans is equal to 10 all elements that have trans equal to 10 will be colored to red..

In this example 'Furniture' will be colored in color red, or if trans is equal to 30 'aaa' will be colored in blue for example

 

const tree = [{
  text: 'Furniture',
  trans:10,
  items: [{
    text: 'Tables & Chairs',
    trans:20,
  }, {
    text: 'Sofas',
    trans:50,
  }, {
    text: 'Occasional Furniture',
    trans:50,
  }]
}, {
  text: 'Decor',
  trans:50,
  items: [{
    text: 'Bed Linen',
    trans:50,
    items:[{text:'aaa'trans:30}]
  }, {
    text: 'Curtains & Blinds',
    trans:50
  }, {
    text: 'Carpets',
    trans:50
  }]
}];

 

1 Answer, 1 is accepted

Sort by
0
Wissam
Telerik team
answered on 07 Feb 2023, 09:01 AM

Hi,

You can color the TreeView items by utilizing the custom rendering feature of the component.

In the below example, I am using the item prop to render a custom item where based on the `trans` value I am setting the color of each item:

For more information about TreeView custom rendering, you can check the following article:

I hope this helps, but please let us know if you have any further questions.

Regards,
Wissam
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Tags
TreeView
Asked by
A
Top achievements
Rank 1
Iron
Iron
Answers by
Wissam
Telerik team
Share this question
or