Move Range - Drag Edit"

From Documentation
Line 7: Line 7:
  
 
===Drag Edit===
 
===Drag Edit===
Drag edit range is base on <javadoc directory="zss" method="move(java.lang.integer, java.lang.Integer)">org.zkoss.zss.model.Range</javadoc>.
+
Drag edit range is based on <javadoc directory="zss" method="move(java.lang.integer, java.lang.Integer)">org.zkoss.zss.model.Range</javadoc>.
  
 
1. Select a range<br/>
 
1. Select a range<br/>
Line 15: Line 15:
 
3. Release mouse to perform drag edit<br/>
 
3. Release mouse to perform drag edit<br/>
 
[[File:ZKSsEss_Spreadsheet_DragEdit_DragEdit.png]]<br/>
 
[[File:ZKSsEss_Spreadsheet_DragEdit_DragEdit.png]]<br/>
 
  
 
===ZUML===
 
===ZUML===

Revision as of 08:19, 30 August 2011


Purpose

ZK Spreadsheet supports drag edit, to move cell's value.

Drag Edit

Drag edit range is based on Range.move(integer, Integer).

1. Select a range
ZKSsEss Spreadsheet DragEdit Select.png

2. Mouse over the border, mouse cursor will change to cross, drag the selection to new position
ZKSsEss Spreadsheet DragEdit Move.png

3. Release mouse to perform drag edit
ZKSsEss Spreadsheet DragEdit DragEdit.png

ZUML

<zk>
<div height="100%" width="100%" apply="org.zkoss.zssessentials.config.MoveRangeComposer">
	<div height="3px"></div>
	Row: <intbox id="moveRows" value="0"/>, Col: <intbox id="moveCols" value="0"/> 
	<button id="moveBtn" label="Move Current Selection" mold="trendy"></button>
	<spreadsheet id="spreadsheet"  src="/WEB-INF/excel/config/demo_sample.xls"	
			maxrows="200" 
			maxcolumns="40"
			width="100%"
			height="450px"></spreadsheet>
</div>
</zk>

Composer

Current Range

We can get user's selection range from onCellSelection event

Spreadsheet spreadsheet;
Range currentRange;
public void onCellSelection$spreadsheet(CellSelectionEvent event) {
	currentRange = Ranges.range(event.getSheet(), event.getTop(), event.getLeft(),
			event.getBottom(), event.getRight());
}

ZKSsEss Spreadsheet DragEdit MoveRange.png

Move Range

Intbox moveRows;
Intbox moveCols;
Button moveBtn;
public void onClick$moveBtn() {
	Integer row = moveRows.getValue();
	Integer col = moveCols.getValue();
	if (currentRange != null && row != null && col != null) {
		currentRange.move(row, col);
		currentRange = null;
	}
}

ZKSsEss Spreadsheet DragEdit Result.png

View complete source of ZUML moveRange.zul

View complete source of composer MoveRangeComposer.java

Version History

Last Update : 2011/08/30


Version Date Content
     


All source code listed in this book is at Github.


Last Update : 2011/08/30

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