# Scroll manually to a specified row

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 retag edit

## 7 Replies

jj
638 3

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

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

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

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.

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

terminator85
12

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
<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>
<!--
-->
<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>
<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());
}



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) {
......

}

[hide preview]