I am attempting to upgrade an UltraWebListbar to the WebExplorerBar. Basically, this UltraWebListBar resides on the left side of the browser window, with height at 100%. Each group contains a Template which contains other html. This is used for selecting criteria for a report.
The UltraWebListBar honors the Height attribute, and is always sized to 100%. The groups are stacked at the very top and very bottom of the page, with the selected group's content using all of the remaining available height. It doesn't matter what the size of the actual content is, it honors the height, and displays scrollbars on the content as necessary.
For the life of me, I can't get the WebExplorerBar to behave the same way. It seems to ignore the Height property altogether, and instead sizes itself vertically based on the content size. Even with the height at 100%, the bottom group is half-way up the page, and the selected group is tightly compressed. If I select a group that contains an item with a lot of content, it forces the bottom groups down below the bottom of the page so you have to scroll to see them. I can't specify a item heights, because I can't predict what the browser size will be. Besides, the item height ought to be irrelevant. I can put a div in the template and use overflow to display scrollbars if necessary.
I really could use some guidance here. How can I get the WebExplorerBar to honor its Height property, when it is set to 100%?
I am running 12.2,20122.2075 of the Infragistics4.Web.v12.2.dll, however I am stuck on version 11.1.20111.2238 of the Misc and Shared libraries until I finish upgrading the legacy controls. I don't know which library the WebExplorerBar is in.
Here is sample code that illustrates the issue.
In the example on the left, all groups should always be visible, and scrollbars should be used if items are too large.
In the example on the right, groups 2, 3, and 4 should be aligned to the bottom of the page, so that the control is sized to 100% of the height.
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Test.aspx.vb" Inherits="Test" %> <!DOCTYPE html > <html> <head runat="server"> <title></title> <style type="text/css"> html, body, form { width: 100%; height: 100%; margin: 0px; } .paneLeft { position: absolute; left: 5px; top: 5px; width: 48%; bottom: 5px; border-color: black; border-width: 1px; border-style: dotted; } .paneRight { position: absolute; width: 48%; top: 5px; right: 5px; bottom: 5px; border-color: black; border-width: 1px; border-style: dotted; } </style> </head> <body> <form id="form1" runat="server"> <ig:WebScriptManager ID="WebScriptManager1" runat="server"> </ig:WebScriptManager> <div class="paneLeft"> <ig:WebExplorerBar ID="WebExplorerBar1" runat="server" Width="250px" StyleSetName="IG" Height="99%" GroupExpandBehavior="SingleExpanded" EnableSelection="true"> <Groups> <ig:ExplorerBarGroup Text="Group 1"> <Items> <ig:ExplorerBarItem> <Template> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod mauris nec ipsum dictum non tempus ipsum ultrices. Aliquam erat volutpat. Maecenas sed augue ante. Phasellus ut urna quam, quis pellentesque diam. Cras pellentesque vestibulum vulputate. Nunc erat nibh, aliquam vitae fringilla id, molestie eu ipsum. Maecenas et mauris sem, non congue magna. Aliquam erat volutpat. In pellentesque vulputate dignissim. Proin pulvinar feugiat facilisis. Maecenas pulvinar justo commodo ante placerat at rhoncus lectus iaculis. Nunc suscipit, est quis molestie pharetra, lacus risus varius ligula, a volutpat purus mi a ligula. Fusce at diam odio. Aenean suscipit venenatis orci, in condimentum enim mattis eu. Ut vel pellentesque ligula. Sed faucibus magna a augue aliquam at venenatis nunc luctus. Nam felis augue, bibendum congue eleifend sit amet, feugiat eu lacus. Vivamus porttitor, augue at convallis condimentum, sapien mi auctor dolor, et laoreet orci purus sit amet elit. Pellentesque vel urna risus, vitae ornare neque. Nulla facilisi. Donec luctus, augue et pulvinar dictum, leo enim eleifend ante, vitae rutrum nibh nibh pretium libero. Praesent mattis mauris id urna dictum faucibus. Maecenas dui lacus, iaculis in egestas et, sollicitudin sit amet tellus. Donec sit amet odio et tellus vehicula elementum. In sed risus at justo adipiscing pretium at nec dolor. Ut semper commodo nisi, at adipiscing lacus ullamcorper tincidunt. In venenatis ante non est dapibus vel congue odio suscipit. Aliquam mi leo, semper quis tristique eget, placerat eget urna. Nunc ante eros, bibendum et blandit bibendum, auctor et elit. Vestibulum sodales, justo in elementum dapibus, arcu neque porttitor dolor, nec luctus purus orci euismod erat. Etiam non lacus est. Donec sodales volutpat elit in tincidunt. Maecenas sagittis feugiat libero blandit eleifend. Pellentesque at placerat metus. Sed augue libero, pretium non ultricies sed, egestas eget dui. Nam feugiat, ipsum eget mattis convallis, eros purus sollicitudin elit, eget convallis sapien orci ac mi. Curabitur sagittis, augue ac mattis tristique, augue quam sagittis nulla, sit amet rhoncus justo lacus in sem. Curabitur volutpat ante augue, aliquam rhoncus lectus. Quisque condimentum, turpis ac tristique faucibus, arcu purus venenatis velit, ac molestie dolor neque at ante. Etiam pulvinar egestas mattis. Duis auctor pellentesque semper. Nam augue tortor, lacinia vulputate dignissim eu, euismod non sem. Proin dui sem, bibendum id varius vel, fringilla ut ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc interdum eros gravida sem lacinia in sodales magna accumsan. Suspendisse euismod dolor augue. Maecenas aliquam viverra vehicula. Aenean pharetra odio mattis elit rutrum pharetra. Nunc in leo id arcu auctor sagittis sit amet ut eros. Duis sed lectus a elit vehicula hendrerit. Nullam sed ipsum vel erat sodales suscipit. </Template> </ig:ExplorerBarItem> </Items> </ig:ExplorerBarGroup> <ig:ExplorerBarGroup Text="Group 2"> <Items> <ig:ExplorerBarItem> <Template> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod mauris nec ipsum dictum non tempus ipsum ultrices. Aliquam erat volutpat. Maecenas sed augue ante. Phasellus ut urna quam, quis pellentesque diam. Cras pellentesque vestibulum vulputate. Nunc erat nibh, aliquam vitae fringilla id, molestie eu ipsum. Maecenas et mauris sem, non congue magna. Aliquam erat volutpat. In pellentesque vulputate dignissim. Proin pulvinar feugiat facilisis. Maecenas pulvinar justo commodo ante placerat at rhoncus lectus iaculis. Nunc suscipit, est quis molestie pharetra, lacus risus varius ligula, a volutpat purus mi a ligula. Fusce at diam odio. Aenean suscipit venenatis orci, in condimentum enim mattis eu. Ut vel pellentesque ligula. Sed faucibus magna a augue aliquam at venenatis nunc luctus. Nam felis augue, bibendum congue eleifend sit amet, feugiat eu lacus. Vivamus porttitor, augue at convallis condimentum, sapien mi auctor dolor, et laoreet orci purus sit amet elit. Pellentesque vel urna risus, vitae ornare neque. Nulla facilisi. Donec luctus, augue et pulvinar dictum, leo enim eleifend ante, vitae rutrum nibh nibh pretium libero. Praesent mattis mauris id urna dictum faucibus. Maecenas dui lacus, iaculis in egestas et, sollicitudin sit amet tellus. Donec sit amet odio et tellus vehicula elementum. In sed risus at justo adipiscing pretium at nec dolor. Ut semper commodo nisi, at adipiscing lacus ullamcorper tincidunt. In venenatis ante non est dapibus vel congue odio suscipit. Aliquam mi leo, semper quis tristique eget, placerat eget urna. Nunc ante eros, bibendum et blandit bibendum, auctor et elit. Vestibulum sodales, justo in elementum dapibus, arcu neque porttitor dolor, nec luctus purus orci euismod erat. Etiam non lacus est. Donec sodales volutpat elit in tincidunt. Maecenas sagittis feugiat libero blandit eleifend. Pellentesque at placerat metus. Sed augue libero, pretium non ultricies sed, egestas eget dui. Nam feugiat, ipsum eget mattis convallis, eros purus sollicitudin elit, eget convallis sapien orci ac mi. Curabitur sagittis, augue ac mattis tristique, augue quam sagittis nulla, sit amet rhoncus justo lacus in sem. Curabitur volutpat ante augue, aliquam rhoncus lectus. Quisque condimentum, turpis ac tristique faucibus, arcu purus venenatis velit, ac molestie dolor neque at ante. Etiam pulvinar egestas mattis. Duis auctor pellentesque semper. Nam augue tortor, lacinia vulputate dignissim eu, euismod non sem. Proin dui sem, bibendum id varius vel, fringilla ut ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc interdum eros gravida sem lacinia in sodales magna accumsan. Suspendisse euismod dolor augue. Maecenas aliquam viverra vehicula. Aenean pharetra odio mattis elit rutrum pharetra. Nunc in leo id arcu auctor sagittis sit amet ut eros. Duis sed lectus a elit vehicula hendrerit. Nullam sed ipsum vel erat sodales suscipit. </Template> </ig:ExplorerBarItem> </Items> </ig:ExplorerBarGroup> <ig:ExplorerBarGroup Text="Group 3"> <Items> <ig:ExplorerBarItem> <Template> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod mauris nec ipsum dictum non tempus ipsum ultrices. Aliquam erat volutpat. Maecenas sed augue ante. Phasellus ut urna quam, quis pellentesque diam. Cras pellentesque vestibulum vulputate. Nunc erat nibh, aliquam vitae fringilla id, molestie eu ipsum. Maecenas et mauris sem, non congue magna. Aliquam erat volutpat. In pellentesque vulputate dignissim. Proin pulvinar feugiat facilisis. Maecenas pulvinar justo commodo ante placerat at rhoncus lectus iaculis. Nunc suscipit, est quis molestie pharetra, lacus risus varius ligula, a volutpat purus mi a ligula. Fusce at diam odio. Aenean suscipit venenatis orci, in condimentum enim mattis eu. Ut vel pellentesque ligula. Sed faucibus magna a augue aliquam at venenatis nunc luctus. Nam felis augue, bibendum congue eleifend sit amet, feugiat eu lacus. Vivamus porttitor, augue at convallis condimentum, sapien mi auctor dolor, et laoreet orci purus sit amet elit. Pellentesque vel urna risus, vitae ornare neque. Nulla facilisi. Donec luctus, augue et pulvinar dictum, leo enim eleifend ante, vitae rutrum nibh nibh pretium libero. Praesent mattis mauris id urna dictum faucibus. Maecenas dui lacus, iaculis in egestas et, sollicitudin sit amet tellus. Donec sit amet odio et tellus vehicula elementum. In sed risus at justo adipiscing pretium at nec dolor. Ut semper commodo nisi, at adipiscing lacus ullamcorper tincidunt. In venenatis ante non est dapibus vel congue odio suscipit. Aliquam mi leo, semper quis tristique eget, placerat eget urna. Nunc ante eros, bibendum et blandit bibendum, auctor et elit. Vestibulum sodales, justo in elementum dapibus, arcu neque porttitor dolor, nec luctus purus orci euismod erat. Etiam non lacus est. Donec sodales volutpat elit in tincidunt. Maecenas sagittis feugiat libero blandit eleifend. Pellentesque at placerat metus. Sed augue libero, pretium non ultricies sed, egestas eget dui. Nam feugiat, ipsum eget mattis convallis, eros purus sollicitudin elit, eget convallis sapien orci ac mi. Curabitur sagittis, augue ac mattis tristique, augue quam sagittis nulla, sit amet rhoncus justo lacus in sem. Curabitur volutpat ante augue, aliquam rhoncus lectus. Quisque condimentum, turpis ac tristique faucibus, arcu purus venenatis velit, ac molestie dolor neque at ante. Etiam pulvinar egestas mattis. Duis auctor pellentesque semper. Nam augue tortor, lacinia vulputate dignissim eu, euismod non sem. Proin dui sem, bibendum id varius vel, fringilla ut ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc interdum eros gravida sem lacinia in sodales magna accumsan. Suspendisse euismod dolor augue. Maecenas aliquam viverra vehicula. Aenean pharetra odio mattis elit rutrum pharetra. Nunc in leo id arcu auctor sagittis sit amet ut eros. Duis sed lectus a elit vehicula hendrerit. Nullam sed ipsum vel erat sodales suscipit. </Template> </ig:ExplorerBarItem> </Items> </ig:ExplorerBarGroup> <ig:ExplorerBarGroup Text="Group 4"> <Items> <ig:ExplorerBarItem> <Template> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod mauris nec ipsum dictum non tempus ipsum ultrices. Aliquam erat volutpat. Maecenas sed augue ante. Phasellus ut urna quam, quis pellentesque diam. Cras pellentesque vestibulum vulputate. Nunc erat nibh, aliquam vitae fringilla id, molestie eu ipsum. Maecenas et mauris sem, non congue magna. Aliquam erat volutpat. In pellentesque vulputate dignissim. Proin pulvinar feugiat facilisis. Maecenas pulvinar justo commodo ante placerat at rhoncus lectus iaculis. Nunc suscipit, est quis molestie pharetra, lacus risus varius ligula, a volutpat purus mi a ligula. Fusce at diam odio. Aenean suscipit venenatis orci, in condimentum enim mattis eu. Ut vel pellentesque ligula. Sed faucibus magna a augue aliquam at venenatis nunc luctus. Nam felis augue, bibendum congue eleifend sit amet, feugiat eu lacus. Vivamus porttitor, augue at convallis condimentum, sapien mi auctor dolor, et laoreet orci purus sit amet elit. Pellentesque vel urna risus, vitae ornare neque. Nulla facilisi. Donec luctus, augue et pulvinar dictum, leo enim eleifend ante, vitae rutrum nibh nibh pretium libero. Praesent mattis mauris id urna dictum faucibus. Maecenas dui lacus, iaculis in egestas et, sollicitudin sit amet tellus. Donec sit amet odio et tellus vehicula elementum. In sed risus at justo adipiscing pretium at nec dolor. Ut semper commodo nisi, at adipiscing lacus ullamcorper tincidunt. In venenatis ante non est dapibus vel congue odio suscipit. Aliquam mi leo, semper quis tristique eget, placerat eget urna. Nunc ante eros, bibendum et blandit bibendum, auctor et elit. Vestibulum sodales, justo in elementum dapibus, arcu neque porttitor dolor, nec luctus purus orci euismod erat. Etiam non lacus est. Donec sodales volutpat elit in tincidunt. Maecenas sagittis feugiat libero blandit eleifend. Pellentesque at placerat metus. Sed augue libero, pretium non ultricies sed, egestas eget dui. Nam feugiat, ipsum eget mattis convallis, eros purus sollicitudin elit, eget convallis sapien orci ac mi. Curabitur sagittis, augue ac mattis tristique, augue quam sagittis nulla, sit amet rhoncus justo lacus in sem. Curabitur volutpat ante augue, aliquam rhoncus lectus. Quisque condimentum, turpis ac tristique faucibus, arcu purus venenatis velit, ac molestie dolor neque at ante. Etiam pulvinar egestas mattis. Duis auctor pellentesque semper. Nam augue tortor, lacinia vulputate dignissim eu, euismod non sem. Proin dui sem, bibendum id varius vel, fringilla ut ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc interdum eros gravida sem lacinia in sodales magna accumsan. Suspendisse euismod dolor augue. Maecenas aliquam viverra vehicula. Aenean pharetra odio mattis elit rutrum pharetra. Nunc in leo id arcu auctor sagittis sit amet ut eros. Duis sed lectus a elit vehicula hendrerit. Nullam sed ipsum vel erat sodales suscipit. </Template> </ig:ExplorerBarItem> </Items> </ig:ExplorerBarGroup> </Groups> </ig:WebExplorerBar> </div> <div class="paneRight"> <ig:WebExplorerBar ID="WebExplorerBar2" runat="server" Width="250px" StyleSetName="IG" Height="99%" GroupExpandBehavior="SingleExpanded" EnableSelection="true"> <Groups> <ig:ExplorerBarGroup Text="Group 1"> <Items> <ig:ExplorerBarItem> <Template> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod mauris nec ipsum dictum non tempus ipsum ultrices. Aliquam erat volutpat. Maecenas sed augue ante. Phasellus ut urna quam, quis pellentesque diam. Cras pellentesque vestibulum vulputate. Nunc erat nibh, aliquam vitae fringilla id, molestie eu ipsum. Maecenas et mauris sem, non congue magna. Aliquam erat volutpat. In pellentesque vulputate dignissim. </Template> </ig:ExplorerBarItem> </Items> </ig:ExplorerBarGroup> <ig:ExplorerBarGroup Text="Group 2"> <Items> <ig:ExplorerBarItem> <Template> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod mauris nec ipsum dictum non tempus ipsum ultrices. Aliquam erat volutpat. Maecenas sed augue ante. Phasellus ut urna quam, quis pellentesque diam. Cras pellentesque vestibulum vulputate. Nunc erat nibh, aliquam vitae fringilla id, molestie eu ipsum. Maecenas et mauris sem, non congue magna. Aliquam erat volutpat. In pellentesque vulputate dignissim. </Template> </ig:ExplorerBarItem> </Items> </ig:ExplorerBarGroup> <ig:ExplorerBarGroup Text="Group 3"> <Items> <ig:ExplorerBarItem> <Template> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod mauris nec ipsum dictum non tempus ipsum ultrices. Aliquam erat volutpat. Maecenas sed augue ante. Phasellus ut urna quam, quis pellentesque diam. Cras pellentesque vestibulum vulputate. Nunc erat nibh, aliquam vitae fringilla id, molestie eu ipsum. Maecenas et mauris sem, non congue magna. Aliquam erat volutpat. In pellentesque vulputate dignissim. </Template> </ig:ExplorerBarItem> </Items> </ig:ExplorerBarGroup> <ig:ExplorerBarGroup Text="Group 4"> <Items> <ig:ExplorerBarItem> <Template> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod mauris nec ipsum dictum non tempus ipsum ultrices. Aliquam erat volutpat. Maecenas sed augue ante. Phasellus ut urna quam, quis pellentesque diam. Cras pellentesque vestibulum vulputate. Nunc erat nibh, aliquam vitae fringilla id, molestie eu ipsum. Maecenas et mauris sem, non congue magna. Aliquam erat volutpat. In pellentesque vulputate dignissim. </Template> </ig:ExplorerBarItem> </Items> </ig:ExplorerBarGroup> </Groups> </ig:WebExplorerBar> </div> </form> </body> </html>
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Test.aspx.vb" Inherits="Test" %>
<!DOCTYPE html > <html> <head runat="server"> <title></title> <style type="text/css"> html, body, form { width: 100%; height: 100%; margin: 0px; } .paneLeft { position: absolute; left: 5px; top: 5px; width: 48%; bottom: 5px; border-color: black; border-width: 1px; border-style: dotted; } .paneRight { position: absolute; width: 48%; top: 5px; right: 5px; bottom: 5px; border-color: black; border-width: 1px; border-style: dotted; } </style> </head> <body> <form id="form1" runat="server"> <ig:WebScriptManager ID="WebScriptManager1" runat="server"> </ig:WebScriptManager> <div class="paneLeft"> <ig:WebExplorerBar ID="WebExplorerBar1" runat="server" Width="250px" StyleSetName="IG" Height="99%" GroupExpandBehavior="SingleExpanded" EnableSelection="true"> <Groups> <ig:ExplorerBarGroup Text="Group 1"> <Items> <ig:ExplorerBarItem> <Template> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod mauris nec ipsum dictum non tempus ipsum ultrices. Aliquam erat volutpat. Maecenas sed augue ante. Phasellus ut urna quam, quis pellentesque diam. Cras pellentesque vestibulum vulputate. Nunc erat nibh, aliquam vitae fringilla id, molestie eu ipsum. Maecenas et mauris sem, non congue magna. Aliquam erat volutpat. In pellentesque vulputate dignissim. Proin pulvinar feugiat facilisis. Maecenas pulvinar justo commodo ante placerat at rhoncus lectus iaculis. Nunc suscipit, est quis molestie pharetra, lacus risus varius ligula, a volutpat purus mi a ligula. Fusce at diam odio. Aenean suscipit venenatis orci, in condimentum enim mattis eu. Ut vel pellentesque ligula. Sed faucibus magna a augue aliquam at venenatis nunc luctus. Nam felis augue, bibendum congue eleifend sit amet, feugiat eu lacus. Vivamus porttitor, augue at convallis condimentum, sapien mi auctor dolor, et laoreet orci purus sit amet elit. Pellentesque vel urna risus, vitae ornare neque. Nulla facilisi. Donec luctus, augue et pulvinar dictum, leo enim eleifend ante, vitae rutrum nibh nibh pretium libero. Praesent mattis mauris id urna dictum faucibus. Maecenas dui lacus, iaculis in egestas et, sollicitudin sit amet tellus. Donec sit amet odio et tellus vehicula elementum. In sed risus at justo adipiscing pretium at nec dolor. Ut semper commodo nisi, at adipiscing lacus ullamcorper tincidunt. In venenatis ante non est dapibus vel congue odio suscipit. Aliquam mi leo, semper quis tristique eget, placerat eget urna. Nunc ante eros, bibendum et blandit bibendum, auctor et elit. Vestibulum sodales, justo in elementum dapibus, arcu neque porttitor dolor, nec luctus purus orci euismod erat. Etiam non lacus est. Donec sodales volutpat elit in tincidunt. Maecenas sagittis feugiat libero blandit eleifend. Pellentesque at placerat metus. Sed augue libero, pretium non ultricies sed, egestas eget dui. Nam feugiat, ipsum eget mattis convallis, eros purus sollicitudin elit, eget convallis sapien orci ac mi. Curabitur sagittis, augue ac mattis tristique, augue quam sagittis nulla, sit amet rhoncus justo lacus in sem. Curabitur volutpat ante augue, aliquam rhoncus lectus. Quisque condimentum, turpis ac tristique faucibus, arcu purus venenatis velit, ac molestie dolor neque at ante. Etiam pulvinar egestas mattis. Duis auctor pellentesque semper. Nam augue tortor, lacinia vulputate dignissim eu, euismod non sem. Proin dui sem, bibendum id varius vel, fringilla ut ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc interdum eros gravida sem lacinia in sodales magna accumsan. Suspendisse euismod dolor augue. Maecenas aliquam viverra vehicula. Aenean pharetra odio mattis elit rutrum pharetra. Nunc in leo id arcu auctor sagittis sit amet ut eros. Duis sed lectus a elit vehicula hendrerit. Nullam sed ipsum vel erat sodales suscipit. </Template> </ig:ExplorerBarItem> </Items> </ig:ExplorerBarGroup> <ig:ExplorerBarGroup Text="Group 2"> <Items> <ig:ExplorerBarItem> <Template> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod mauris nec ipsum dictum non tempus ipsum ultrices. Aliquam erat volutpat. Maecenas sed augue ante. Phasellus ut urna quam, quis pellentesque diam. Cras pellentesque vestibulum vulputate. Nunc erat nibh, aliquam vitae fringilla id, molestie eu ipsum. Maecenas et mauris sem, non congue magna. Aliquam erat volutpat. In pellentesque vulputate dignissim. Proin pulvinar feugiat facilisis. Maecenas pulvinar justo commodo ante placerat at rhoncus lectus iaculis. Nunc suscipit, est quis molestie pharetra, lacus risus varius ligula, a volutpat purus mi a ligula. Fusce at diam odio. Aenean suscipit venenatis orci, in condimentum enim mattis eu. Ut vel pellentesque ligula. Sed faucibus magna a augue aliquam at venenatis nunc luctus. Nam felis augue, bibendum congue eleifend sit amet, feugiat eu lacus. Vivamus porttitor, augue at convallis condimentum, sapien mi auctor dolor, et laoreet orci purus sit amet elit. Pellentesque vel urna risus, vitae ornare neque. Nulla facilisi. Donec luctus, augue et pulvinar dictum, leo enim eleifend ante, vitae rutrum nibh nibh pretium libero. Praesent mattis mauris id urna dictum faucibus. Maecenas dui lacus, iaculis in egestas et, sollicitudin sit amet tellus. Donec sit amet odio et tellus vehicula elementum. In sed risus at justo adipiscing pretium at nec dolor. Ut semper commodo nisi, at adipiscing lacus ullamcorper tincidunt. In venenatis ante non est dapibus vel congue odio suscipit. Aliquam mi leo, semper quis tristique eget, placerat eget urna. Nunc ante eros, bibendum et blandit bibendum, auctor et elit. Vestibulum sodales, justo in elementum dapibus, arcu neque porttitor dolor, nec luctus purus orci euismod erat. Etiam non lacus est. Donec sodales volutpat elit in tincidunt. Maecenas sagittis feugiat libero blandit eleifend. Pellentesque at placerat metus. Sed augue libero, pretium non ultricies sed, egestas eget dui. Nam feugiat, ipsum eget mattis convallis, eros purus sollicitudin elit, eget convallis sapien orci ac mi. Curabitur sagittis, augue ac mattis tristique, augue quam sagittis nulla, sit amet rhoncus justo lacus in sem. Curabitur volutpat ante augue, aliquam rhoncus lectus. Quisque condimentum, turpis ac tristique faucibus, arcu purus venenatis velit, ac molestie dolor neque at ante. Etiam pulvinar egestas mattis. Duis auctor pellentesque semper. Nam augue tortor, lacinia vulputate dignissim eu, euismod non sem. Proin dui sem, bibendum id varius vel, fringilla ut ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc interdum eros gravida sem lacinia in sodales magna accumsan. Suspendisse euismod dolor augue. Maecenas aliquam viverra vehicula. Aenean pharetra odio mattis elit rutrum pharetra. Nunc in leo id arcu auctor sagittis sit amet ut eros. Duis sed lectus a elit vehicula hendrerit. Nullam sed ipsum vel erat sodales suscipit. </Template> </ig:ExplorerBarItem> </Items> </ig:ExplorerBarGroup> <ig:ExplorerBarGroup Text="Group 3"> <Items> <ig:ExplorerBarItem> <Template> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod mauris nec ipsum dictum non tempus ipsum ultrices. Aliquam erat volutpat. Maecenas sed augue ante. Phasellus ut urna quam, quis pellentesque diam. Cras pellentesque vestibulum vulputate. Nunc erat nibh, aliquam vitae fringilla id, molestie eu ipsum. Maecenas et mauris sem, non congue magna. Aliquam erat volutpat. In pellentesque vulputate dignissim. Proin pulvinar feugiat facilisis. Maecenas pulvinar justo commodo ante placerat at rhoncus lectus iaculis. Nunc suscipit, est quis molestie pharetra, lacus risus varius ligula, a volutpat purus mi a ligula. Fusce at diam odio. Aenean suscipit venenatis orci, in condimentum enim mattis eu. Ut vel pellentesque ligula. Sed faucibus magna a augue aliquam at venenatis nunc luctus. Nam felis augue, bibendum congue eleifend sit amet, feugiat eu lacus. Vivamus porttitor, augue at convallis condimentum, sapien mi auctor dolor, et laoreet orci purus sit amet elit. Pellentesque vel urna risus, vitae ornare neque. Nulla facilisi. Donec luctus, augue et pulvinar dictum, leo enim eleifend ante, vitae rutrum nibh nibh pretium libero. Praesent mattis mauris id urna dictum faucibus. Maecenas dui lacus, iaculis in egestas et, sollicitudin sit amet tellus. Donec sit amet odio et tellus vehicula elementum. In sed risus at justo adipiscing pretium at nec dolor. Ut semper commodo nisi, at adipiscing lacus ullamcorper tincidunt. In venenatis ante non est dapibus vel congue odio suscipit. Aliquam mi leo, semper quis tristique eget, placerat eget urna. Nunc ante eros, bibendum et blandit bibendum, auctor et elit. Vestibulum sodales, justo in elementum dapibus, arcu neque porttitor dolor, nec luctus purus orci euismod erat. Etiam non lacus est. Donec sodales volutpat elit in tincidunt. Maecenas sagittis feugiat libero blandit eleifend. Pellentesque at placerat metus. Sed augue libero, pretium non ultricies sed, egestas eget dui. Nam feugiat, ipsum eget mattis convallis, eros purus sollicitudin elit, eget convallis sapien orci ac mi. Curabitur sagittis, augue ac mattis tristique, augue quam sagittis nulla, sit amet rhoncus justo lacus in sem. Curabitur volutpat ante augue, aliquam rhoncus lectus. Quisque condimentum, turpis ac tristique faucibus, arcu purus venenatis velit, ac molestie dolor neque at ante. Etiam pulvinar egestas mattis. Duis auctor pellentesque semper. Nam augue tortor, lacinia vulputate dignissim eu, euismod non sem. Proin dui sem, bibendum id varius vel, fringilla ut ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc interdum eros gravida sem lacinia in sodales magna accumsan. Suspendisse euismod dolor augue. Maecenas aliquam viverra vehicula. Aenean pharetra odio mattis elit rutrum pharetra. Nunc in leo id arcu auctor sagittis sit amet ut eros. Duis sed lectus a elit vehicula hendrerit. Nullam sed ipsum vel erat sodales suscipit. </Template> </ig:ExplorerBarItem> </Items> </ig:ExplorerBarGroup> <ig:ExplorerBarGroup Text="Group 4"> <Items> <ig:ExplorerBarItem> <Template> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod mauris nec ipsum dictum non tempus ipsum ultrices. Aliquam erat volutpat. Maecenas sed augue ante. Phasellus ut urna quam, quis pellentesque diam. Cras pellentesque vestibulum vulputate. Nunc erat nibh, aliquam vitae fringilla id, molestie eu ipsum. Maecenas et mauris sem, non congue magna. Aliquam erat volutpat. In pellentesque vulputate dignissim. Proin pulvinar feugiat facilisis. Maecenas pulvinar justo commodo ante placerat at rhoncus lectus iaculis. Nunc suscipit, est quis molestie pharetra, lacus risus varius ligula, a volutpat purus mi a ligula. Fusce at diam odio. Aenean suscipit venenatis orci, in condimentum enim mattis eu. Ut vel pellentesque ligula. Sed faucibus magna a augue aliquam at venenatis nunc luctus. Nam felis augue, bibendum congue eleifend sit amet, feugiat eu lacus. Vivamus porttitor, augue at convallis condimentum, sapien mi auctor dolor, et laoreet orci purus sit amet elit. Pellentesque vel urna risus, vitae ornare neque. Nulla facilisi. Donec luctus, augue et pulvinar dictum, leo enim eleifend ante, vitae rutrum nibh nibh pretium libero. Praesent mattis mauris id urna dictum faucibus. Maecenas dui lacus, iaculis in egestas et, sollicitudin sit amet tellus. Donec sit amet odio et tellus vehicula elementum. In sed risus at justo adipiscing pretium at nec dolor. Ut semper commodo nisi, at adipiscing lacus ullamcorper tincidunt. In venenatis ante non est dapibus vel congue odio suscipit. Aliquam mi leo, semper quis tristique eget, placerat eget urna. Nunc ante eros, bibendum et blandit bibendum, auctor et elit. Vestibulum sodales, justo in elementum dapibus, arcu neque porttitor dolor, nec luctus purus orci euismod erat. Etiam non lacus est. Donec sodales volutpat elit in tincidunt. Maecenas sagittis feugiat libero blandit eleifend. Pellentesque at placerat metus. Sed augue libero, pretium non ultricies sed, egestas eget dui. Nam feugiat, ipsum eget mattis convallis, eros purus sollicitudin elit, eget convallis sapien orci ac mi. Curabitur sagittis, augue ac mattis tristique, augue quam sagittis nulla, sit amet rhoncus justo lacus in sem. Curabitur volutpat ante augue, aliquam rhoncus lectus. Quisque condimentum, turpis ac tristique faucibus, arcu purus venenatis velit, ac molestie dolor neque at ante. Etiam pulvinar egestas mattis. Duis auctor pellentesque semper. Nam augue tortor, lacinia vulputate dignissim eu, euismod non sem. Proin dui sem, bibendum id varius vel, fringilla ut ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc interdum eros gravida sem lacinia in sodales magna accumsan. Suspendisse euismod dolor augue. Maecenas aliquam viverra vehicula. Aenean pharetra odio mattis elit rutrum pharetra. Nunc in leo id arcu auctor sagittis sit amet ut eros. Duis sed lectus a elit vehicula hendrerit. Nullam sed ipsum vel erat sodales suscipit. </Template> </ig:ExplorerBarItem> </Items> </ig:ExplorerBarGroup> </Groups> </ig:WebExplorerBar> </div> <div class="paneRight"> <ig:WebExplorerBar ID="WebExplorerBar2" runat="server" Width="250px" StyleSetName="IG" Height="99%" GroupExpandBehavior="SingleExpanded" EnableSelection="true"> <Groups> <ig:ExplorerBarGroup Text="Group 1"> <Items> <ig:ExplorerBarItem> <Template> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod mauris nec ipsum dictum non tempus ipsum ultrices. Aliquam erat volutpat. Maecenas sed augue ante. Phasellus ut urna quam, quis pellentesque diam. Cras pellentesque vestibulum vulputate. Nunc erat nibh, aliquam vitae fringilla id, molestie eu ipsum. Maecenas et mauris sem, non congue magna. Aliquam erat volutpat. In pellentesque vulputate dignissim. </Template> </ig:ExplorerBarItem> </Items> </ig:ExplorerBarGroup> <ig:ExplorerBarGroup Text="Group 2"> <Items> <ig:ExplorerBarItem> <Template> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod mauris nec ipsum dictum non tempus ipsum ultrices. Aliquam erat volutpat. Maecenas sed augue ante. Phasellus ut urna quam, quis pellentesque diam. Cras pellentesque vestibulum vulputate. Nunc erat nibh, aliquam vitae fringilla id, molestie eu ipsum. Maecenas et mauris sem, non congue magna. Aliquam erat volutpat. In pellentesque vulputate dignissim. </Template> </ig:ExplorerBarItem> </Items> </ig:ExplorerBarGroup> <ig:ExplorerBarGroup Text="Group 3"> <Items> <ig:ExplorerBarItem> <Template> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod mauris nec ipsum dictum non tempus ipsum ultrices. Aliquam erat volutpat. Maecenas sed augue ante. Phasellus ut urna quam, quis pellentesque diam. Cras pellentesque vestibulum vulputate. Nunc erat nibh, aliquam vitae fringilla id, molestie eu ipsum. Maecenas et mauris sem, non congue magna. Aliquam erat volutpat. In pellentesque vulputate dignissim. </Template> </ig:ExplorerBarItem> </Items> </ig:ExplorerBarGroup> <ig:ExplorerBarGroup Text="Group 4"> <Items> <ig:ExplorerBarItem> <Template> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod mauris nec ipsum dictum non tempus ipsum ultrices. Aliquam erat volutpat. Maecenas sed augue ante. Phasellus ut urna quam, quis pellentesque diam. Cras pellentesque vestibulum vulputate. Nunc erat nibh, aliquam vitae fringilla id, molestie eu ipsum. Maecenas et mauris sem, non congue magna. Aliquam erat volutpat. In pellentesque vulputate dignissim. </Template> </ig:ExplorerBarItem> </Items> </ig:ExplorerBarGroup> </Groups> </ig:WebExplorerBar> </div> </form> </body> </html>
Hello Rob,
This is to let you know that I have received your inquiry. To assist me with this, can you attach your mark-up to the thread as a text file. This will make it easier for me to read the content, as it looks a bit 'jumbled' here.
Thanks!
Hey Troy, do you need any additional info from me?
Hi Rob,
I was away from the office on Friday unexpectedly. I am looking into this issue for you and will get an update out to you shortly. In the interim, you can see this blog on the retired controls and the recommended controls to migrate too: http://es.infragistics.com/community/blogs/taz_abdeali/archive/2011/11/17/asp-net-product-changes-in-2011-volume-2.aspx
Thanks Rob!
For this scenario I am doing some testing and comparison to the WebListBar mainly as a frame of reference and to ensure my understanding of the behavior you are looking to carry forward to the WebExplorerBar.
For this I have prepared a test sample** which I have attached to this thread. What I am finding is that the WebListBar in my example is behaving the same as the WebExplorerBar with how it handles the content in the groups in terms of the height of the control container and page size . So, what I ask is if you can verify the behavior of the WebListBar in my example. If the behavior is not consistent with your app, please modify it such that works as you have in your app, or provide me a screen image of how the WebListBar behaves in your app.
In the interim, these pages from our online documentation may help you to resolve your objectiveL
- - http://es.infragistics.com/help/topic/fa0c1e0e-f400-4794-80aa-1b9bcf240d9d
Thank you Rob.
**Please note that I omitted the style sheets due to file size constraints. For proper styling of the WebExplorBar you will need to bring the ig_res folder back into the project. You can do this by opening the project in the designer and select 'OK' when prompted to accept the sytle sheets.
Nikifor, your code definitely set me on the right path.
After some thought, I decided that a WebDataTree is a better user interface for multiple selection than a multi-select listbox. Of course the code that you provided didn't work with the data tree so I had to do some tweaking...
My latest code calculates the height of all of the group bars, and then adjusts the height of the ul.igeb_IGGroupContents and div.igeb_IGItem elements. The end result did works, and it is more flexible because it can support a wider range of HTML content. I am glad to share the code if you would find it useful.
Now I have a completely different problem. I am having trouble wiring up the WebDataTrees that are in the item templates. Just getting a reference to the control in codebehind is a pain in the butt. If the page posts back, the controls lose their viewstate, and so on. Also, the WebDataTrees need to fire their own postback event when the node is checked. I have made a jumbled mess trying to get it all to work right.
With the UltraWebListBar, this was very easy. Controls placed in the item template could be referenced from ASP.Net as if they were placed on the page itself. Events wired up without a hassle. Not so with the WebExplorerBar. It looks like I have to manually wire up each child control.
So, here are my two questions:
Assuming that you have a WebExplorerItem that has a template that contains a single WebDataTree, what is the correct way to wire it up so that the WebDataTree fires events and maintains and viewstate across postbacks (which may initiate from either the WebDataTree itself or outside the template)?
As a second question, what is the correct event to use for populating the nodes into the WebDataTree in the first place, so that it doesn't interfere with viewstate changes on postback?
Hello Rob,Please update me with any progress which you have with this scenario.
Nikifor, thank you very much! I understand what you are doing here, and I believe this will resolve the issue. I will give it a try this afternoon.
-Rob
Hello Rob,I am attaching a sample on which I was working. Basically this cannot be achieved with just setting properties because the html construction is a lot more diferent in the explorer bar. You will have to manually carry for the item which is currently expanded and its height. In the sample the "magic" number 129 is 43 pixels height of collapsed group muptiplied by 3 collapsed groups (one expanded from 4 total). You have to handle 3 events - initialize of the control. resizing of the browser and expanding of a new group.
The attached sample demonstrates a working prototype using the WebListBar. A few notes:
*The WebListBar didn't work with the Lorum Ipsum text either. I replaced that with my actual usage, which is listboxes sized at 100%.
*There is code in the .vb file that populates the listboxes that should be pretty easy to port over to C#.
*My current page is displaying in IE 10 Quirks mode, not Standards. As part of putting together the prototype, I discovered that the WebListBar doesn't work the way I need it to in Standards mode. Part of the goal of the project is to try to get the page to render correctly in Standards mode. This prototype works properly when displayed in IE10 Quirks. I modified the <html> tag to force quirks, so you can see the desired behavior.
*I also included a screenshot of the desired behavior, in case you have difficulty reproducing it.