Telerik UI for Windows 8 HTML

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

Event Name




Fires when the value of the RadTokenInput changes. The RadTokenInput control whose value has changed. The new value can be accessed through


Fires when the dropdown list of RadTokenInput is closed. The RadTokenInput control whose dropdown was closed.


Fires when the control is about to databind. The RadTokenInput control that is about to be bound.


Fires immediately after the control is databound. The RadTokenInput control that has been bound.


Fires when the dropdown list of RadTokenInput is shown. The RadTokenInput control whose dropdown has been opened.


Fires when an item is selected from the dropdown list of RadTokenInput. 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 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 =;
        document.getElementById("selection").innerText = "Selected: " + dataItem.Name;