1 (edited by AD1408 2025-06-29 14:07:23)

Topic: Customizing TreeView

I was wondering if possible highlighting only selected treeview node by changing it's color and style (changing to bold will be enough in my case) using button or right click pop menu.
If so, would you be soo kind to share a sample app with these features please?

Adam
God... please help me become the person my dog thinks I am.

Re: Customizing TreeView

Hi Adam,
How's it going?
Would it be enough just to change the treeview grid properties?
Specifically,
1.  remove the tick from Additional / AppearanceOptions / aoalphablendedselection
2.  add tick to Additional / AppearanceOptions / aoboldtextselection
3.  change Additional / HighlightedTextColor to (whatever you want)
4.  optionally, remove tick from Additional / Options / GoSelectFullRow (so only a single cell is highlighted rather than the full row).
Nice and simple, no script required.
Not sure why you'd want to have this on a button or a right-click rather than just clicking on the cell.  However, if you do need to do it that way, try adding this code (or something like)

procedure Form1_Button4_OnClick (Sender: TObject; var Cancel: boolean);
var  vi, vr: integer;
begin
  vr := form1.treeview1.SelectedRow;                          //** make a note of which row has been highlighted
  form1.treeview1.dbupdate;                                   //** re-set the tree (remove colour and bold attributes)
  for vi := 0 to form1.TreeView1.RowCount-1 do                //** cycle through the grid
    begin
      if form1.treeview1.SelectedRow = vr then                //** if row matches the highlighted row
        begin
          form1.TreeView1.cell[0,vr].textcolor := clred;      //** set colour
          form1.TreeView1.cell[0,vr].FontStyle := fsbold;     //** set bold
        end;
    end;
end;

See attached (one of your old projects).
Derek.

Post's attachments

Attachment icon TreeMultiTG with bold and colour.zip 339.65 kb, 96 downloads since 2025-06-28 

Re: Customizing TreeView

Hi Derek,


Thank you very much......


I'm sorry, I think I wasn't clear enough about my question.
What I was looking for applying color/style to a selected node permanently, until it's changed by the user, not a selection highlighting.
For instance, I like to color a node text on treeview blue and bold, and another node color red. Remaining nodes stays default text / style defined in prosperities of the treeview. I'm hoping to find a way to customize treeview bit further.


After introduction of the treeview, I asked to Dmitry about customization of the treeview such as adding custom icons and changing node text coloring /  size / style, If I remember correctly he said they are in the to do list. Unfortunately, he left before getting around doing them.

Adam
God... please help me become the person my dog thinks I am.

Re: Customizing TreeView

Hi Adam,
Try doing it something like the attached (I went with 'colour boxes' in the end rather than a button or a right-click).  It just seemed more intuitive.
But if you have a large number of colour options rather than just a few, maybe use a combobox instead (the same logic applies).
Regards,
Derek.

Post's attachments

Attachment icon TreeMultiTG bold and colour.zip 342.57 kb, 87 downloads since 2025-06-28 

Re: Customizing TreeView

Hi Derek,
Thank you very much.........
Truly appreciated.......
It's just what I was looking for.

Adam
God... please help me become the person my dog thinks I am.

Re: Customizing TreeView

Hi Derek and all,


Derek, Once again, thank you very much for your kind help.


Taking customizing TreeView further, would it be possible to add on the left of tree node custom icon/image and changing selected tree node text font + font size permanently until user changes them?

Adam
God... please help me become the person my dog thinks I am.

Re: Customizing TreeView

Hello Adam, Hello Derek

For treeview with icons, you could try this in attachment
JB

Post's attachments

Attachment icon TREEVIEW AVEC ICONES.ZIP 342.97 kb, 83 downloads since 2025-06-30 

Re: Customizing TreeView

Hi Adam, Salut Jean,
Ça va ? Il fait très chaud en France en ce moment, je pense! Reste cool!  cool
I'm guessing that you just want to use an icon as a toggle - simply click it to mark a node in the tree as requiring attention and then click the icon again when you're done with it.
I just used unicode symbols rather than true 'icons' as I always like to keep the scripts as short as possible.
Maybe try something like the attached (I've used 'color' to highlight nodes rather than 'bold' but the principle is the same).
Regards,
Derek.

Post's attachments

Attachment icon TreeView with icon for color.zip 340.5 kb, 93 downloads since 2025-06-30 

9 (edited by AD1408 2025-06-30 19:30:08)

Re: Customizing TreeView

Hi JB,
Thank you very much.....

What I was looking for adding / removing an icon to a selected node on user level, perhaps using combobox.


Hi Derek,
Thanks a lot....... I'll check it out.


I had a quick look. It will be useful in some cases, but what I was looking for ico/image like in JB's example but adding/removing on user level.

Adam
God... please help me become the person my dog thinks I am.

Re: Customizing TreeView

Blame it on old age!  Or I might have uploaded the wrong thing and then quickly deleted it.
Either way, download this attachment to make sure you've got the right thing.
When you run it, just click on the '⚫' to toggle highlighting.
Derek.

Post's attachments

Attachment icon TreeView with icon for color.zip 340.5 kb, 82 downloads since 2025-06-30 

Re: Customizing TreeView

Hi all

I will add my example to the interesting examples of Jean and Derek.

Post's attachments

Attachment icon TreeMultiTG png.zip 123.21 kb, 85 downloads since 2025-07-01 

Re: Customizing TreeView

Hi Sparrow,
Thank you very much... Great stuff.....
Even better than what I was looking for.

Adam
God... please help me become the person my dog thinks I am.

13 (edited by sparrow 2025-07-03 17:07:44)

Re: Customizing TreeView

Hi all,


All in one example.


Sorry, my mistake.
Fixed version below.

Re: Customizing TreeView

Sorry, my mistake.
Fixed "icon clearing" in design settings.

Post's attachments

Attachment icon TreeView PopUp menu Fix.zip 130.11 kb, 78 downloads since 2025-07-03 

15 (edited by AD1408 2025-07-08 21:14:14)

Re: Customizing TreeView

Hi Sparrow.
Excellent... This goes beyond my expectation.
Thank you VERY much...................................................................

Adam
God... please help me become the person my dog thinks I am.

Re: Customizing TreeView

Hi Adam, Jean, Sparrow,
I was having a think about this project of Adam's and wanted to see how far you could get with (almost big_smile) no script).
Have a look at the attached as a possibility.
Click on the combobox to select an icon and then simply click in the first column of however many rows you want to highlight (change the combobox selection for a different icon etc or choose the first empty row of the combobox to remove any highlighting).
Advantages
1.  very small script
2.  nothing is hard coded so new icons can simply be added by clicking on the 'configuration' button on Form1 which makes it pretty flexible.
Disadvantages
1.  although it is still a 'tree', you lose the vertical and horizontal lines that better display the child nodes.
Maybe someone will find the approach useful.
Regards,
D.

Post's attachments

Attachment icon TreeView employee performance reviews.zip 938.1 kb, 85 downloads since 2025-07-06 

Re: Customizing TreeView

Hi Derek,


As usual, you have produced something VERY simple and VERY useful.
Thank you very much..............


I think it's a great feature to use in table grids at my end.

Adam
God... please help me become the person my dog thinks I am.