I am using the webexplorerbar as my menu on a master page, which is loading from an xml file
My issue is that if the user clicks the last displayed item (Level 1), the menu expands, but the user has to scroll down to see the explanded list (of level 2 items):
http://samples.infragistics.com/aspnet/Samples/WebExplorerBar/Display/ClientAPI/Default.aspx?cn=explorer-bar&sid=dae3fc67-3b5a-4872-8ed2-7b4b2b36ab9a
Is there a way of programatically scrolling the list down so that the expanded list is displayed, or at least some of it is displayed?
Hello lorettac242,
I am looking into this matter of programmatically scrolling the list so the newly expanded items are displayed.
I will give you a progress update by the end of the day Wednesday.
Sincerely,Mike P.Developer Support EngineerInfragistics, Inc.www.infragistics.com
Hello loretta242,
I have created and attached a sample to demonstrate how to achieve this. Using the client side ItemExpanded event of the WebExplorerBar I gain access to the child items of the group that was expanded and get the anchor element of the last child. After you have the anchor element you can use focus or scrollIntoView to show the newly expanded items.
Please let me know if you have any questions concerning this matter.
Hi Mike,
Thanks for all of you help with this issue. I am still not able to gett scrolling working to my satisfaction. The fact that I am using the menu with in a Master page to load Content pages, means that I am doing postback with almost all menu clicks. This is not helping the scrolling situation at all. I will wait and see if the feature request comes to fruition.
Thanks for you assistance.
I have looked further into the sample and if when you call scrollIntoView you pass in false instead of true it will scroll the last item in the expanded item to the bottom of the screen instead of the top. This may help some with the jumping. In theory another way you could do this is if you can find the scroll position you can edit the scroll position over time to make it a smoother scroll.
As for having an expand behavior for item in the group this has been determined to be a feature request. I have logged this as a feature request FR13909. In theory you could also achieve this by looping through all the items in the group and making sure only one is expanded.
Please let me know if I may be of further assistance with this matter.
I am using Infragistics4.Web.v11.1, Version=11.1.20111.2064
I have modified your example so that it matches my menu structure, with the same number of menu groups items and sub items. I am also using a fixed webexplorerbar height and group height. The only other change to your code, apart from the version was the change to the webexplorerbar definition as follows:
<ig:webexplorerbar ID="WebExplorerBar1" runat="server" GroupContentsHeight="420px" Width="220px" GroupExpandBehavior="SingleExpanded" Height="540px"> <ClientEvents ItemExpanded="WebExplorerBar1_ItemExpanded" /> <Groups> <ig:ExplorerBarGroup GroupContentsHeight="" Text="Group One"> <Items> <ig:ExplorerBarItem Text="One - No Items"> </ig:ExplorerBarItem> <ig:ExplorerBarItem Text="Two - No Items"> </ig:ExplorerBarItem> <ig:ExplorerBarItem Text="Three - No Items"> </ig:ExplorerBarItem> <ig:ExplorerBarItem Text="Four - 3 Items"> <Items> <ig:ExplorerBarItem Text="Sub Item 1"> </ig:ExplorerBarItem> <ig:ExplorerBarItem Text="Sub Item 2"> </ig:ExplorerBarItem> <ig:ExplorerBarItem Text="Sub Item 3"> </ig:ExplorerBarItem> </Items> </ig:ExplorerBarItem> <ig:ExplorerBarItem Text="Five - 3 Items"> <Items> <ig:ExplorerBarItem Text="Sub Item 1"> </ig:ExplorerBarItem> <ig:ExplorerBarItem Text="Sub Item 2"> </ig:ExplorerBarItem> <ig:ExplorerBarItem Text="Sub Item 3"> </ig:ExplorerBarItem> </Items> </ig:ExplorerBarItem> <ig:ExplorerBarItem Text="Six - 7 Items"> <Items> <ig:ExplorerBarItem Text="Sub Item 1"> </ig:ExplorerBarItem> <ig:ExplorerBarItem Text="Sub Item 2"> </ig:ExplorerBarItem> <ig:ExplorerBarItem Text="Sub Item 3"> </ig:ExplorerBarItem> <ig:ExplorerBarItem Text="Sub Item 4"> </ig:ExplorerBarItem> <ig:ExplorerBarItem Text="Sub Item 5"> </ig:ExplorerBarItem> <ig:ExplorerBarItem Text="Sub Item 6"> </ig:ExplorerBarItem> <ig:ExplorerBarItem Text="Sub Item 7"> </ig:ExplorerBarItem> </Items> </ig:ExplorerBarItem> <ig:ExplorerBarItem Text="Seven - 2 Items"> <Items> <ig:ExplorerBarItem Text="Sub Item 1"> </ig:ExplorerBarItem> <ig:ExplorerBarItem Text="Sub Item 2"> </ig:ExplorerBarItem> </Items> </ig:ExplorerBarItem> <ig:ExplorerBarItem Text="Eight - 2 Items"> <Items> <ig:ExplorerBarItem Text="Sub Item 1 with a really long title"> </ig:ExplorerBarItem> <ig:ExplorerBarItem Text="Sub Item 2"> </ig:ExplorerBarItem> </Items> </ig:ExplorerBarItem> <ig:ExplorerBarItem Text="Nine - 3 Items"> <Items> <ig:ExplorerBarItem Text="Sub Item 1"> </ig:ExplorerBarItem> <ig:ExplorerBarItem Text="Sub Item 2"> </ig:ExplorerBarItem> <ig:ExplorerBarItem Text="Sub Item 3"> </ig:ExplorerBarItem> </Items> </ig:ExplorerBarItem> <ig:ExplorerBarItem Text="Ten - 8 Items"> <Items> <ig:ExplorerBarItem Text="Sub Item 1"> </ig:ExplorerBarItem> <ig:ExplorerBarItem Text="Sub Item 2"> </ig:ExplorerBarItem> <ig:ExplorerBarItem Text="Sub Item 3"> </ig:ExplorerBarItem> <ig:ExplorerBarItem Text="Sub Item 4"> </ig:ExplorerBarItem> <ig:ExplorerBarItem Text="Sub Item 5"> </ig:ExplorerBarItem> <ig:ExplorerBarItem Text="Sub Item 6"> </ig:ExplorerBarItem> <ig:ExplorerBarItem Text="Sub Item 7"> </ig:ExplorerBarItem> <ig:ExplorerBarItem Text="Sub Item 8"> </ig:ExplorerBarItem> </Items> </ig:ExplorerBarItem> <ig:ExplorerBarItem Text="Eleven - 2 items"> <Items> <ig:ExplorerBarItem Text="Sub Item 1"> </ig:ExplorerBarItem> <ig:ExplorerBarItem Text="Sub Item 2"> </ig:ExplorerBarItem> </Items> </ig:ExplorerBarItem> <ig:ExplorerBarItem Text="Twelve - 3 items"> <Items> <ig:ExplorerBarItem Text="Sub Item 1"> </ig:ExplorerBarItem> <ig:ExplorerBarItem Text="Sub Item 2"> </ig:ExplorerBarItem> <ig:ExplorerBarItem Text="Sub Item 3"> </ig:ExplorerBarItem> </Items> </ig:ExplorerBarItem> <ig:ExplorerBarItem Text="Thirteen - 4 items"> <Items> <ig:ExplorerBarItem Text="Sub Item 1"> </ig:ExplorerBarItem> <ig:ExplorerBarItem Text="Sub Item 2"> </ig:ExplorerBarItem> <ig:ExplorerBarItem Text="Sub Item 3"> </ig:ExplorerBarItem> <ig:ExplorerBarItem Text="Sub Item 4"> </ig:ExplorerBarItem> </Items> </ig:ExplorerBarItem> <ig:ExplorerBarItem Text="Fourteen 2 items"> <Items> <ig:ExplorerBarItem Text="Sub Item 1"> </ig:ExplorerBarItem> <ig:ExplorerBarItem Text="Sub Item 2"> </ig:ExplorerBarItem> </Items> </ig:ExplorerBarItem> </Items> </ig:ExplorerBarGroup> <ig:ExplorerBarGroup GroupContentsHeight="" Text="Group Two"> <Items> <ig:ExplorerBarItem Text="Item"> </ig:ExplorerBarItem> <ig:ExplorerBarItem Text="Item"> </ig:ExplorerBarItem> </Items> </ig:ExplorerBarGroup> <ig:ExplorerBarGroup GroupContentsHeight="" Text="Group Three"> <Items> <ig:ExplorerBarItem Text="Item"> </ig:ExplorerBarItem> <ig:ExplorerBarItem Text="Item"> </ig:ExplorerBarItem> </Items> </ig:ExplorerBarGroup> <ig:ExplorerBarGroup GroupContentsHeight="" Text="Group Four"> <Items> <ig:ExplorerBarItem Text="Item"> </ig:ExplorerBarItem> <ig:ExplorerBarItem Text="Item"> </ig:ExplorerBarItem> <ig:ExplorerBarItem Text="Item"> </ig:ExplorerBarItem> <ig:ExplorerBarItem Text="Item"> </ig:ExplorerBarItem> </Items> </ig:ExplorerBarGroup> </Groups> </ig:webexplorerbar>
Clicking the various menu items within the first group will show you the type of behavour I have been talking about. It is most obvious if you start with 'Group One' expanded, then click 'Four - 3 Items', and then click 'Six - 7 Items' Clicking 'Four - 3 Items' jumps the menu up but the selected item is still visible. However, clicking 'Six - 7 items' jumps the menu up and the selected item is no longer visible at all. While I understand that in some instances, the menu must move completely, however the jumping is not nice. Is there a way to make the menu scroll up, but only enough to ensure that sub items are all visible?
Also, I have been trying to ensure that only one Item is expanded at a time, is there a property for the control that sets this (similiar to GroupExpandBehaviour=SingleExpanded)?
I have modified my sample to have up to 3 levels of items in the WebExplorerBar. I am unable to reproduce the behavior you are experiencing. When I expand an item if the item has children that would expand beyond the bottom of the page they are scrolled into view using either the scrollIntoView or focus functions.
I have attached the sample project I used to test this. Please test this project on your PC; whether or not it works correctly may help indicate the nature of this problem.
If the project does not work correctly, this indicates either a problem possibly specific to your environment, or a difference in the DLL versions we are using. My test was performed using version 11.2.20112.1019 in NetAdvantage for ASP.NET 2011 Volume 2.
If the project does show the product feature working correctly, this indicates a possible problem in the code of your application. It will help if you can provide a small, isolated sample application that demonstrates the behavior you are seeing.
Or, if this sample project is not an accurate demonstration of what you're trying to do, please feel free to modify it and send it back, or send a small sample project of your own if you have one.
I am using multiple (up to 3) levels in the Web Explorer Bar, although not all menu options have 3 levels. I also have my menu set so that more than one menu group (not explorer group) can be explanded at the same time. This seems to cause problems with the code sample that you provided, as it seems to anchor on the the first expanded group, the the one that is being selected (which could be the 2nd or 3rd expanded item).
I am using scrollIntoView (as per your original example).
I have just returned from leave, and will be working on this this week.