Geeks With Blogs
Stuff I do my notepad
Technorati Tags: ,,

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:

 TreeView_BeforeNodeExpanded TreeView_AfterNodeExpanded

 

Ask a question is something is not as clear.

Happy programming!

Posted on Wednesday, January 27, 2010 1:05 AM jQuery , SQL , ASP.NET | Back to top


Comments on this post: ASP.Net TreeView - scroll to the expanded node

# re: ASP.Net TreeView - scroll to the expanded node
Requesting Gravatar...
hi ,
i need a functionality in tree view
like when i insert item name in textbox outside treeview it will search item in treeview, if the item is at the bootom ,it should scroll to selected item. my code is running fine, it search item but it is not scrolling to item which is selected at the bootom of tree view,pls help
Left by naveen on Aug 02, 2010 7:35 PM

# re: ASP.Net TreeView - scroll to the expanded node
Requesting Gravatar...
Sorry, I didn't see you question sooner.

I created a small example that might help you http://cid-4fb5a48846336376.office.live.com/self.aspx/.Public/TreeViewScroll.zip

Please let me know if something is not clear.
Left by vladimirl on Aug 03, 2010 5:41 PM

# re: ASP.Net TreeView - scroll to the expanded node
Requesting Gravatar...
Thanks, added :)
Left by ciprian on Nov 14, 2010 2:45 PM

Your comment:
 (will show your gravatar)


Copyright © vladimirl | Powered by: GeeksWithBlogs.net | Join free