1

Tree scrolling - loading data on demand

asked 2013-10-20 14:41:21 +0800

jcosta gravatar image jcosta
10 1

Hi,

Is there a way to implement a listbox scrolling-on-demand like feature on a tree? In a ListModel, we have a getElementAt method, which we can use to load the next batch of data to load on the listbox. I would like to do the same with a tree, based on the number of level-1 nodes (the child nodes of the root node).
So, for example, I would like to load 50 level-1 nodes initially, and as the user scrolls down, load the next batch. Is there any way this can be achieved?

José.

delete flag offensive retag edit

2 Answers

Sort by » oldest newest most voted
0

answered 2017-05-09 08:53:30 +0800

eclipse2 gravatar image eclipse2
17 4

I have the same question. I need to implement one load on demand in one tree, because I have nodes that can have more than 1000 children, and I don't want to load them all in the page.

link publish delete flag offensive edit
0

answered 2017-05-13 09:57:54 +0800

LuigiFabbri gravatar image LuigiFabbri
46 5

I use this code and work.

import org.zkoss.zk.ui.IdSpace; import org.zkoss.zk.ui.event.Event; import org.zkoss.zk.ui.event.EventListener; import org.zkoss.zk.ui.event.Events; import org.zkoss.zk.ui.util.Clients; import org.zkoss.zul.Listbox; import org.zkoss.zul.Listhead;

public class ListBoxNew extends Listbox implements IdSpace{ private static final long serialVersionUID = 1L; private OasiListBoxLayoutModel layoutModel=null; //private boolean posizionaPiede=false; private int distEndScroll=60; private int diffPrec=0; private int diff=0; private boolean fineScroll=false; protected int posScroll=0; private int rowScroll=0; public int getRowScroll() { return rowScroll; } public void setRowScroll(int rowScroll) { this.rowScroll = rowScroll; } public void setLayoutModel(OasiListBoxLayoutModel layoutModel) {

    String script = "if ((this.$n('body').scrollHeight-this.$n('body').scrollTop-this.$n('body').offsetHeight)<="+this.distEndScroll+") {zAu.send(new zk.Event(this, 'onScroll', this.$n('body').scrollLeft+','+this.$n('body').scrollTop+','+this.$n('body').scrollHeight+','+this.$n('body').offsetHeight));}this.$_doScroll();";
    this.setWidgetOverride("_doScroll","function () {"+script+"}");
    this.addEventListener(1,"onScroll",new EventListener<Event>() 
    {       
        public void onEvent(Event event) throws Exception 
        {   
             if ( !ListBoxNew.this.isVisible() )
             {
                 event.stopPropagation();
                 return;
             }  
             String[] arrEle=event.getData().toString().split(",");
             int pos=Integer.valueOf(arrEle[1]);
             int posmax=Integer.valueOf(arrEle[2]);
             int posOffset=Integer.valueOf(arrEle[3]);
             int diff=posmax-pos-posOffset;
             ListBoxNew.this.diffPrec=ListBoxNew.this.diff;
             ListBoxNew.this.diff=diff;
             if ( diff>ListBoxNew.this.diffPrec )
             {
                 ListBoxNew.this.fineScroll=false;
                 return;    
             }
             else if ( diff==ListBoxNew.this.diffPrec && diff==0 )  // Parte nuova inserita da vedere se va bene
             {                                         //
                 ListBoxNew.this.fineScroll=false;                  //
                 ListBoxNew.this.diff=1;                            //                                                   
             }   
             if ( diff<=ListBoxNew.this.distEndScroll && ListBoxNew.this.posScroll==0 )
             {  
                  if ( !ListBoxNew.this.fineScroll )
                  {
                      ListBoxNew.this.posScroll=pos;
                      ListBoxNew.this.fineScroll=true;
                      Events.postEvent("onEndScroll", ListBoxNew.this, "up");
                  }
             }
             else
                 ListBoxNew.this.fineScroll=false;
        }
    });

    this.addEventListener(1,"onAfterRender",new EventListener<Event>() 
    {       
        public void onEvent(Event event) throws Exception 
        {   
            if ( ListBoxNew.this.posScroll>0 )
            {

                ListBoxNew.this.renderAll();
                Clients.evalJavaScript("var gridEle = document.getElementById('"+ListBoxNew.this.getUuid()+"-body"+"'); gridEle.scrollTop = "+ListBoxNew.this.posScroll+";");
                ListBoxNew.this.posScroll=0;
            }
            if ( ListBoxNew.this.getRowScroll()>0 )
            {
                Clients.scrollIntoView(ListBoxNew.this.getItemAtIndex(ListBoxNew.this.getRowScroll()));
                ListBoxNew.this.setRowScroll(0);
            }
        }
    });

}

}

If you work with the mvvm technique, In the lang-addon.xml file you have to add these lines

<component> <component-name>listboxnew</component-name> <extends>listbox</extends> <component-class>path1.path2. .....pathn.ListBoxNew</component-class>
</component>

and then in your zul use the new tag <listboxnew>

link publish delete flag offensive edit
Your answer
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
1 follower

RSS

Stats

Asked: 2013-10-20 14:41:21 +0800

Seen: 29 times

Last updated: May 13 '17

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