Y-Grid Support Drag-Drop and DataBinding

Author
Jumper Chen, Engineer, Potix Corporation

Date
July 20, 2007

Version
Applicable to zk-2.5.0-FL-2007-08-1 and later.

Applicable to yuiextz 0.5.2.

In this article, we will introduce the five most exciting new additions to yuiextz 0.5.2 that are following the original grid and listbox component.

Y-Grid Support ListModel

Now we have implemented ListModel in Y-Grid that you can set the list model associated with this grid. In this example, we use the Live Data to show how to use ListModel like original grid.

In above example, you can see the following example code same with the original grid from ZK Live Demo#Live data. You can find the example ygrid-livedata.zul file with WAR file in the download area.

<zscript><![CDATA[ 
  String[] data = new String[200];
  for(int j=0; j < data.length; ++j) {
    data[j] = "option "+j;
  }  
  ListModel strset = new SimpleListModel(data);

]]></zscript>
<y:grid height="200px" model="${strset}">
  <y:columns>
    <y:column label="options"/>
  </y:columns>
</y:grid>

Y-Grid Support Databinding

To support databinding is pretty great for Y-Grid component. This Y-Grid support whatever kind of version of DataBinding. In this example, we use the syntax of new version of DataBinding to show how to use the powerful DataBinding in Y-Grid.

As you can see, we use the following example code in ygrid-databinding.zul, which could be found in the Y-Grid-Demo war file.

<?init class="org.zkforge.yuiext.zkplus.databind.AnnotateDataBinderInit" ?> 
<window xmlns:y="http://www.zkoss.org/2007/yui" width="500px">
  <zscript src="Person.zs"/>
<y:grid height="200px" model="@{persons}" selectedItem="@{selected}">
    ...
    <y:row self="@{each=person}">
       <y:label value="@{person.firstName}"/>
       <y:label value="@{person.lastName}"/>
       <y:label value="@{person.fullName}"/>
     </y:row>
     ...
    <y:rows>
      <y:row>First Name:<y:label value="@{selected.firstName}"/></y:row>
      <y:row>Last Name:<y:label value="@{selected.lastName}"/></y:row>
      <y:row>Full Name:<y:label value="@{selected.fullName}"/></y:row>
    </y:rows>
    ...
</window>

The init class is implemented in Y-Grid to support the DataBinding feature, so you have to specify the org.zkforge.yuiext.zkplus.databind.AnnotateDataBinderInit to help you to initialize the DataBinding. And then you can specify the model="@{persons}" and selectedItem="@{selected}" in the grid. This @{persons} associated with this grid and the selectedItem is determined by the @{selected}. Then you can specify the self="@{each=person}" in the row for each row to render the each lable.

Note: Where self is a keyword to denote the annotation is used to annotate the component declaration, rather than any property.

Y-Gird Support Customized Sort

In the previous version, we use the sort function by Ext that is implemened by JavaScript at client side. Therefore, we cannot operate the result of sort at the server side. Now, we implement the two methods sortAscending and sortDescending to let deveploer to implement the Comparator interface for the result of sort from server side.

You can find the example ygrid-sortable.zul file in the Y-Grid-Demo war file. In this example, we use two way to sort the label value as below.

• Default Sort:

We specify the auto string into the sort property that is implemented in Y-Grid for live data or native data(as text or date or number, and so on. That depend on the editortype of column).

<y:column editortype="check" label="PayPal" sort="auto" width="50px" align="center"/>

• Custom Sort:

If you want to customize yourself sort function, you must implement the java.util.Comparator interface and specify it into the two methods sortAscending and sortDescending as follows.

<zscript>
  import java.util.Comparator;
  import org.zkoss.zk.ui.Component;

  public class RowLabelComparator implements Comparator {
	private boolean _asc;
  
	public RowLabelComparator(boolean asc) {
	  _asc = asc;
	}
  
	public int compare(Object o1, Object o2) {
	  String s1 = getValue(o1) , s2 = getValue(o2);
	  int v = s1.compareTo(s2);
	  return _asc ? v : -v;
	}
  
	private String getValue(Object o) {
	  return ((Label) ((Component) o).getChildren().get(0)).getValue();
	}
  }
  Comparator asc = new RowLabelComparator(true),
  dsc = new RowLabelComparator(false);
</zscript>
...

<y:column editortype="text" label="Item Title" sortAscending="${asc}" sortDescending="${dsc}"
   width="400px" align="center"/>
   ...

Y-Grid Support Drag-Drop

The Y-Grid drag-drop feature is implemented by Ext JS, and we integrate it with ZK draggable and droppable properties.

You can find the example ygrid-dragdrop.zul file in the Y-Grid-Demo war file. If you would like to emable this feature in Y-Grid, you must specify the following properties.

• dragdrop:

To specify the property is true in the grid as follows.

<y:grid width="500px" height="auto" dragdrop="true" onCreate="self.selectedIndex = 0;" multiple="false">

• These are properties draggable and droppable used by row in Y-Gird only. For example,

<y:row draggable="true" droppable="true" onDrop="move(event)">

• draggable:

The simplest way to make a component draggable is to set this attribute to true. To disable it, set this to false.

• droppable:

The simplest way to make a component droppable is to set this attribute to true. To disable it, set this to false.

As you can see, we need to implement the move(event) method as below.

void move(Event event) {
 Component dragged = event.dragged;   
 if (dragged instanceof org.zkforge.yuiext.grid.Row){       
  self.parent.insertBefore(dragged, self);
}
}

Note: If you would like to use drag-drop with multi-selections, you can use the following example.

Set selected = ((Row)event.getDragged()).getGrid().getSelectedItems();
  //then, you can handle the whole set at once

Y-Grid Support Read-Only Type in Editing Mold

If you want to disable the editing column in editing grid, you can specify the readonly string into the editortype in column tag as follows.

<y:column editortype="readonly" label="Person Info"/>

Note: The editortype is completed by column when you specify the readonly or any kind of editortype.(depend on Ext Js)

Upgrade Notes (yuiextz-0.5.1 version to yuiextz-0.5.2 version)

Grid

• setColumnhide: Sets whether this grid enable hiding of columns with the header context menu. Default:false.
• setColumnmove: Sets whether this grid enable drag and drop reorder of columns. Default: false.

Note: If you want to know more details please refer to the JavaDoc of yuiextz.

Download

• Download the zk-yui-ext-demo-0.5.2.war for the article here.

• Download the yuiextz-0.5.2 version.

Copyright © Potix Corporation. This article is licensed under GNU Free Documentation License.