Column Chooser"
m |
m |
||
| Line 130: | Line 130: | ||
Invoke Columnchooser.setVisibleColumns(List<String> columns) and Columnchooser.setHiddenColumns(List<String> columns) to setup columns. <br/> | Invoke Columnchooser.setVisibleColumns(List<String> columns) and Columnchooser.setHiddenColumns(List<String> columns) to setup columns. <br/> | ||
| − | + | ZUL with MVVM | |
<source lang="xml" high="2,3"> | <source lang="xml" high="2,3"> | ||
<columnchooser | <columnchooser | ||
| Line 137: | Line 137: | ||
</source> | </source> | ||
| + | Java | ||
| + | <source lang="java" high="1,5"> | ||
| + | public ArrayList<String> getVisibleColumnLabels() { | ||
| + | ... | ||
| + | } | ||
| + | |||
| + | public ArrayList<String> getHiddenColumnLabels() { | ||
| + | ... | ||
| + | } | ||
| + | </source> | ||
===Event=== | ===Event=== | ||
When user made change and confrimed, Columnchooser will fire '''ColumnVisibilityChangeEvent''' event, the name of the event is '''onColumnVisibilityChange''' | When user made change and confrimed, Columnchooser will fire '''ColumnVisibilityChangeEvent''' event, the name of the event is '''onColumnVisibilityChange''' | ||
Revision as of 08:59, 31 May 2013
Sam Chuang, Engineer, Potix Corporation
May 30, 2013
ZK 6.5 and later
This paragraph is under construction.
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
- 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
- Select a visible column, then click the Move Up button
- Click OK button to confirm
- Result
Move Visible Column Down
The Move Down button is used change column order, move select column down.
Demonstraction:
- Original view
- Select a visible column, then click the Move Down button
- Click OK button to confirm
- Result
Drag & Drop
Drag Hidden Column to Visible Column
Demonstraction:
- Original view
- Drag hidden column, then drop at visible column area
- Click OK button to confirm
- Result
Drag Visible Column to Hidden Column
Demonstraction:
- Original view
- Drag visible column, then drop at hidden column area
- Click OK button to confirm
- Result
Drag Column and Drop on Any Column
Demonstraction:
- Original view
- Drag visible column, then drop at hidden column area
- Click OK button to confirm
- Result
Usage
Visible Columns and Hidden Columns
Invoke Columnchooser.setVisibleColumns(List<String> columns) and Columnchooser.setHiddenColumns(List<String> columns) to setup columns.
ZUL with MVVM
<columnchooser
visibleColumns="@load(vm.visibleColumnLabels)"
hiddenColumns="@load(vm.hiddenColumnLabels)" />
Java
public ArrayList<String> getVisibleColumnLabels() {
...
}
public ArrayList<String> getHiddenColumnLabels() {
...
}
Event
When user made change and confrimed, Columnchooser will fire ColumnVisibilityChangeEvent event, the name of the event is onColumnVisibilityChange
ZUL
<columnchooser
visibleColumns="@load(vm.visibleColumnLabels)"
hiddenColumns="@load(vm.hiddenColumnLabels)"
onColumnVisibilityChange="@command('doColumnVisibilityChange',
visibleColumns=event.visibleColumns,
hiddenColumns=event.hiddenColumns)"></columnchooser>
Java
@Command
public void doColumnVisibilityChange(
@BindingParam("visibleColumns") List<String> visibleColumns,
@BindingParam("hiddenColumns") List<String> hiddenColumns) {
...
}
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. |