0

Re-positioning of Grid after editing a row

asked 2012-12-14 13:14:46 +0800

cyiannoulis gravatar image cyiannoulis
1191 10

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

delete flag offensive retag edit

2 Replies

Sort by ยป oldest newest

answered 2012-12-14 13:26:14 +0800

cyiannoulis gravatar image cyiannoulis
1191 10

Just another notice:

The same is not happening using a Listbox. Only the Grid causes the re-positioning.

/costas

link publish delete flag offensive edit

answered 2012-12-14 13:41:13 +0800

cyiannoulis gravatar image cyiannoulis
1191 10

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;
	}
}

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-12-14 13:14:46 +0800

Seen: 40 times

Last updated: Dec 14 '12

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