We would like to style the WebExplorerBar such that the Group that is expanded has a different style than the groups that are not expanded. Everything I try seems to not work. Can anyone direct me to a working solution for this?
-Daniel
Thanks for your help. I solved this by hooking into the ItemSelected event and setting the className property appropriately.
Hi Daniel,
Thank you for your reply.
Using the javascript functions solves this issue. Apply styles on ItemExpanding and revert the changes on ItemCollapsing, for example:
function ItemCollapsingHandler(sender, eventArgs) {
eventArgs.getExplorerBarItem().get_element().childNodes[0].style.border = "none";
}
Feel free to contact me if you need any further assistance with the matter.
Sorry for the delay in my response. I am setting the SelectedCssClass property, unfortunatly the group seems to be no longer selected when a child item is selected, causing the style to revert back. I would like the style to stay as long as the group is open. We are set to use Single Expanded as well.
I have not yet tried the programmatic approach you suggested but will in the near future and let you know if that works for us.
Thanks,
Daniel
I'm just checking if you need any further assistance with the matter.
You can set SelectedCssClass for each ExplorerBarGroup and define styles for these classes. However, this would work only if you set GroupExpandBehavior to SingleExpanded, because a single group can be selected, but several groups can be expanded at the same time. Another approach would be to handle the ItemExpanding and ItemCollapsing client-side events. When expanding a group you could set styles only for this group and reset them on collapsing:
function WebExplorerBar1_ItemExpanding(sender, eventArgs)
{
eventArgs.getExplorerBarItem().get_element().childNodes[0].style.border = "1px solid red";
If you have any questions, please let me know.