Telerik UI for Windows 8 HTML

This article will show and explain the HTML output and CSS classes of RadTokenInput in basic scenarios (some HTML attributes have been removed for simplicity).

Basic Output

Below you can see the basic HTML output of the RadTokenInput and descriptions of its elements.

HTML Copy imageCopy
<span class="t-list win-interactive">
    <div class="k-widget k-multiselect k-header">
        <div class="k-multiselect-wrap k-floatwrap">
            <ul class="k-reset"></ul>
            <input class="k-input">
            <span class="k-icon k-loading k-loading-hidden"></span>
        </div>
        <select style="display: none">
            <option>Option 1</option>
            <option>Option 2</option>
        </select>
    </div>
</span>

Class/selector name

Description

.t-list

The RadTokenInput wrapper element. This is the element that is passed in the control's constructor.

.k-multiselect

The wrapper of the token input elements and the hidden select element, which holds the selected value.

.k-multiselect .k-multiselect-wrap

The wrapper of the token input elements - the input text box and the drop down list arrow.

.k-multiselect-wrap ul

The list container in which the token boxes are added.

.k-multiselect-wrap .k-input

The input text box of the token input.

.k-multiselect-wrap .k-loading

The loading indicator of the token input.

Additional States

These CSS classes are added to the .k-multiselect in different scenarios (when the widget is focused, hovered, disabled, etc.).

Class/selector name

Description

.k-state-hover.k-multiselect

This class is added to the .k-multiselect when the mouse hovers over the RadTokenInput.

.k-state-focused.k-multiselect

This class is added to the .k-multiselect when the RadTokenInput is focused.

.k-state-disabled.k-multiselect

This class is added when the RadTokenInput is disabled. That is when the enabled property is set to false.

.k-state-border-down.k-multiselect

This class is added to the .k-multiselect when the popup is opened below the text box.

.k-state-border-up.k-multiselect

This class is added to the .k-multiselect when the popup is opened above the text box.

TokenInput Items

When an item from the drop down list is selected, it populates the .k-multiselect-wrap ul element. Below you can see the HTML output of the box items, that are in the selected list.

HTML Copy imageCopy
<li class="k-button">
    <span>Item</span>
    <span class="k-icon k-delete">delete</span>
</li>

Class/selector name

Description

.k-multiselect-wrap .k-button

The box item in the selected list.

Note

One additional CSS class is added to the .k-button when the mose hovers over the box item - .k-state-hover.

.k-multiselect-wrap .k-delete

The delete icon of the box item.

List Container Output

Below you can see the basic HTML output of the dropdown list container of the RadTokenInput and descriptions of its elements.

HTML Copy imageCopy
<div class="k-animation-container">
    <div class="k-list-container k-popup k-group k-reset">
        <ul class="k-list k-reset">
            <li class="k-item">Suggestion 1</li>
            <li class="k-item">Suggestion 2</li>
        </ul>
    </div>
</div>

Class/selector name

Description

.k-animation-container

The element that wraps the list popup when it is animated.

.k-list-container.k-popup

The wrapper element of the popup.

Note

Two additional CSS classes are added to the .k-popup.

  • .k-state-border-down - This class is added to the widget when the popup is opened below the input box.

  • .k-state-border-up - This class is added to the widget when the popup is opened above the input box.

.k-popup .k-list

The list container with the results.

.k-popup .k-list .k-item

A single item from the results.

Additional States of the items

These CSS classes are added to the .k-item element in different scenarios (when it is focused or hovered).

Class/selector name

Description

.k-popup .k-state-hover.k-item

This class is added to the list item when the mouse hovers over it.

.k-popup .k-state-focused.k-item

This class is added to the list item when it is focused.