Hello.
I like to set fixed size (width=300px, height=100%) of the webtree not expanding over the settings when adding nodes or long nodes labels (labels should be clipped). I have placed the webtree in html table cell (style = width=300px; height=100%).
But it does not work. There is also now CSOM function to resize the tree like the webgrid.
Thanks for any help. Markus
Using the CSOM you can get to the root HTML Element of the UltraWebTree instance (<div>) and you can resize it directly using .style.height. For example:
<ignav:UltraWebTree ID="UltraWebTree1" runat="server" DefaultImage="" HiliteClass="" HoverClass="" Indentation="20" Height="60px"> <Levels> <ignav:Level Index="0" /> </Levels> <Nodes> <ignav:Node Text="Root Node"> <Nodes> <ignav:Node Text="Child Node"> </ignav:Node> <ignav:Node Text="Child Node"> </ignav:Node> <ignav:Node Text="Child Node"> </ignav:Node> </Nodes> </ignav:Node> <ignav:Node Text="Root Node"> <Nodes> <ignav:Node Text="Child Node"> </ignav:Node> <ignav:Node Text="Child Node"> </ignav:Node> <ignav:Node Text="Child Node"> </ignav:Node> </Nodes> </ignav:Node> </Nodes> </ignav:UltraWebTree> <br /><br /> <asp:Button ID="Button1" runat="server" onclientclick="return resizeTreeView()" /> <script type="text/javascript"> function resizeTreeView() { var tree = igtree_getTreeById("<%= UltraWebTree1.ClientID %>"); tree.Element.style.height = "500px"; return false; } </script>
Hope this helps.
Thanks, that works. I put this at the tree_InitializeTree client- event :
var tree = igtree_getTreeById(treeId);
treeHeight = clientHeight - 60;
tree.Element.style.height = treeHeight;
}
Thanks. Markus
Oh, just one last idea why the <%= ServerID.ClientID %> approach might not work.
If your server side ID has underscores "_" the <%# ServerID.ClientID %> approach will not work. IG controls replace the "_" to make a safer client-side ID. Getting the client ID in client side InitializeTree event is the best approach (or you can replace "_" with "" on client, but that an ugly one)
Alright - sounds great. Thanks for sharing your solution in public forums - I am sure a lot of developers will find this useful.
Just one final point - in the onresize event handler you can make sure that the global treeID is set first, since it is possible that onresize can be fired before the page has finished loading and the tree Init event is fired (for example, end users playing with browser size while the page is still loading). In this case you will get a javascript error if you do not have this check.
HTH,
Hello Rumen,
Yes, I have correct server side code running with an id of "NavTree" for the control. I took your suggestion from the init method to store a global variable for the treeId (gNavTreeId = treeId). This worked just fine for me, and was actually preferred as I then called a "resize" function from both the init method, as well as from the window.onresize javascript call. I now have the tree control resizing correctly in both instances.
Thank you for your help,Dan
Hello Dan,
It is very weird that igtree_getTreeById("<%= NavTree.ClientID %>"); is not working for you. Do you have the corresponding server side UltraWebTree with ID NavTree defined in the server code? Or maybe you are adding it programmatically, or it is inside user control, master page?
In any case, one additional method to get the client side ID of the treeview is to hook the client side InitializeTree event - it gets fired when the treeview intializes on the client with a single parameter - the client-side ID of the tree. You can then store it in a global javascript variable and use it later on in the resize event of the window to obtain a reference to the treeview itself.
More info on client-side events for UltraWebTree can be found here:
http://help.infragistics.com/Help/NetAdvantage/NET/2008.2/CLR2.0/html/WebTree_Client_Side_Events_CSOM.html
Please, let me know if this helps.
Rumen,
I've been following this, as I need the same functionality. Your snippet var tree = igtree_getTreeById("<%= NavTree.ClientID %>"); isn't working for me. I get a null reference. The only way I can use that code is inside the Tree_Init event. I need to do this from the resize as you suggested, but this doesn't take a parameter such as (treeId).
Any thoughts on how to reference the properties of the Tree control usng the CSOM resize?
Thanks,Dan