When we expand TreeView node JavaScript function TreeView_ToggleNode gets executed (it’s part of the TreeView control itself).
So we will “override” this function and add our own functionality to perform scroll to the expanded node.
To find source code of TreeView_ToggleNode function you can use IE Developer Toolbar or Firebug.
I removed some code from this function that I don’t need to make it shorter. Here is the result. Everything should be pretty self explanatory from the code.
Here is the modified function, just add it in you page:
1: TreeView_ToggleNode = function (data, index, node, lineType, children)
2: {
3: var img = node.childNodes[0];
4: var newExpandState;
5:
6: if (!$('#' + children.id).is(':visible'))
7: {
8: children.style.display = "block";
9: newExpandState = "e";
10: img.src = data.images[5];
11: img.title = data.collapseToolTip.replace(/\{0\}/, TreeView_GetNodeText(node));
12:
13: //* 'divTreeViewScrollTo' is the id of the div where we put our tree view
14: if (($(node).position().top + $(children).height() + 10) > $('#divTreeViewScrollTo').height())
15: {
16: if ($(children).height() > $('#divTreeViewScrollTo').height())
17: $('#divTreeViewScrollTo').scrollTop($(node).position().top + $('#divTreeViewScrollTo').scrollTop() - 10);
18: else
19: $('#divTreeViewScrollTo').scrollTop($(children).height() + $('#divTreeViewScrollTo').scrollTop() + 20);
20: }
21:
22: $('#divTreeViewScrollTo').scrollLeft($(node).position().left + $('#divTreeViewScrollTo').scrollLeft() - 10);
23: }
24: else
25: {
26: children.style.display = "none";
27: newExpandState = "c";
28: img.src = data.images[4];
29: img.title = data.expandToolTip.replace(/\{0\}/, TreeView_GetNodeText(node));
30: }
31:
32: data.expandState.value = data.expandState.value.substring(0, index) + newExpandState + data.expandState.value.slice(index + 1);
33: }
Result before node expanded and after node has been expanded ad scrolled top and left:
Ask a question is something is not as clear.
Happy programming!