Cascader"

From Documentation
(2 intermediate revisions by the same user not shown)
Line 28: Line 28:
 
</source>
 
</source>
  
Users can select in layers, and the selection path would be converted into text. (Default is joining by slashes, i.g. "A/B/C")
+
Users can select in layers, and the selected items are converted into text. (Default: joining by slashes, i.g. "A/B/C")
  
 
= Properties =
 
= Properties =
Line 43: Line 43:
 
The item renderer is used to render each item.
 
The item renderer is used to render each item.
  
By implementing your own <javadoc>org.zkoss.zul.ItemRenderer</javadoc>, you can generate the HTML fragment for the data model. Normally you would like to use the default implementation and use <code>&lt;template name="model"&gt;</code> instead.
+
The easiest way is to use the default implementation and use <code>&lt;template name="model"&gt;</code>. Or, by implementing your own <javadoc>org.zkoss.zul.ItemRenderer</javadoc>, you can generate the HTML fragment yourself for the data model.
  
 
== Model ==
 
== Model ==
Line 58: Line 58:
 
Represents the selected item, or null if no item is selected.
 
Represents the selected item, or null if no item is selected.
  
A non-leaf item can't be selected in the cascader. For example, users can only select item C in an A - B - C structure. But items A and B can't be selected.
+
Items are selected only if the leaf item is selected. For example, in an A - B - C structure, selected item remains null until the leaf node C is selected.
  
 
=Supported Events=
 
=Supported Events=

Revision as of 03:48, 19 November 2019

Cascader

  • Available for ZK:
  • http://www.zkoss.org/product/zkhttp://www.zkoss.org/whyzk/zkeeVersion ee.png
[ since 9.0.0 ]

Employment/Purpose

A Cascader is a dropdown list in a tree structure and supports TreeModel.

Example

File:Cascader-example.png

    <zscript><![CDATA[
        DefaultTreeModel tm = new DefaultTreeModel(new DefaultTreeNode("ROOT",
        Arrays.asList(new DefaultTreeNode[]{
                new DefaultTreeNode("David", Arrays.asList(new TreeNode[]{new DefaultTreeNode("David-1"),
                                 new DefaultTreeNode("David-2")})),
                new DefaultTreeNode("Thomas",new ArrayList()),
                new DefaultTreeNode("Steven",new ArrayList())})));
    ]]></zscript>
    <cascader width="300px" model="${tm}" />

Users can select in layers, and the selected items are converted into text. (Default: joining by slashes, i.g. "A/B/C")

Properties

Disabled

Sets whether it is disabled. A disabled component can't interact with users.

ItemConverter

The converter generates the label text shown in the cascader. By implementing your own Converter, you can generate the label that represents the selected item. The default implementation is joining all the toString() result of items by slashes.

ItemRenderer

See also: ZK_Developer's_Reference/MVC/View/Renderer/Cascader_Renderer

The item renderer is used to render each item.

The easiest way is to use the default implementation and use <template name="model">. Or, by implementing your own ItemRenderer, you can generate the HTML fragment yourself for the data model.

Model

The tree model associated with this cascader.

Open

Drops down or closes the list of items.

Placeholder

When the selected item is empty, the placeholder text would be displayed. (Default: empty)

SelectedItem

Represents the selected item, or null if no item is selected.

Items are selected only if the leaf item is selected. For example, in an A - B - C structure, selected item remains null until the leaf node C is selected.

Supported Events

Name
Event Type
onAfterRender
Event: Event

Notifies one that the model's data has been rendered.

onSelect
Event: SelectEvent

Represents an event caused by user's the selection changed at the client.

onOpen
Event: OpenEvent

Represents an event that indicates an open state that is changed at the client.

Supported Children

* None

Use Cases

Version Description Example Location
     

Version History

Last Update : 2019/11/19


Version Date Content
9.0.0 November, 2019 ZK-4392: Provide a cascader component



Last Update : 2019/11/19

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