treeview expander as triangle

[huber]

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,

[mboegem]

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)

Code: Select all

.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";
}

[huber]

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.

Code: Select all

.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

[mboegem]

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:

Code: Select all

.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";
}

[huber]

Thanks a lot, Marc, your solution works nicely

Regards,