NG Ti: Different styles to different (db)treeview components

Questions
1

To apply different styles to different (db)treeview components [servoyextra-dbtreeview], in NG Classic I can style the component by using the name property.

For example, property name is set to menu, then the style

[name = menu] .dbtreeview ul.fancytree-container {
	background-color: #f5fbfe;
}

is only applied to dbtreeviews having set the property name to menu.

This does not work anymore for NG Titanium. Does someone know how to use different styles in NG Ti for the dbtreeview components? Any hint is appreciated.

2

Hi Robert,

A while ago, you’ve asked about styling of the TiNG treeview component.
From that, I know that the underlying component is different and therefor also the DOM/classes of the component.

Easiest way is to use the browser’s inspector and see what the target is in this component.

3

Hi Marc

I did that and can style the treeview component. But on different forms I have to style them differently. The browser’s inspector is no help in finding an answer to that, at least I didn’t find it.

Regards,

4

Hi Robert,

I can see what you’re trying to achieve.
The generic solution is kind of simple.
You can nest form-specific styling in a form style class.
Something like this:

.menu-tree {
   .dbtreeview ul.fancytree-container {
      background-color: #f5fbfe;
   }
}

Then you will add/set ‘menu-tree’ as the styleclass of the particular form.

I can imagine that you have some base styling for the different treeviews, which can be global styling (no nesting) or nested in a separate block, referencing multiple form-styles

.menu-tree,
.another-tree,
.3rd-tree {
   /** base styling */
}

Hope this helps

note: of course you still need to replace the fancy-tree style class with the TiNG equivalent. ;-)