<kendo:chip>

A JSP wrapper for Kendo UI Chip.

Configuration Attributes

attributes java.lang.Object

Defines custom attributes of the Chip's element.

Example

<kendo:chip attributes="attributes">
</kendo:chip>

avatarClass java.lang.String

If set, value will be appended to the icon's element class attribute. It also appends "k-chip avatar" and "k-avatar" classes to the icon's element.

Example

<kendo:chip avatarClass="avatarClass">
</kendo:chip>

enabled boolean

Toggles the enabled state of the Chip.

Example

<kendo:chip enabled="enabled">
</kendo:chip>

fillMode java.lang.String

Sets a value controlling how the color is applied.

Example

<kendo:chip fillMode="fillMode">
</kendo:chip>

icon java.lang.String

Defines the name for an existing icon in a Kendo UI theme or SVG content. The icon is rendered inside the chip by a span.k-icon or span.k-svg-icon element.See web font icons help article for more details on Kendo UI icons.

Example

<kendo:chip icon="icon">
</kendo:chip>

iconClass java.lang.String

If set, value will be appended to the icon's element class attribute.

Example

<kendo:chip iconClass="iconClass">
</kendo:chip>

label java.lang.String

The label text of the chip. Default is empty string.

Example

<kendo:chip label="label">
</kendo:chip>

removable boolean

Specifies if the Chip will be removable or not. If the property is set to true, the Chip renders a remove icon.

Example

<kendo:chip removable="removable">
</kendo:chip>

removeIcon java.lang.String

Defines the name for an existing icon in a Kendo UI theme or SVG content for the remove button when removable=true. The icon is rendered inside the chip by a span.k-icon or span.k-svg-icon element.See web font icons help article for more details on Kendo UI icons.

Example

<kendo:chip removeIcon="removeIcon">
</kendo:chip>

removeIconClass java.lang.String

If set, value will be appended to the remove icon's element class attribute.

Example

<kendo:chip removeIconClass="removeIconClass">
</kendo:chip>

rounded java.lang.String

Sets a value controlling the border radius.

Example

<kendo:chip rounded="rounded">
</kendo:chip>

selectable boolean

Sets whether the Chip can be selected.

Example

<kendo:chip selectable="selectable">
</kendo:chip>

selected boolean

Toggles the selected state of the Chip.

Example

<kendo:chip selected="selected">
</kendo:chip>

size java.lang.String

Sets the size of the component.

Example

<kendo:chip size="size">
</kendo:chip>

themeColor java.lang.String

Sets the color of the component according to the applied theme.

Example

<kendo:chip themeColor="themeColor">
</kendo:chip>

Event Attributes

click String

Fires when the user clicks the content of the Chip or activates it with the Enter or Space keys.

For additional information check the click event documentation.

Example

<kendo:chip click="handle_click">
</kendo:chip>
<script>
    function handle_click(e) {
        // Code to handle the click event.
    }
</script>

select String

Fires when the selection of a selectable the Chip toggles.

For additional information check the select event documentation.

Example

<kendo:chip select="handle_select">
</kendo:chip>
<script>
    function handle_select(e) {
        // Code to handle the select event.
    }
</script>

remove String

Fires when the user clicks the remove icon of the Chip. After this event, the Chip will not remove itself.

For additional information check the remove event documentation.

Example

<kendo:chip remove="handle_remove">
</kendo:chip>
<script>
    function handle_remove(e) {
        // Code to handle the remove event.
    }
</script>

Event Tags

kendo:chip-click

Fires when the user clicks the content of the Chip or activates it with the Enter or Space keys.

For additional information check the click event documentation.

Example

<kendo:chip>
    <kendo:chip-click>
        <script>
            function(e) {
                // Code to handle the click event.
            }
        </script>
    </kendo:chip-click>
</kendo:chip>

kendo:chip-select

Fires when the selection of a selectable the Chip toggles.

For additional information check the select event documentation.

Example

<kendo:chip>
    <kendo:chip-select>
        <script>
            function(e) {
                // Code to handle the select event.
            }
        </script>
    </kendo:chip-select>
</kendo:chip>

kendo:chip-remove

Fires when the user clicks the remove icon of the Chip. After this event, the Chip will not remove itself.

For additional information check the remove event documentation.

Example

<kendo:chip>
    <kendo:chip-remove>
        <script>
            function(e) {
                // Code to handle the remove event.
            }
        </script>
    </kendo:chip-remove>
</kendo:chip>