TreeViewNode HTML Text on a selected node

Closed
0
0

I know that we can use HTML to show custom Node text.

But how do I  change the foreground color on a selected node. I tried several css pseudo selectors but with no luck.

 

Thank you

Daniel

Questions
Share
  • You must to post comments
Filter
Sort by: Recently Active
0
0

Thanks for the sample. If it helps, the mixin from your sample does work to turn node text red when selected- as long as the HTML isn’t affecting the text color.

For example, if you use HTML to underline the text, your mixin will turn it red on hover:

treeView1.Nodes.Add(new TreeNode("<span style= \"text-decoration: underline\">Node 1</span>") {AllowHtml = true});

  • You must to post comments
0
0

I tried this before.

This approach only works for normal nodes (without html).

Please see my example.

Attachment
TestTree.zip
  • Luca (ITG)
    I just tried your sample, it works well with node with HTML or without HTML. The issue is probably that your HTML specifies the color in the style of each element. There is no way with HTML or css to override the inline styles. This is not a Wisej issue.
  • Daniel Hüttenberger
    Ok. I thought I could use a pseudo class or something. I will try another way. Thank you.
  • Daniel Hüttenberger
    But I think there is a bug anyways. Try to set the “ForeColor” property of the Node (without HTML) and then look at the selection. Won’t work.
  • Julie (ITG)
    So, if you set the “ForeColor” property of the Node (without HTML) (ie treeView2.Nodes[0].ForeColor = System.Drawing.Color.Green;) it overrides the ForeColor property from the mixin, Which results in the Node always being green, even when selected. This is intended. If you want the node to be green normally, but red when selected, you would have to set the color entirely via the mixin: { “name”: “bibliothektree”, “appearances”: { “tree-file”: { “text”: “Tree Node”, “states”: { “default”: { “properties”: { “textColor”: “green”, “indent”: 18, “opacity”: 1, “padding”: [2, 0, 2, 0] }, “styles”: { “backgroundColor”: null } }, “selected”: { “properties”: { “textColor”: “red” }, “styles”: { “backgroundColor”: “gray”, “color”: “white” } } } } } }
  • Daniel Hüttenberger
    Ah ok. But in my case the user can define the forecolor of the nodes. The mixin approach wont work here. I’m going now with DataGridView. There we have more options.
  • You must to post comments
0
0

If you are using the ThemeBuilder to edit your themes, you will notice that under “Tree Node” there is an option for “textColor” under “selected”
The JSON for it would look something like this:


"tree-folder": {
"text": "Tree Node",
"components": {
"states": {
"default": {
"properties": {
"textColor": "",
"indent": 18,
"icon": "icon-folder",
"opacity": 1,
"padding": [2, 0, 2, 0]
},
"styles": {
"backgroundColor": null
}
},
"hovered": {
"styles": {
"backgroundColor": "hotTrack"
},
"properties": {
"cursor": "pointer"
}
},
"selected": {
"properties": {
"textColor": "YOURCOLORHERE"
},
"styles": {
"backgroundColor": "highlight"
}
},

 

Attachment
ThemeBuilder.png
  • You must to post comments
0
0

Hi Daniel,

You can create a custom Theme, or write a Theme Mixin.

A Mixin basically overwrites the appearance on any Theme you choose, and it would make sense to use it for your use case since you’re going to target a single control.

For more information, please check out our documentation https://docs.wisej.com/theme-builder/getting-started/edit-a-mixin

Best,
Alaa

  • Daniel Hüttenberger
    Well the documentation says here, that we could edit a mixin file. I don’t get it into the mixin that my custom html gets changed. here is my html nodetext: NodeText if the node is selected I want the nodetext turns white.
  • Luca (ITG)
    Your html text will be displayed the way your html text wants to be displayed. If you specify a color that’s what the browser will use. It is unrelated to css classes or to the themes.
  • You must to post comments
Showing 4 results