Column Chooser"

From Documentation
m
m
Line 22: Line 22:
 
* Original view
 
* Original view
 
[[File:Column_Chooser_OK_BUTTON_1.png]]
 
[[File:Column_Chooser_OK_BUTTON_1.png]]
−
* After modification, click OK  button to confirm.
+
* After modification, click '''OK''' button to confirm.
 
[[File:Column_Chooser_OK_BUTTON_2.png]]
 
[[File:Column_Chooser_OK_BUTTON_2.png]]
 
* Result
 
* Result
Line 33: Line 33:
 
* Original view
 
* Original view
 
[[File:Column_Chooser_Cancel_BUTTON_1.png]]
 
[[File:Column_Chooser_Cancel_BUTTON_1.png]]
−
* After modification, click Cancel  button to revert.
+
* After modification, click '''Cancel''' button to revert.
 
[[File:Column_Chooser_Cancel_BUTTON_2.png]]
 
[[File:Column_Chooser_Cancel_BUTTON_2.png]]
 
* Result
 
* Result
Line 44: Line 44:
 
* Original view
 
* Original view
 
[[File:Column_Chooser_Add_BUTTON_1.png]]
 
[[File:Column_Chooser_Add_BUTTON_1.png]]
−
* Select a column, then click the Add button
+
* Select a column, then click the '''Add''' button
 
[[File:Column_Chooser_Add_BUTTON_2.png]]
 
[[File:Column_Chooser_Add_BUTTON_2.png]]
 
* Click OK button to confirm
 
* Click OK button to confirm
Line 57: Line 57:
 
* Original view
 
* Original view
 
[[File:Column_Chooser_Remove_BUTTON_1.png]]
 
[[File:Column_Chooser_Remove_BUTTON_1.png]]
−
* Select a visible column, then click the Remove button
+
* Select a visible column, then click the '''Remove''' button
 
[[File:Column_Chooser_Remove_BUTTON_2.png]]
 
[[File:Column_Chooser_Remove_BUTTON_2.png]]
 
* Click OK button to confirm
 
* Click OK button to confirm
Line 70: Line 70:
 
* Original view
 
* Original view
 
[[File:Column_Chooser_MoveUp_BUTTON_1.png]]
 
[[File:Column_Chooser_MoveUp_BUTTON_1.png]]
−
* Select a visible column, then click the Move Up button
+
* Select a visible column, then click the '''Move Up''' button
 
[[File:Column_Chooser_MoveUp_BUTTON_2.png]]
 
[[File:Column_Chooser_MoveUp_BUTTON_2.png]]
 
* Click OK button to confirm
 
* Click OK button to confirm
Line 77: Line 77:
 
[[File:Column_Chooser_MoveUp_BUTTON_4.png]]
 
[[File:Column_Chooser_MoveUp_BUTTON_4.png]]
 
====Move Visible Column Down====
 
====Move Visible Column Down====
 +
The Move Down button is used change column order, move select column down.
 +
 +
Demonstraction:
 +
* Original view
 +
[[File:Column_Chooser_MoveDown_BUTTON_1.png]]
 +
* Select a visible column, then click the '''Move Down''' button
 +
[[File:Column_Chooser_MoveDown_BUTTON_2.png]]
 +
* Click OK button to confirm
 +
[[File:Column_Chooser_MoveDown_BUTTON_3.png]]
 +
* Result
 +
[[File:Column_Chooser_MoveDown_BUTTON_4.png]]
 +
 
===Drag & Drop===
 
===Drag & Drop===
 
====Drag Hidden Column to Visible Column====
 
====Drag Hidden Column to Visible Column====
 +
 +
Demonstraction:
 +
* Original view
 +
[[File:Column_Chooser_Drag_to_Visible_1.png]]
 +
* Drag hidden column, then drop at visible column area
 +
[[File:Column_Chooser_Drag_to_Visible_2.png]]
 +
* Click OK button to confirm
 +
[[File:Column_Chooser_Drag_to_Visible_3.png]]
 +
* Result
 +
[[File:Column_Chooser_Drag_to_Visible_4.png]]
 +
 
====Drag Visible Column to Hidden Column====
 
====Drag Visible Column to Hidden Column====
−
====Drag Column and Drop After Any Columns====
+
 
 +
Demonstraction:
 +
* Original view
 +
[[File:Column_Chooser_Drag_to_Visible_1.png]]
 +
* Drag visible column, then drop at hidden column area
 +
[[File:Column_Chooser_Drag_to_Visible_2.png]]
 +
* Click OK button to confirm
 +
[[File:Column_Chooser_Drag_to_Visible_3.png]]
 +
* Result
 +
[[File:Column_Chooser_Drag_to_Visible_4.png]]
 +
 
 +
====Drag Column and Drop on Any Column====
 +
 
 +
Demonstraction:
 +
* Original view
 +
[[File:Column_Chooser_Drag_and_Drop_1.png]]
 +
* Drag visible column, then drop at hidden column area
 +
[[File:Column_Chooser_Drag_and_Drop_2.png]]
 +
* Click OK button to confirm
 +
[[File:Column_Chooser_Drag_and_Drop_3.png]]
 +
* Result
 +
[[File:Column_Chooser_Drag_and_Drop_4.png]]
  
 
==Usage==
 
==Usage==

Revision as of 10:03, 30 May 2013

DocumentationSmall Talks2013JuneColumn Chooser
Column Chooser
Author
Sam Chuang, Engineer, Potix Corporation
Date
May 30, 2013
Version
ZK 6.5 and later

Introduction

The Columnchooser is a popup component that shows a dialog of columns, group by column visibility, can be used with Grid, Listbox or any tabluar component. User can interact with the dialog to change column order or change column's visibility.

Column Chooser Firstlook Default.png

Columnchooser is base on ZK MVVM, with it's advantage: developer can easily customize the UI (dialog) without touching ViewModel's code.

Column Chooser Firstlook Custom.png

Operation

Button

OK

The OK button is used to confirm modification change. If user doesn't click OK button, the modification will be lose, revert to previsous status.

Demonstraction:

  • Original view

Column Chooser OK BUTTON 1.png

  • After modification, click OK button to confirm.

Column Chooser OK BUTTON 2.png

  • Result

Column Chooser OK BUTTON 3.png

Cancel

The Cancel button is used to revert to previsous status.

Demonstraction:

  • Original view

Column Chooser Cancel BUTTON 1.png

  • After modification, click Cancel button to revert.

Column Chooser Cancel BUTTON 2.png

  • Result

Column Chooser Cancel BUTTON 3.png

Add to Visible Column

The Add button is used to move selected hidden column to visible column

Demonstraction:

  • Original view

Column Chooser Add BUTTON 1.png

  • Select a column, then click the Add button

Column Chooser Add BUTTON 2.png

  • Click OK button to confirm

Column Chooser Add BUTTON 3.png

  • Result

Column Chooser Add BUTTON 4.png

Remove Visible Column

The Remove button is used to move visible column to hidden column

Demonstraction:

  • Original view

File:Column Chooser Remove BUTTON 1.png

  • Select a visible column, then click the Remove button

Column Chooser Remove BUTTON 2.png

  • Click OK button to confirm

Column Chooser Remove BUTTON 3.png

  • Result

Column Chooser Remove BUTTON 4.png

Move Visible Column Up

The Move Up button is used to change column order, move select column up.

Demonstraction:

  • Original view

File:Column Chooser MoveUp BUTTON 1.png

  • Select a visible column, then click the Move Up button

Column Chooser MoveUp BUTTON 2.png

  • Click OK button to confirm

Column Chooser MoveUp BUTTON 3.png

  • Result

Column Chooser MoveUp BUTTON 4.png

Move Visible Column Down

The Move Down button is used change column order, move select column down.

Demonstraction:

  • Original view

File:Column Chooser MoveDown BUTTON 1.png

  • Select a visible column, then click the Move Down button

Column Chooser MoveDown BUTTON 2.png

  • Click OK button to confirm

Column Chooser MoveDown BUTTON 3.png

  • Result

File:Column Chooser MoveDown BUTTON 4.png

Drag & Drop

Drag Hidden Column to Visible Column

Demonstraction:

  • Original view

File:Column Chooser Drag to Visible 1.png

  • Drag hidden column, then drop at visible column area

Column Chooser Drag to Visible 2.png

  • Click OK button to confirm

Column Chooser Drag to Visible 3.png

  • Result

Column Chooser Drag to Visible 4.png

Drag Visible Column to Hidden Column

Demonstraction:

  • Original view

File:Column Chooser Drag to Visible 1.png

  • Drag visible column, then drop at hidden column area

Column Chooser Drag to Visible 2.png

  • Click OK button to confirm

Column Chooser Drag to Visible 3.png

  • Result

Column Chooser Drag to Visible 4.png

Drag Column and Drop on Any Column

Demonstraction:

  • Original view

File:Column Chooser Drag and Drop 1.png

  • Drag visible column, then drop at hidden column area

Column Chooser Drag and Drop 2.png

  • Click OK button to confirm

Column Chooser Drag and Drop 3.png

  • Result

Column Chooser Drag and Drop 4.png

Usage

Event

Template

Default

Custom

View Model

Grid with Columnchooser Demo

Open Dialog

Redraw Grid Columns

Summary

Download

Comments



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


Retrieved from "https://www.zkoss.org/_w/index.php?title=Small_Talks/2013/June/Column_Chooser&oldid=37174"