Tags
People
Badges
Help-
CORE FRAMEWORK
FEATURED COMPONENTS
-
RESOURCES
-
LEARN ZK
RESOURCES
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 ?
@jj,
do you have any code or idea on how to calculate/navigate to the page if db pagination is used ?
thanks
Stephan
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.
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.
@jj hmmm, i think this would not work by using an db ordered resultset like an Index on name1 or city
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>
@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());
}
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) {
......
}
Asked: 2012-10-31 20:30:20 +0800
Seen: 100 times
Last updated: Nov 02 '12