Column Chooser"
m |
m |
||
| Line 65: | Line 65: | ||
====Move Visible Column Up==== | ====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 | ||
| + | [[File:Column_Chooser_MoveUp_BUTTON_2.png]] | ||
| + | * Click OK button to confirm | ||
| + | [[File:Column_Chooser_MoveUp_BUTTON_3.png]] | ||
| + | * Result | ||
| + | [[File:Column_Chooser_MoveUp_BUTTON_4.png]] | ||
====Move Visible Column Down==== | ====Move Visible Column Down==== | ||
===Drag & Drop=== | ===Drag & Drop=== | ||
Revision as of 09:56, 30 May 2013
Sam Chuang, Engineer, Potix Corporation
May 30, 2013
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.
Columnchooser is base on ZK MVVM, with it's advantage: developer can easily customize the UI (dialog) without touching ViewModel's code.
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
- After modification, click OK button to confirm.
- Result
Cancel
The Cancel button is used to revert to previsous status.
Demonstraction:
- Original view
- After modification, click Cancel button to revert.
- Result
Add to Visible Column
The Add button is used to move selected hidden column to visible column
Demonstraction:
- Original view
- Select a column, then click the Add button
- Click OK button to confirm
- Result
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
- Click OK button to confirm
- Result
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
- Click OK button to confirm
- Result
Move Visible Column Down
Drag & Drop
Drag Hidden Column to Visible Column
Drag Visible Column to Hidden Column
Drag Column and Drop After Any Columns
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. |