Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
310
WebExplorerBar Look and Act Like Outlook
posted

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.

 

 

 

Parents
No Data
Reply
  • 1414
    Suggested Answer
    posted

    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...

Children
No Data