treeview expander as triangle

Forum to discuss the new web client version of Servoy.

treeview expander as triangle

Postby huber » Fri Jul 01, 2022 3:25 pm

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,
You do not have the required permissions to view the files attached to this post.
Robert Huber
7r AG, Switzerland
SAN Developer
http://www.seven-r.ch
User avatar
huber
 
Posts: 516
Joined: Mon May 14, 2012 11:31 pm

Re: treeview expander as triangle

Postby mboegem » Fri Jul 01, 2022 3:44 pm

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";
}
Marc Boegem
Solutiative / JBS Group, Partner
• Servoy Certified Developer
• Servoy Valued Professional
• Freelance Developer

Image

Partner of Tower - The most powerful Git client for Mac and Windows
User avatar
mboegem
 
Posts: 1743
Joined: Sun Oct 14, 2007 1:34 pm
Location: Amsterdam

Re: treeview expander as triangle

Postby huber » Fri Jul 01, 2022 4:42 pm

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
Robert Huber
7r AG, Switzerland
SAN Developer
http://www.seven-r.ch
User avatar
huber
 
Posts: 516
Joined: Mon May 14, 2012 11:31 pm

Re: treeview expander as triangle

Postby mboegem » Fri Jul 01, 2022 6:33 pm

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";
}
Marc Boegem
Solutiative / JBS Group, Partner
• Servoy Certified Developer
• Servoy Valued Professional
• Freelance Developer

Image

Partner of Tower - The most powerful Git client for Mac and Windows
User avatar
mboegem
 
Posts: 1743
Joined: Sun Oct 14, 2007 1:34 pm
Location: Amsterdam

Re: treeview expander as triangle

Postby huber » Mon Jul 04, 2022 8:13 am

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

Regards,
Robert Huber
7r AG, Switzerland
SAN Developer
http://www.seven-r.ch
User avatar
huber
 
Posts: 516
Joined: Mon May 14, 2012 11:31 pm


Return to Servoy NGClient

Who is online

Users browsing this forum: No registered users and 7 guests