How to goto a particular vertical position of scroll in a dynamic canvas

Hi

I have a canvas which displays a dynamic tree. the tree changes on runtime. everytime the tree changes the page gets refreshed  and the scroll button of the canvas moves to the top most position. As the tree is big, users find it difficult everytime to scroll down or to their desired position after every refresh. Users who use the product want the scroll position of a canvas exactly at the same place where it was before refreshing. i tried using vertical scroll position, but it doesnt seem to be working. I use Action script 3. Any suggestions
LVL 10
MuraliAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

conagramanCommented:
There might not be a way to do what you want to do. It depends on the new data. If you have names of people and they are displayed alphabetically and you add a new name it might not be added at the end. But let’s assume this is not the case and you know the new data will be added at the end - If you know where the line of code that sets the Y position in your code is you could just remove it. If that is not an option you could get the Y position before the refresh then after the refresh set the Y position back to the same Y position.  
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
dgofmanCommented:
Before you changing data in the tree store as local variable a current verticalScrollBarPosition
and after collection event dispatching set verticalScrollBarPosition value to last value
0
MuraliAuthor Commented:
Hi

I took the verticalScrollBarPosition and set it after refresh. It is not working. I tried doing tree.verticalScrollPosition =  tree.maxVerticalScrollPosition; it is still not working.

Is there any way to do it by capturing the current session.

Let me know if there is any other way to do it.
0
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

petiexCommented:
I think you need to wait for the update complete event to fire on the tree after the refresh before you set the verticalScrollPosition on it. Here's what you might try:
private var lastScroll:int=0;
private var service:HTTPService; // whatever service you are getting the data from

/** Application creation complete function*/
private function creationCompleteHandler(event:Event):void{
   service.addEventListener("result", resultHandler);
  // other creationComplete code
}

/** Whatever function you call to update the data */
private function yourUpdateFunction():void{
   lastScroll = tree.verticalScrollPosition;
   // ... insert update data code here presumably including service.send()
}

/** The listener for when new data is received */
private function resultHandler(event:ResultEvent):void{
    tree.addEventListener("updateComplete", treeUpdated);
}

/** */
private function treeUpdated(event:Event):void{
   tree.removeEventListener(event.type, treeUpdated);//don't want to invoke this with update events not related to data received   
   tree.verticalScrollPosition = lastScroll;
}

Open in new window

0
dgofmanCommented:
Murali1984:
As you can see in my post I mentioned you must set old value after collection event:

"and after collection event dispatching set verticalScrollBarPosition value to last value"

You can set in you custom component by overriding validateDisplayList function like this

override public function validateDisplayList():void{
     this.verticalScrollPosition == this.maxVerticalScrollPosition;
    super.validateDisplayList();
 }

or attach an event listener

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx">
	<fx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
			import mx.events.CollectionEvent;
			import mx.events.FlexEvent;
			
			[Bindable]
			public var ac:ArrayCollection = new ArrayCollection();

			public function clickAddChildren():void {
				var newChild:Object = new Object();
				newChild.label = "New Child " + ac.length;
				newChild.children = new ArrayCollection();
				tree.dataDescriptor.addChildAt(tree.selectedItem, newChild, ac.length, ac);
			}

			protected function creationCompleteHandler(event:FlexEvent):void{
				tree.dataProvider.addEventListener(CollectionEvent.COLLECTION_CHANGE, function(event:Event):void{
					tree.verticalScrollPosition = tree.maxVerticalScrollPosition;
				});
			}
			
		]]>
	</fx:Script>
	<s:layout>
		<s:VerticalLayout/>
	</s:layout>
	<mx:Tree width="200" id="tree" dataProvider="{ac}" creationComplete="creationCompleteHandler(event)"/>
	<mx:Button label="Add Child" click="clickAddChildren()"/>

</s:Application>

Open in new window

0
conagramanCommented:
can you post your fla file or code you are using?
0
petiexCommented:
I just realized you said you refresh the page every time the data is updated. Is this true? Are you actually reloading the application every time you get new data? How exactly are you loading the data?
0
MuraliAuthor Commented:
am sorry i wont be able to paste the code. Here is what happens....

my tree is inside canvas. the data provider to the tree is an xml. There are alot  of nodes. each leaf of a node is an executable command. when a command (i.e the leaf of the tree) is executed the status is sent and stored in the xml. Hence the entrie tree is refreshed and the updated value if the xml is obtained as the dataprovider. the nodes in my tree are fixed. it is not added dynamically. the data in the data provider (xml) is refreshed every time. this refreshes my canvas.  during this refresh i want my scroll bar to be fixed and not move on to the top..
0
dgofmanCommented:
Ok, in this case you need to listen tree CoolectrionEvent type, BUT...
If the old max verticalscrollbar is highest then new max vertical scrollbar the tree will reset to zero.
One more workaround Binding maxVerticalScroll bar. In this example I am providing two solutions either one should work for you

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx">
	<fx:Declarations>
		<fx:XML id="xml">
			<node label="Root">
				<node label="Folder a">
					<node label="item 1 a"/>
				</node>
				<node label="Folder b">
					<node label="item 1 b"/>
					<node label="item 2 b"/>
				</node>
				<node label="Folder c">
					<node label="item 1 c"/>
					<node label="item 2 c"/>
				</node>
				<node label="Folder d">
					<node label="item 1 d"/>
					<node label="item 2 d"/>
				</node>
				<node label="Folder a">
					<node label="item 1 a"/>
				</node>
				<node label="Folder b">
					<node label="item 1 b"/>
					<node label="item 2 b"/>
				</node>
				<node label="Folder c">
					<node label="item 1 c"/>
					<node label="item 2 c"/>
				</node>
				<node label="Folder d">
					<node label="item 1 d"/>
					<node label="item 2 d"/>
				</node>
				<node label="Folder a">
					<node label="item 1 a"/>
				</node>
				<node label="Folder b">
					<node label="item 1 b"/>
					<node label="item 2 b"/>
				</node>
				<node label="Folder c">
					<node label="item 1 c"/>
					<node label="item 2 c"/>
				</node>
				<node label="Folder d">
					<node label="item 1 d"/>
					<node label="item 2 d"/>
				</node>
			</node>
		</fx:XML>
	</fx:Declarations>
	<fx:Script>
		<![CDATA[
			import mx.collections.XMLListCollection;
			import mx.events.CollectionEvent;
			import mx.events.FlexEvent;
			
			[Bindable]
			public var ac:XMLListCollection = new XMLListCollection();
			
			public function refresh():void {
				tree.dataProvider = xml.node;
			}
			
			protected function creationCompleteHandler(event:FlexEvent):void{
				ac = new XMLListCollection(xml.node);
				tree.addEventListener(CollectionEvent.COLLECTION_CHANGE, function(event:Event):void{
					tree.verticalScrollPosition = tree.maxVerticalScrollPosition;
				});
			}
			
		]]>
	</fx:Script>
	<s:layout>
		<s:VerticalLayout/>
	</s:layout>
	<fx:Binding source="tree.maxVerticalScrollPosition" destination="tree.verticalScrollPosition"/>

	<mx:Tree width="200" id="tree" labelField="@label" dataProvider="{ac}" creationComplete="creationCompleteHandler(event)" showRoot="false"/>
	<mx:Button label="Refresh" click="refresh()"/>
	
</s:Application>

Open in new window

0
MuraliAuthor Commented:
Hi

I am using older version of flex. so "xmlns:fx="http://ns.adobe.com/mxml/2009" " is not working in my program.. i tried adding an event listener as you showed in your previous program.

public function listenToTree(event:FlexEvent) : void
             {
                   tree.addEventListener(CollectionEvent.COLLECTION_CHANGE, function(event:Event):void{
                              tree.verticalScrollPosition = tree.maxVerticalScrollPosition;});
             }


i called this function the creationcomplete of the tree. but it is not working and the scroll is still on the top of the page after every refresh.


Is there any way i can get the exact co ordinates of the current position of my scroll button. so that i can goto that point after refresh. i tried capturing the value of tree.verticalscrollposition before the refresh and print it using alert.show.  but i found that it is giving random values and the values are increasing with every refresh.
0
dgofmanCommented:
did you try using Binding Metadata?

<fx:Binding source="tree.maxVerticalScrollPosition" destination="tree.verticalScrollPosition"/>


or for SDK 3

<mx:Binding source="tree.maxVerticalScrollPosition" destination="tree.verticalScrollPosition"/>
0
MuraliAuthor Commented:
Hi

I tried using binding. It seems the refresh happens many times during the execution of the command. Hence it is not working. Is there any way we can get the co ordinates of the scroll bar position.
0
dgofmanCommented:
You said before you want to scroll to bottom (last scroll position)

Binding should fix your problem. What Flex SDK are you using 3 or 4?

<mx:Binding source="tree.maxVerticalScrollPosition" destination="tree.verticalScrollPosition"/>
 
0
MuraliAuthor Commented:
Thanks...
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Apache Flex

From novice to tech pro — start learning today.