Tags
People
Badges
Help-
CORE FRAMEWORK
FEATURED COMPONENTS
-
RESOURCES
-
LEARN ZK
RESOURCES
Hi to all,
Consider a Grid with a button in each row. The grid is populated using a MVVM model. Pressing the button in a row causes the firing of a simple command which affects the model. The problem is that after executing the command, ZK forces focus on the first row of the grid causing a very annoying repositioning. Actually it is impossible for the user to work in case the grid has quite a few rows.
I noticed that the same (bug to my opinion) happens in this ZK demo.
Samples below:
The ZUL:
<?page title="new page title" contentType="text/html;charset=UTF-8"?>
<zk>
<window title="Sample" border="normal"
apply="org.zkoss.bind.BindComposer"
viewModel="@id('vm') @init('test.ContactsVM')">
<grid model="@load(vm.contactsModel)" height="250px">
<columns>
<column label="Firstname" hflex="5" />
<column label="Lastname" hflex="5" />
<column width="80px" />
<column label="Greeting" hflex="10" />
</columns>
<template name="model" var="contact">
<row>
<textbox value="@bind(contact.firstname)" />
<textbox value="@bind(contact.lastname)" />
<button label="Apply" onClick="@command('update-contact', index=contactStatus.index)" />
<label value="@load( contact.greeting )" />
</row>
</template>
</grid>
</window>
</zk>
The model:
package test;
import java.util.ArrayList;
import java.util.List;
import org.zkoss.bind.annotation.AfterCompose;
import org.zkoss.bind.annotation.BindingParam;
import org.zkoss.bind.annotation.Command;
import org.zkoss.bind.annotation.ContextParam;
import org.zkoss.bind.annotation.ContextType;
import org.zkoss.bind.annotation.NotifyChange;
import org.zkoss.zk.ui.Component;
import org.zkoss.zk.ui.util.Clients;
import org.zkoss.zul.ListModel;
import org.zkoss.zul.ListModelList;
import org.zkoss.zul.Messagebox;
public class ContactsVM {
private ListModel<Contact> contactsModel;
@AfterCompose
public void init(@ContextParam(ContextType.VIEW) Component view)
{
List<Contact> list = new ArrayList<Contact>();
list.add(new Contact("Nick", "Brown"));
list.add(new Contact("Adrian", "Smith"));
list.add(new Contact("Zoe", "Zelner"));
list.add(new Contact("Patrick", "Adams"));
list.add(new Contact("Olivia", "Husey"));
list.add(new Contact("Sheila", "Moore"));
list.add(new Contact("Jay", "Garret"));
list.add(new Contact("Ryan", "Michael"));
list.add(new Contact("Steve", "Makaj"));
list.add(new Contact("Scott", "Swanson"));
list.add(new Contact("Tom", "Heaton"));
list.add(new Contact("Paul", "Batten"));
list.add(new Contact("Bill", "Croft"));
list.add(new Contact("Douglas", "Newel"));
list.add(new Contact("Laura", "Harris"));
list.add(new Contact("Charles", "Siegel"));
contactsModel = new ListModelList<Contact>( list );
}
@Command("update-contact")
@NotifyChange("contactsModel")
public void updateContact(@BindingParam("index") Integer index) {
Contact c = contactsModel.getElementAt(index);
System.out.println(c.getGreeting());
}
public ListModel<Contact> getContactsModel() {
return contactsModel;
}
public void setContactsModel(ListModel<Contact> contactsModel) {
this.contactsModel = contactsModel;
}
}
I am using inline grid editing quite often so this is a real issue for me..
/costas
Just another notice:
The same is not happening using a Listbox. Only the Grid causes the re-positioning.
/costas
The contact POJO for anyone who would like to run this example:
public class Contact {
private String firstname;
private String lastname;
public Contact(String firstname, String lastname) {
super();
this.firstname = firstname;
this.lastname = lastname;
}
public String getGreeting() {
return "Hello " + firstname + " " + lastname;
}
public String getFirstname() {
return firstname;
}
public void setFirstname(String firstname) {
this.firstname = firstname;
}
public String getLastname() {
return lastname;
}
public void setLastname(String lastname) {
this.lastname = lastname;
}
}
Asked: 2012-12-14 13:14:46 +0800
Seen: 40 times
Last updated: Dec 14 '12