Treeview custom colors

[mjcramos]

Greetings, I'm implementing a unitreeview in an application and would like to customize the colors and some functions, I found here in the forum a topic that almost solved my problem,

 

 UniSession.SetStyle(
    '#' + NavTreeView.JSName + '_id .x-tree-view{'+
    '  background-color: ' + uniColor2Web(NavTreeView.Color) + ';'+
    '}'+
    '#' + NavTreeView.JSName + '_id .x-tree-view .x-grid-cell-inner-treecolumn{'+
    '  background-color: ' + uniColor2Web(NavTreeView.Color) + ';'+
    '  color: ' + uniColor2Web(NavTreeView.Font.Color) +';'+
    '  fontSize:' + uniColor2Web(NavTreeView.Font.Size) +';'+
    '  font: ' + NavTreeView.Font.ToString(False, False, False, False) +';'+
    '}'+
    '#' + NavTreeView.JSName + '_id .x-tree-view Ext.select(ColCells).setStyle("cursor", "pointer");'
  );
 

It was very good, but I would like to move the mouse over the cell it changed the color, same as the original, when applying this code it disabled this function, I am sending an image of the original, the color is white and when I move the mouse over The node becomes dark

[Sherzod]

Hi,

 

Sorry, can you clarify your issue with a little more details,
and attach a test case?

 

Best regards.

[mjcramos]

Hello, thanks for the quick reply, it would be kind to hover over the menu and highlight the color of the option that is below the mouse cursor, the normal treeview when passing the mouse does this, however after applying the code of this function it has lost this property I'm using the google translator, sorry for the pronunciation

tree.rar

[Sherzod]

Hi,

 

Try this:

procedure TMainForm.UniFormCreate(Sender: TObject);
begin
  UniSession.SetStyle(
    '#' + UniTreeView1.JSName + '_id .x-tree-view{'+
    '  background-color: ' + uniColor2Web(UniTreeView1.Color) + ';'+
    '}'+
    '#' + UniTreeView1.JSName + '_id .x-tree-view .x-grid-cell-inner-treecolumn{'+
    '  background-color: ' + uniColor2Web(UniTreeView1.Color) + ';'+
    '  color: ' + uniColor2Web(UniTreeView1.Font.Color) +';'+
    '  fontSize:' + uniColor2Web(UniTreeView1.Font.Size) +';'+
    '  font: ' + UniTreeView1.Font.ToString(False, False, False, False) +';'+
    '}'+
    '#' + UniTreeView1.JSName + '_id .x-tree-view .x-grid-row-selected .x-grid-cell-inner-treecolumn {'+
    '  background-color: ' + uniColor2Web(clLime) + ';'+
    '  color: ' + uniColor2Web(clBlack) +';'+
    '  fontSize:' + uniColor2Web(UniTreeView1.Font.Size) +';'+
    '  font: ' + UniTreeView1.Font.ToString(False, False, False, False) +';'+
    '}'
  );
end;

Best regards.

[mjcramos]

This solved my problem, thank you very much and merry christmas.

[Sherzod]

Thank you,

Merry Christmas

[skafy]

Hi,

Code from first post is working, when there is no login form. If login is must be show before main form the treeview present itself as white colored.

I attached project.

Project2.zip

[Sherzod]

Hello,

Also try this approach:

 

[skafy]

Yes this worked. How come I didn't found this. I searched for hours. Thank you!