How do i set WebExplorerBar's GroupContentsHeight from javascript?
i have a default.aspx page with:
<div id="page_center_div" align="center"> <div id="header_div" style="position: relative; top: 0px; left: 0px; width: 1044px; height: 90px; border: 0px"> <iframe id="top1" name="top1" frameborder="0" marginheight="0" marginwidth="0" scrolling="no" width="100%" height="100%" src="navigation/top.aspx" style="background-color: Transparent" allowtransparency="true"></iframe> </div> <div id="navigation_div" style="position: relative; top: 0px; left: 0px; width: 1044px; height: <%=ClientHeight%>; border: 0px"> <iframe id="nav" name="nav" align="left" frameborder="0" marginheight="0" marginwidth="0" scrolling="auto" width="230px" height="100%" src="navigation/nav.aspx" style="background-color: Transparent" allowtransparency="true"></iframe> <iframe id="main" name="main" align="right" frameborder="0" marginheight="0" marginwidth="0" scrolling="auto" allowtransparency="true" style="background-color: Transparent" width="814px" height="100%" src="<%=WelcomePage%>"></iframe> </div> <div id="footer_div" style="position: relative; top: 0px; left: 0px; width: 1044px; height: 21px"> <iframe id="bottom" name="bottom" frameborder="0" marginheight="0" marginwidth="0" scrolling="no" width="100%" height="100%" src="navigation/bottom.aspx" style="background-color: Transparent" allowtransparency="true"></iframe> </div></div>
and i need to change the GroupContentsHeight property on WebExplorerBar which is located in the iframe id="nav" every time the window resizes.
the nav.aspx contains:
<div> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <ig:WebExplorerBar ID="UltraWebListbar1" runat="server" Width="100%" Height="100%" GroupExpandBehavior="SingleExpanded" GroupContentsHeight="100%"> </ig:WebExplorerBar></div>
i try JQuery in default.aspx page as$('#nav').contents().find('#UltraWebListbar1').prop('GroupContentsHeight', window.innerHeight - (30 * 8));$('#nav').contents().find('#UltraWebListbar1').attr('GroupContentsHeight', window.innerHeight - (30 * 8));
but both .prop and .attr are not working.
Hello,
You are getting reference to the DOM element of the WebExplorerBar, but 'GroupContentsHeight' is not an html attribute. The approach to set properties on the client side would be to get reference to the client side object model of the control like this:
barControl = ig_controls.UltraWebListbar1;
and then set the property as follows: barControl.set_visible(false)
but the GroupContentHeight property is not exposed in the client side object.
So I suggest you find the corresponding DOM elements for each group and set its height as follows:
var groupElements = document.getElementsByClassName("igeb_GroupContents");
for (var i = 1; i < groupElements.length; i++) { groupElements[i].style.height = "100%";}
Please let me know if you have further questions on the issue.
That solution is for older version. I'm converting an 2009 website into a 2014.2, and on the old version that solution was used as:
function UltraWebListbar1_resize(){ var myListBar = iglbar_getListbarById("UltraWebListbar1"); var new_list_height = parseInt(parent.document.getElementById('navigation_div').style.height,0); if(myListBar != null) { myListBar.Element.style.height = (new_list_height - 2) + "px"; } else { //alert("null list bar"); }}
But it's not working with the new version because of iglbar_getListbarById('iglbar_getListbarById' is undefined).
I try the following:
$(window).on('resize', function () { var groupElements = document.getElementById('nav').getElementsByClassName("igeb_GroupContents"); $('#nav').contents().find('#test').text(groupElements .length.toString()); for (var i = 1; i < groupElements .length; i++) { groups.style.height = "900px"; }});
with that i don't get any errors in the browser inspectors, but the length of the groupElements is 0.PS. the 900px is a test number
$(window).on('resize', function () { var groupElements = $('#nav').contents().find('#UltraWebListbar1').contents(); $('#nav').contents().find('#test').text(groupElements.length.toString()); for (var i = 1; i < groupElements.length; i++) { groups.style.height = "900px"; }});
here i get:"Unable to set property 'height' of undefined or null reference" with groupElements length equals 5?(the length should be greater than 7)?
$(window).on('resize', function () { var groupElements = $('#nav').contents().find('#UltraWebListbar1').contents(); $('#nav').contents().find('#test').text(groupElements.length.toString()); for (var i = 1; i < groupElements.length; i++) { groupElements.attr("height", "100px"); } });
on that one i still get the groupElements length as 5 with no erros regarding the attr, but i don't get any visual changes on the browsers, it's like it never setted.
1) It is expected that var myListBar = iglbar_getListbarById("UltraWebListbar1"); will not work with the newer version. As mentioned you can get reference to the client side object of the control as follows:
var myListBar = ig_controls.UltraWebListbar1;
2) As mentioned above I suggest manipulating the height of the DOM elements containing the groups, so your code will look like this:
function UltraWebListbar1_resize(){ var myListBar = ig_controls.UltraWebListbar1; // just example how to get reference, you do not need it for the operations below
for (var i = 1; i < groupElements.length; i++) { groupElements[i].style.height = "100%"; }}
Please test it on your side and let me know if this works. Looking forward to hearing from you.
Best Regards,Hristo AnastasovDeveloper Support EngineerInfragistics, Inc.
I'm just following up to see if you need any further assistance with this issue. If so please let me know.