Telerik UI for Windows 8 HTML
Contents

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;
    })
});