Telerik UI for Windows 8 HTML

This article describes the events fired by RadTokenInput, their usage and most notable event arguments.

Event Name

Description

Arguments

change

Fires when the value of the RadTokenInput changes.

e.target: The RadTokenInput control whose value has changed. The new value can be accessed through e.target.value.

close

Fires when the dropdown list of RadTokenInput is closed.

e.target: The RadTokenInput control whose dropdown was closed.

databinding

Fires when the control is about to databind.

e.target: The RadTokenInput control that is about to be bound.

databound

Fires immediately after the control is databound.

e.target: The RadTokenInput control that has been bound.

open

Fires when the dropdown list of RadTokenInput is shown.

e.target: The RadTokenInput control whose dropdown has been opened.

select

Fires when an item is selected from the dropdown list of RadTokenInput.

e.target: The RadTokenInput control in which an item has been selected.

e.item: The jQuery object that represents the selected item.

Here follows an example of using the select event to access information about the selected item.

RadTokenInput Definition Copy imageCopy
<span id="myTokenInput" data-win-control="Telerik.UI.RadTokenInput" data-win-options="{
            dataSource: [
                { Name: 'Pears', ID: 1 },
                { Name: 'Apples', ID: 2 },
                { Name: 'Strawberries', ID: 3 },
                { Name: 'Bananas', ID: 4 },
                { Name: 'Raspberries', ID: 5 },
                { Name: 'Cherries', ID: 6 }
            ],
            dataTextField: 'Name',
            dataValueField: 'ID',
            onselect: Sample.Helpers.itemSelected
        }"></span>
<span id="selection" style="color: #33ccff"></span>
Event Handler Copy imageCopy
WinJS.Namespace.define("Sample.Helpers", {
    itemSelected: WinJS.Utilities.markSupportedForProcessing(function (e) {
        var itemIndex = e.item.index();
        var dataItem = e.target.dataItem(itemIndex);
        document.getElementById("selection").innerText = "Selected: " + dataItem.Name;
    })
});