Forums Ultimate UI for ASP.NET Web Forms
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
Close
Daniel
365
Client Side Selection of WebExporerBar items
posted

We are in the process of switching from the classic controls to the new controls. We are currently on Version 11.1.  Currently I am working on moving from the UltraListBar to the WebExplorerBar and I am noticing some odd behavior.

 

First:

We use the NavigateUrl and Target properties to point to an iframe which will be updated when the item is selected.  When we build the WebExplorerBar on the server and Select an item, the target URL is not set on the client. The iframe is not set until the user actually clicks on an item.  The old control use to automatically set the iframe.

Is this something that we must code for or is there a setting I am missing? 

Second:

In the iframes we have anchors which, when clicked, should change the selected menu item.  We use javascript to switch the selected items.  In the UltraListBar, just setting the item to selected caused the target iframe to be updated, with the WebExplorerBar, this does not occur.  I have tried getting the underlying anchor and calling the click event, and this sort of works.  The issue with that is the previous item stays selected.  If we have switched groups the previous group stays selected and expanded unless I explicitly collapse it, even though we are set to SingleExpanded.  Setting focus or clicking on the anchor fixes some issues but not all.

My question is, what is the correct way to switch items in javascript such that only one item remains high-lighted and menus collapse correctly?

 

I do have a sample project if that helps, but I can not seem to get it to load with this message.  I can post relevant code if needed.

Any help would be appreciated.

-Daniel

  • 22852
    Offline posted

    Daniel,

    The WebExplorerBar is using anchor tags to provide the functionality for the NavigateUrl and Target properties so unless the link is clicked navigation doesn't happen so for the initial state of the IFrame you will need to set the page to be loaded outside of the WebExplorerBar.

    For selecting at item in the explorer bar you will need to use JavaScript to set the item to be selected.  For example the following will expand the first group if not expanded and select the first item of that group:

    var explorerBar = $find("WebExplorerBar1");
    explorerBar.selectGroup(0);
    var groups = explorerBar.getExplorerBarItems();
    var firstGroup = groups.getItem(0);
    if (!firstGroup.get_expanded()) {
        firstGroup.toggle();
    }
    var items = firstGroup.getItems();
    var item = items.getItem(0);
    item.set_selected(true);

    Note that selecting the item will not cause navigation from the item so you will still need to use your logic to simulate clicking the item.

    Let me know if you have any questions with this matter.