0

Tree scrolls to blank at bottom of list when data refreshed dynamically

asked 2010-02-08 23:41:55 +0800

chrisj gravatar image chrisj
30 1 1 1

I am using a tree to display a list of search results. When the user runs a new search, I completely replace all data in the tree with new results.

The problem I am having occurs when the new tree data has fewer results than the previously displayed tree. The tree object does not resize, but retains its full length, and it scrolls to the blank lines at the bottom of the list.

I can make the tree scroll to the top by using "setSelectedItem", but I don't want to do this. The application uses select events to retrieve more leaves for the tree, and this event will not trigger if the user clicks on an item that has been programmatically selected. (My users will be untrained members of the general public, so I cannot reasonably expect them to cope with this concept.)

My question is - Is there any other way I can force the tree to scroll to a place that actually contains some data? Alternatively, can I force the tree object to resize so that it does not contain blank pages?

Here is the zul definition of my tree:

<tree id="productTree" forward="onSelect=productfinder.onNodeSelect()" rows="10" width="360px">
</tree>

Here is how the tree is declared in java.

  ArrayList allProducts = new ArrayList();
  Tree productTree;
  SimpleTreeModel treeModel;
  SimpleTreeNode rootNode;
      
  rootNode = new PFTreeNode("Products", allProducts);

  //create the tree model
  treeModel = new SimpleTreeModel(rootNode);

Here is how I populate the tree model. The "places" list is retrieved using a call to a web service. (not shown)

        {
          for (int i = 0; i <
                  places.size(); i++)
          {
            NamedPlace place = places.get(i);
            //if place name not in list of feature types to filter
            //add to list
            if (!this.placeNameFilterList.contains(place.getFeatureType()))
            {
              addGmarker(place);
              PFTreeNode placeNode = new PFTreeNode(place, new ArrayList());
              allProducts.add(placeNode);
            }
          }
        }
        productTree.setModel(treeModel);

This works correctly the first time the tree is displayed, but when I repopulate the tree with a new search, it scrolls to the bottom, showing only blank lines below the retrieved data.


Before I refresh with a new query, I clear the model like this:

    //clear the products list
    allProducts.clear();

    //update the tree
    productTree.setModel(treeModel);

The actual data displayed is good. The tree contains all of the data that is expected. My only problem is that ZK forces the tree to scroll to the bottom and display a blank page. Can anyone please suggest how I can avoid this?

Thanks,
Chris

delete flag offensive retag edit

13 Replies

Sort by ยป oldest newest

answered 2010-02-09 19:01:55 +0800

samchuang gravatar image samchuang
4084 4

updated 2010-02-09 19:09:18 +0800

Hi

Do you mean you will have a big tree, and it will focus to the end? maybe you could consider using paging mode.

or you could use tree.selectItem()

link publish delete flag offensive edit

answered 2010-02-09 20:56:36 +0800

chrisj gravatar image chrisj
30 1 1 1

Hi samchuang, and thank you for your suggestions.

samchuang wrote:
>Do you mean you will have a big tree, and it will focus to the end?

It focuses to blank pages, past the end of the tree data.

>maybe you could consider using paging mode.
A possibility, but I would like to fix the problem without this if I can.

>or you could use tree.selectItem()
This will position the tree correctly (I tried and it works), but setting the item to selected causes another problem in my application, so I don't want to do this.

link publish delete flag offensive edit

answered 2010-02-10 17:46:23 +0800

samchuang gravatar image samchuang
4084 4

Hi

I have another idea, how about using "Clients. moveTo(x, y)"

link publish delete flag offensive edit

answered 2010-02-10 19:00:33 +0800

chrisj gravatar image chrisj
30 1 1 1

samchuang wrote
>I have another idea, how about using "Clients. moveTo(x, y)"

That sounds interesting. Is there a way to make it scroll the Tree object rather than the whole browser window?

(My browser window is in the right place, only the tree object is focused outside the range of its data)

link publish delete flag offensive edit

answered 2010-02-10 19:13:21 +0800

samchuang gravatar image samchuang
4084 4

Hi

you could call tree.getLeft() tree.getTop() to get X, and Y position

link publish delete flag offensive edit

answered 2010-02-10 19:27:06 +0800

chrisj gravatar image chrisj
30 1 1 1

I don't understand. That would let me move the browser window to the position of the tree, yes?

The browser window already shows the tree. I need to scroll the Tree to the top of its data.

link publish delete flag offensive edit

answered 2010-02-10 19:44:44 +0800

samchuang gravatar image samchuang
4084 4

Hi

I see, then, maybe you could try tree.setTop();

link publish delete flag offensive edit

answered 2010-02-24 18:44:44 +0800

chrisj gravatar image chrisj
30 1 1 1

Hi samchuang.

I apologise for my slow response to your last post. I have been swamped with a lot of other problems.

Thank you for the suggestion, I will try it as soon as I can.

Chris

link publish delete flag offensive edit

answered 2010-03-20 14:41:49 +0800

jaikarthik gravatar image jaikarthik
69

Hi I'm having similar problem.. I'm rebuilding the tree when new data is added. when i rebuild the the tree horizontal scroll bar gets reset to left position.. i want to maintain the scroll bar in same position after rebuilding the tree. I tried getTop and getLeft both are not returning scroll bar position :( and Clients. moveTo(x, y) moves the browser and not the scroll bar in tree component :( any help is appreciated...

link publish delete flag offensive edit

answered 2010-03-21 20:10:52 +0800

samchuang gravatar image samchuang
4084 4

Hi

I found another way of solving the problem, using Clients.scrollIntoView(component), this function will display the compoent you like to display, refer to javadoc

the example using grid, but you could change to use tree,

<zk>
 <zscript><![CDATA[
  String[] data = new String[100];
  for(int j=0; j < data.length; ++j) {
   data = "option "+j;
  }    
  ListModel strset = new SimpleListModel(data);

 ]]></zscript>
 <intbox id="intbox"/>
 <button label="scroll" >
 <attribute name="onClick"><![CDATA[
  int index = intbox.getValue();                                    
  Row row = (Row)grid.getRows().getChildren().get(index);
  Clients.scrollIntoView(row);
 ]]></attribute>
 </button>
 <grid id="grid" model="${strset}" width="100px" height="100px">
  <columns>
   <column label="options" />
  </columns>
 </grid> 
</zk>

link publish delete flag offensive edit
Your reply
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools

Follow

RSS

Stats

Asked: 2010-02-08 23:41:55 +0800

Seen: 815 times

Last updated: Feb 26

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More