How can l get the explorerbar groups to act like they do in outlook?
I have a explorerbar inside a websplitter that is 99.5% on the screen. My explorer has 10 groups and l want the groups to be at the botton not the top.
I have
WebExplorerBar1.GroupContentsHeight = ((int)WebExplorerBar1.Height.Value - (GroupCount * 30));
but the WebExplorerBar1.Height.Value is 0 when loading.
I know this is really late for this question - but, I have noticed that there hasn't been a WebOutlookBar control created that acts as many customers have requested. I do not know if the following solution is 'elegant' but here is what I am doing (without copying a bunch of ugly, unformatted html and javascript):
1. Place the WebExplorerBar in a container that sized appropriately (100% or maybe Auto).
2. Create a Template for each WebExplorerBar Group.
3. Create a CSS class to define the Height of your WebExplorerBar Group content (it will be the same height for all content areas for all groups in this design. For example:
.webExplorerBarContentArea {
height: 250px;
}
4. Inside each Template | Content create a <section class="webExplorerBarContentArea">.
5. Use JavaScript to size the height property of the <section class="webExplorerBarContentArea">. For example:
function cssrules() {
var rules = {}; var ds = document.styleSheets, dsl = ds.length;
for (var i = 0; i < dsl; ++i) {
var dsi = ds[i].cssRules, dsil = dsi.length;
for (var j = 0; j < dsil; ++j) rules[dsi[j].selectorText] = dsi[j];
return rules;
};
function css_getclass(name, createifnotfound) {
var rules = cssrules();
return rules[name];
function Resize_ExplorerContentWindows() {
var webExplorer = window.$find("<%=wb.ClientID %>"); //Locate and set the WindowDialog Object
if (webExplorer != null) {
webExplorerHeight = webExplorer.get_element().clientHeight; //Get the Height of the WebExplorerBar in pixels
webExplorerBarItemsCount = webExplorer.getExplorerBarItems().get_length(); //Get the ExplorerBar Menubar count
webExplorerContentHeight = webExplorerHeight - (webExplorerBarItemsCount * 30) - 3; //Explorer bar is 30px high
css_getclass('.webExplorerBarContentArea').style.height = webExplorerContentHeight + "px"; //Modify css class setting, force to pixels
...
(The CSS Class Management comes from AMWinter: http://stackoverflow.com/questions/9153718/change-the-style-of-an-entire-css-class-using-javascript ). Awesome.
In the end, the idea is to compute the size of your WebExplorerBar content area - which will ALL be the same if you want your unopened Menu Bars on the bottom - and then allow the rest of the WebExplorerBar control to size itself appropriately. I size my WebExplorerBar content area, then my WebDataTree to fit that content area, then allow the WebSplitter to grow and shrink to fit. One last issue is to run the webSplitter.layout() method to force the splitter to respect the sizing. I am still using 13.2 to avoid any issues with control updates so maybe that has been fixed. All in all not a bad solution...
Actually, after a brief discussion with the team this behavior will be designed in a new control called WebOutlookBar that is in our backlog and will be released some time in the future.
Hi,
You mean groups to be always at the bottom and when you click them the content to be shown in a fixed pane above. While the splitter is used to control the space for the groups and for the content.
ExplorerBar is not designed to work that way. We can consider adding such mode to the control in the future.
Thanks,
Lubomir