0

Scroll manually to a specified row

asked 2012-10-31 20:30:20 +0800

terminator85 gravatar image terminator85
12

hi,
i'm searching a way to scroll in the grid to a specified row after doing notify change.
to problem is that i'm inserting the row after sorting the model.
and when i do notify change Zk redirect automatically the view to the first row.

any ideas ?

delete flag offensive retag edit

7 Replies

Sort by ยป oldest newest

answered 2012-10-31 20:58:59 +0800

jj gravatar image jj
638 3

Clients.scrollIntoView(row). If you have pagination, you may need navigate to the page before call this.

link publish delete flag offensive edit

answered 2012-10-31 22:48:21 +0800

terrytornado gravatar image terrytornado flag of Germany
9393 3 7 16
http://www.oxitec.de/

@jj,
do you have any code or idea on how to calculate/navigate to the page if db pagination is used ?

thanks
Stephan

link publish delete flag offensive edit

answered 2012-11-01 00:48:24 +0800

terminator85 gravatar image terminator85
12

Hi
@ jj Clients.scrollIntoView(row) doesn't work in this case

@Command
    @NotifyChange({"carList"})
    public void selectCar(@BindingParam("car") Car car , @BindingParam("row") Listitem row) {
        car.setEditable(true);
         Clients.scrollIntoView(row);
        wheelList = wheelService.SelectByIdCar(car.getId());
    }

I use this command to select a car in a scrollable list or a grid
Thanks in advance.

link publish delete flag offensive edit

answered 2012-11-01 02:29:19 +0800

jj gravatar image jj
638 3

It may not work in this case. I think the grid is not rendered yet at this stage. You may want to catch the onRenderInit Event to scroll the row.
@terrytornado I don't have a generic code to do this. I Imagine you simply do row#/pageSize to get the correct page.

link publish delete flag offensive edit

answered 2012-11-01 08:22:34 +0800

terrytornado gravatar image terrytornado flag of Germany
9393 3 7 16
http://www.oxitec.de/

@jj hmmm, i think this would not work by using an db ordered resultset like an Index on name1 or city

link publish delete flag offensive edit

answered 2012-11-02 15:05:15 +0800

terminator85 gravatar image terminator85
12

updated 2012-11-02 15:09:49 +0800

Hi again.

@JJ I'm sure that the row is already rendered, because i'm using an ArrayList as model so there is no ROD.
what I'm searching is a method to scroll to a specified row in the client Side.
I'm learning how to do it with Jqeury , but no chance ;(
the problem occur when I invoke notify change in the ViewModel to rerender the row using this property (inplace="${item.editable}")

<listbox id="grid" onCtrlKey='@command("renderEditCarModal")'
                                 ctrlKeys="^a#f1" span="true"
                                
                                 sizedByContent="false" height="250px" model="@bind(vm.carList)">	
                    
                            <auxhead >
                                <auxheader colspan="1" ></auxheader>
                                <auxheader colspan="1" >
                                    <textbox width="80%" ></textbox>
                                </auxheader>
                                <auxheader colspan="1" >
                                    <textbox width="80%" ></textbox>
                                </auxheader>
                                <auxheader colspan="1" >
                                    <textbox width="80%"></textbox>
                                </auxheader>
                                <auxheader colspan="1" >
                                    <textbox width="80%"></textbox>
                                </auxheader>
                                <auxheader colspan="1" >
                                    <textbox width="80%"></textbox>
                                </auxheader>
                            </auxhead>
                            
                            <listhead sizable="true">
				<!--				<column visible="true" width="45px">check</column>-->
                                <listheader width="25px"></listheader>
                                <listheader width="75px">id</listheader>
                                <listheader draggable="true">name</listheader>
                                <listheader draggable="true">Company</listheader>
                                <listheader draggable="true">Price</listheader>
                                <listheader draggable="true">Status</listheader>
                            </listhead>
                              
                            <template name="model" var="item">
                                
                                <listitem onClick="@command('selectCar', car=item , row=self)" >
                                    <listcell >
                                        <checkbox  checked="${item.status == 1 ? 'true' : false}" 
                                                   visible="true">
                                        </checkbox>
                                    </listcell>
                                    <listcell
                                        style="padding:0px 5px 0px 0px;margin:0px;width:100%">
                                        <textbox value="@bind(item.id)" readonly="true" inplace="${item.editable}"
                                                                     style=" ${item.status == 1 ? 'background-color:rgb(230,230,230)' : '' } ;width:100%;text-align:right;">
                                        </textbox>
                                    </listcell>
					<!--
					-->
                                    <listcell style="padding:0px;margin:0px;width:100%">
                                        <textbox value="@bind(item.name)" inplace="${item.editable}" 
                                                 style="width:100%" >
                                                    
                                        </textbox>
                                    </listcell>
                                    <listcell style="padding:1px;margin:0px;width:100%">
                                        <textbox value="@bind(item.company)" inplace="${item.editable}"
                                                 style="width:100%">
                                        </textbox>
                                    </listcell>
                                    <listcell style="padding:1px;margin:0px;width:100%">
                                        <textbox value="@bind(item.price)" inplace="${item.editable}"
                                                 style="width:100%">
                                        </textbox>
                                    </listcell>
                                    <listcell style="padding:1px;margin:0px;width:100%">
                                        <textbox value="@bind(item.status)" inplace="${item.editable}"
                                                 style="width:100%">
                                        </textbox>
                                    </listcell>
                                </listitem>

                            </template>

                        </listbox>

Here is the method invoked when I click on the row (listItem)
@Command
    @NotifyChange({"wheelList" , "carList"})
    public void selectCar(@BindingParam("car") Car car , @BindingParam("row") Listitem row) {
        this.selectedCar = car;
        this.selectedCar.setEditable(false);
        
        row.getListbox().setSelectedItem(row);
         Clients.scrollIntoView(row);
        wheelList = wheelService.SelectByIdCar(selectedCar.getId().toString());
    }

link publish delete flag offensive edit

answered 2012-11-02 17:10:57 +0800

jj gravatar image jj
638 3

You lost me there. Are you saying that the inplace="${item.editable}" gives you a problem?

I assume that you are certain that all other lines of code in the selectCar() method is executed correctly, and the only thing that didn't work was Clients.scollIntoView(row).

Clients.scroll.. has been working for me in Grid (I haven't tried in with Listbox), but I needed to call it after ZK finish rendering.

public void onAfterRender$myGrid(Event e) {
......

}

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: 2012-10-31 20:30:20 +0800

Seen: 99 times

Last updated: Nov 02 '12

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