0

2 Dynamic Grids inside Scrollview - Want them to scroll Together

asked 2013-03-27 12:56:33 +0800

ansancle gravatar image ansancle
317 9

I have a situation where I have 2 grids that are dynamically created at run time. The grids are dhZoneUserPointGroupsGrid and dhAudioHomeZoneGrid. dhZoneUserPointGroupsGrid is always one row, dhAudioHomeZoneGrid can be N rows. To the user it looks like one grid though.

They are inside a groupbox, which is inside a scrollview.

What happens though is when scrolling, only the bottom grid scrolls, the top grid stays fixed. I want them to scroll together, appearing as if it's really ONE grid and not two.

Is there a way to get them both to scroll together?

         <scrollview vflex="1" hflex="1">
        <groupbox height="490px" width="100%" >
            <dhZoneUserPointGroupsGrid id="_zoneGroupsGrid" width="100%" height="100px">
                <columns sizable="false">
                    <column/>
                </columns>  
            </dhZoneUserPointGroupsGrid>            
            <dhAudioHomeZoneGrid id="_zoneGrid" width="100%" height="390px">
                <columns sizable="false">
                    <column/>
                </columns>  
            </dhAudioHomeZoneGrid>       
            </groupbox>
    </scrollview>
delete flag offensive retag edit

2 Answers

Sort by ยป oldest newest most voted
0

answered 2013-03-28 02:17:55 +0800

benbai gravatar image benbai
2228 6
http://www.zkoss.org

I'd suggest wrapping two grid by a div, this way you can scroll the div and two grids will be scrolled together,

e.g.,

<zk>
    <zscript><![CDATA[
        List l = new ArrayList();
        for (int i = 0; i < 100; i++) {
            l.add("second grid row "+i);
        }
        ListModelList model = new ListModelList(l); 
    ]]></zscript>
    <div height="350px" width="150px" style="overflow: auto;">
        <grid style="border-bottom: 0px;">
            <rows>
                <row style="background: #f7f7f7">
                    first grid row 1
                </row>
            </rows>
        </grid>
        <grid model="${model}"
            style="border-top: 0px;"/>
    </div>
</zk>
link publish delete flag offensive edit
0

answered 2013-03-28 11:50:03 +0800

ansancle gravatar image ansancle
317 9

That is how I used to do it before 6.5.1 EE. The scrollview is so much nicer than using the div overflow. So it sounds like there is not way to make the behavior the way I want using scrollview, correct? I have to use div? Thanks! Andy

link publish delete flag offensive edit

Comments

I notice that you have vflex="1" on scrollview, try give a height less than groupbox. It should be able to scroll both grids together.

vincentjian ( 2013-03-29 04:27:10 +0800 )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-03-27 12:56:33 +0800

Seen: 22 times

Last updated: Mar 28 '13

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