ASPX templates
Version 6.x > ASPX templates > Design Treeview View modes: 
User avatar
Member
Member
maassenbas-hotmail - 2/1/2012 9:25:24 AM
   
Design Treeview
Hi,

I'm using a treeview with multiple levels. When I select a node, is it possible to highlight the path in the treeview of the current node?

Is it also possible to center the items under each other? Now when i expand a folder, the item beneath have a margin left.

Best Regards,
Bas Maassen

User avatar
Kentico Support
Kentico Support
kentico_janh - 2/2/2012 2:33:52 AM
   
RE:Design Treeview
Hello,

1) There is a Highlight selected item property for it.

2) Could you please be more specific or could you please post some picture of how you want to render those centered items?

Best regards,
Jan Hermann

User avatar
Member
Member
maassenbas-hotmail - 2/2/2012 3:34:20 AM
   
RE:Design Treeview
Hello Jan,

I used the Highlighted Selected Item property. I was wondering if it is possible to highlight the path, so also the parent of the current page?

The treeview should look like this:
User image

Is it also possible to set the font style of a folder in the treeview? Or a different font style for each level?

Best Regards,
Bas Maassen

User avatar
Kentico Support
Kentico Support
kentico_janh - 2/2/2012 5:37:40 AM
   
RE:Design Treeview
Hello,

1) I am sorry, there is no option for highlighting the whole path in the Tree View web part.

2) Yes, you can achieve this by styling its classes in the site's css stylesheet. For example, I have set properties like width and align for a span element in the tree view and I've also disabled images of uncollapsed items:

#my_treeView table span {
display: block;
width: 80px;
text-align: center;
}
#my_treeView div table {
font: italic 12px "Times New Roman";
}
#my_treeView div table img {
display: none;
}


As you can see below, the menu is centered and has a different font style for each level:

User image

Best regards,
Jan Hermann

User avatar
Member
Member
maassenbas-hotmail - 2/2/2012 1:00:31 PM
   
RE:Design Treeview
Yes! Thank you very much, that worked!

Is it also possible to expand the children of a folder when I click on the foldername? So the page doesn't have to refresh.

Best regards,
Bas Maassen

User avatar
Kentico Support
Kentico Support
kentico_janh - 2/3/2012 6:32:16 AM
   
RE:Design Treeview
Hello,

Probably yes, but only with some customization of the TreeView web part. I suggest you to set the folder as an inactive menu item (select folder -> Properties (tab) -> Menu (section) -> Inactive menu item), so this item will not be clickable and then the user will need to expand it through that plus sign, which is without any page refresh.

Best regards,
Jan Hermann

User avatar
Member
Member
maassenbas-hotmail - 2/3/2012 6:46:42 AM
   
RE:Design Treeview
Hello,

Can I use Javascript Command in the menu actions to expand the children?


Best regards,
Bas Maassen

User avatar
Kentico Support
Kentico Support
kentico_janh - 2/6/2012 1:53:16 AM
   
RE:Design Treeview
Hello,

Regrettably, you can't. The javascript, which expands and collapses nodes from the TreeView, generates its parameters dynamically and this functionality is hardcoded in the source code.

So I suggest you to create your own tree view web part based on a CSS Menu web part or a Repeater web part, which will just generate the HTML code of the menu and the functionality will be your own. You can use - for example - jQuery as it is shown in the link below:

http://programmingsolution.net/useful-js/jquery-treeview.php

Best regards,
Jan Hermann