Grid and databinding

answered 2009-02-03 22:53:17 +0800

mhogendoorn
54
http://www.solvedo.com

Solution does not work - please help
=====================================
I am looking for exactly the same functionality: a grid with an annotated model and 'edit' or 'delete' buttons.
However, the solution suggested above does not work (at least, where I am).
Help is highly appreciated. Thanks in advance.

This is my code:
================
<grid model="@{win.family.children}">
<columns>
<column label="Name" />
<column width="35px;" />
</columns>
<rows id="children">
<row self="@{each=child}" value="@{child}">
<textbox value="@{child.name}" />
<button image="/img/remove.png"
onClick="win.removeChild((Person) self.parent.value);" />
</row>
</rows>
</grid>

Problem:
===============
The self.parent.value ALWAYS refers to the FIRST row element, no matter what row I click on delete.
Seems like either of these is the case:
a) value="@{child}" is evalutated only once ?
b) the button is created only once, and reused in all rows for performance

Can any one help?
Thanks very much.
Maarten Hogendoorn

answered 2009-02-04 02:21:18 +0800

hideokidd
750 ● 1 ● 2

Hi,

The old article may only match to old standard, I don't know whether old code can work on Zk 3.5.2 or not. So I revised your code to make it work as expectation, I used my class to be child information, please note it.

code :

<window id="win" title="new page title" border="normal">
<zscript>

class Children{
	String name="xx";
	
	public Children(String s){
		name = s;
	}
	
	public String getName(){
		return name;
	}
}

List child = new ArrayList(4);
child.add(new Children("child1")); 
child.add(new Children("child2")); 
child.add(new Children("child3")); 
child.add(new Children("child4")); 

String lastChildName = ((Children) child.get(child.size()-1)).getName();
</zscript>
<grid model="@{child}" id="grid">
<columns>
<column label="Name" />
<column width="35px;" />
</columns>
<rows id="children">
<row forEach="${child}" id="${each.name}" onClick="delete_name.setValue(self.id);">
<textbox value="${each.name}" />
<button label="delete me" if="${lastChildName == each.name}" onClick='win.getFellow(delete_name.getValue()).detach()'/>
</row>
<row>
<hbox>
<label>delete value = </label>
<label id="delete_name"/>

</hbox>
</row>
</rows>
</grid>

</window>

When you click a row of the grid, and then clicking the button, the selected row will be deleted.

answered 2009-02-04 07:48:24 +0800

mhogendoorn
54
http://www.solvedo.com

Dear hideokidd,
Thank you for your response. I am sorry to say it's not a complete solution.
First, the values of the text boxes in your code are not bound to a value bean (setting a new value doesn't get saved in a backing bean)
Second, not every row has it's own operational button(s).
Third, you only detach a component from the view, in stead of shrinking a backing list (called 'child' in your example).

I am looking for a solution way to work with the backing bean inside each annotated row of an annotated grid.
Here, annotated means bound to a specific data record.
Thanks a lot

answered 2009-02-04 11:36:26 +0800

robertpic71
1275 ● 1

updated 2009-02-04 11:38:19 +0800

Here is my example:

<grid model="@{win.family.children}">
<columns>
<column label="Name" />
<column width="35px;" />
</columns>
<rows id="children">
<row self="@{each=child}" value="@{child}">
<textbox value="@{child.name}" />
<button id="trash" image="/img/remove.png"  />
</row>
</rows>
</grid>

Javacode (autowired Event, check MVC-Smalltak or add the forward-attribute to the button).
Note this resolution requires the value in the row (like your example)

public void onClick$trash(ForwardEvent event) {
    Row target = (Row) event.getOrigin().getTarget().getParent();
    Person child = (Person) row.getValue(); 
}

>> The self.parent.value ALWAYS refers to the FIRST row element, no matter what row I click on delete.
>> Seems like either of these is the case:
>> a) value="@{child}" is evalutated only once ?
>> b) the button is created only once, and reused in all rows for performance
I think this problem is, that the row in the zul-file is the template for the databinder. The template will be cloned for all dataentries from the model. I think

onClick="win.removeChild((Person) event.target.parent.value);"

However i prefer the non-interpreted java-way. Note: You have update path to the parent grid when i.e. you do i.e. <hbox><button>.. - you need one more getParent();

Here is generic utilcode (for grid and listbox) (requires a set value in (listitem or row):

public Object getListBindingData(ForwardEvent event) {
	Component target = event.getOrigin().getTarget();
	while(!(target instanceof Row || target instanceof Listitem)) {
	    target = target.getParent(); 
	};
	if (target instanceof Row) {
	    Row row = (Row) target;
	    return ((Row) target).getValue();
	}
	if (target instanceof Listitem) {
	    return ((Listitem) target).getValue();
	}
	return null;
}

// I use it like this - no headache, when the layout is changing

public void onClick$trash(ForwardEvent event) {
	Person child = (Person) getListBindingData(event);
	System.out.println("Delete " + child.getName());
}

/Robert