treeview expander as triangle

Questions
1

Using the dbtreeview (servoyextra-dbtreeview) as well as treeview (servoyextra-treeview) for the Titanium Client, the tree view shows (by default) the + sign to open sub nodes.

I would like to have triangles instead of pluses (+) for treeview like the dbtreeview shows, see attached screenshot.

How to apply triangles to the treeview component to get the same visual appearance like in the dbtreeview?

Regards,

dbtreeview and treeview.png
dbtreeview and treeview.png416×215 14.5 KB

2

Hi Robert,

you can easily customise the tree by applying some custom css.
I did a similar thing for the ag-grid, where I preferred the fontawesome checkbox over the glyphicon one.
Using the inspector in your browser you should be able to target the correct class and change it in a similar way as below (which is the ag-grid change I did)

.ag-table.ag-theme-servoy .ag-body-viewport .ag-cell-value .glyphicon.glyphicon-unchecked:before {
	font-family: 'Font Awesome 5 Pro';
    font-weight: 400;
    font-size: 16px;
    
    content: "\f0c8";
}
3

Thanks for the example. I work a lot with the inspector, but in this case using the inspector I get the image as data in the background-image. So I don’t see where it comes from and therefor how to change it.

.toggle-children {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAASCAYAAABSO15qAAAAGXRFW…XIBRuZGKgAKPIC3QLxArnRSHZCIjspk52ZKMrOFBUoAAEGAKnq593MQAZtAAAAAElFTkSuQmCC');
height: 8px;
width: 9px;
background-size: contain;
display: inline-block;
position: relative;
top: 1px;
background-repeat: no-repeat;
background-position: center;
}

I also looked in the documentation in various menus. But it seems have to look even closer.

https://angular2-tree.readme.io/docs/styling

4

I’ve put together a quick form using the servoyextra-treeview.

Quick look in the inspector, learned me that it’s using plain text to show ‘+’ and ‘-’.
Had to come up with a little trick to get around that, but this works:

.expand-icon {
  	visibility: hidden !important;
}

.expand-icon.inbuild-icon:after,
.expand-icon.inbuild-dash-icon:after {
	visibility: visible;
	color: #444;
	font-family: "Font Awesome 6 Free";
  	font-family: var(--fa-style-family, "Font Awesome 6 Free");
  	font-weight: 900;
  	font-size: 16px;
}

.expand-icon.inbuild-icon:after {
    content: "\f0da";
}

.expand-icon.inbuild-dash-icon:after {
    content: "\f0d7";
}
5

Thanks a lot, Marc, your solution works nicely :-)

Regards,