I have a page that contains a variable number of TreeView objects lined up horizontally, with the TreeView objects being created during Page_Init. The structure is like this:
<div style="overflow:auto">
<RadAjaxPanel>
<asp:Table>
<asp:TableRow>
[ one asp:TableCell object per tree to be displayed ]
</asp:TableRow>
</asp:table>
</RadAjaxPanel>
</div>
Each RadTreeView uses a NodeTemplate to customize its display, as each node may contain various combinations of text and graphics. All of this works very well and displays correctly. I assign an ID to an element inside one particular node (or to the node itself, using Node.Attributes("id") = "FixedValue"). Assigning the ID works fine, and all the TreeViews continue to display properly. The ID is set in ClientIDMode=Static.
The problem comes when I try to use window.location.hash to make the external div scroll to display the element that I assigned an ID to. On Internet Explorer 10, this works correctly. In Firefox 20 and Chrome 26, the first node in the tree containing the element to which I am scrolling is vertically offset, moving it up and partially out of the visible area of the div (each node contains up to three lines of text; the first line is pushed out of the visible area). The other RadTreeView objects continue to display correctly; only the one tree containing the scrolled-to object is vertically repositioned.
Any thoughts on what might be causing this display issue? All three browsers I've tested on have been on Windows.
<div style="overflow:auto">
<RadAjaxPanel>
<asp:Table>
<asp:TableRow>
[ one asp:TableCell object per tree to be displayed ]
</asp:TableRow>
</asp:table>
</RadAjaxPanel>
</div>
Each RadTreeView uses a NodeTemplate to customize its display, as each node may contain various combinations of text and graphics. All of this works very well and displays correctly. I assign an ID to an element inside one particular node (or to the node itself, using Node.Attributes("id") = "FixedValue"). Assigning the ID works fine, and all the TreeViews continue to display properly. The ID is set in ClientIDMode=Static.
The problem comes when I try to use window.location.hash to make the external div scroll to display the element that I assigned an ID to. On Internet Explorer 10, this works correctly. In Firefox 20 and Chrome 26, the first node in the tree containing the element to which I am scrolling is vertically offset, moving it up and partially out of the visible area of the div (each node contains up to three lines of text; the first line is pushed out of the visible area). The other RadTreeView objects continue to display correctly; only the one tree containing the scrolled-to object is vertically repositioned.
Any thoughts on what might be causing this display issue? All three browsers I've tested on have been on Windows.
1 Answer, 1 is accepted
0
Hello,
Boyan Dimitrov
the Telerik team
As far as I understood you are trying to achieve functionality that will scroll to a node with attribute set to a specific value if that node is not in the current visible area of the RadTreeView control.
An easy and convenient way of achieving that functionality would be to use the RadTreeView node client-side object built-in method scrollIntoView. Here you may find more information about the RadTreeView node client-side object programming including the scrollIntoView method.
You may find here also a help article that shows a real life scenario example when you can scroll to a specific node on page load.
Boyan Dimitrov
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.