Telerik UI for Windows 8 HTML

There are multiple ways to interact with RadTokenInput programmatically. You can open, close or focus the dropdown list. You can also filter the DataSource and show the filtered data in the dropdown list. The following article describes how you can do these things with your code.

In order to be able to interact with the RadTokenInput, you need to first initialize it and access it in your JavaScript code. The code snippets below show how you can define the control in the mark-up and get it afterwards in the code-behind. In the current example the Telerik.UI.find.TokenInput() method is used, which "casts" the control object to its proper type and you are provided with IntelliSense. You can find more information regarding the find and to method groups in this article: Enabling Telerik Controls IntelliSense.

Mark-up Copy imageCopy
<span id="tokenInput" data-win-control="Telerik.UI.RadTokenInput"></span>
<div id="interactionBtnsWrapper">
    <div class="interactionControls">
        <input id="openBtn" type="button" value="Open" />
        <input id="closeBtn" type="button" value="Close" />
        <input id="toggleBtn" type="button" value="Toggle" />
        <input id="focusBtn" type="button" value="Focus" />
    <div class="interactionControls">
        <input id="searchText" type="text" />
        <input id="searchBtn" type="button" value="Search" />
RadTokenInput Setup Copy imageCopy
tokenInput = Telerik.UI.find.TokenInput("#tokenInput");

var tokenInputDS = new Telerik.Data.DataSource({
    transport: {
        read: {
            url: "",
            dataType: "json"
    schema: {
        data: "value"

tokenInput.dataSource = tokenInputDS;
tokenInput.dataTextField = "ProductName";
tokenInput.dataValueField = "ProductID";
tokenInput.filter = "contains";

document.getElementById("openBtn").addEventListener("click", openList);
document.getElementById("closeBtn").addEventListener("click", closeList);
document.getElementById("toggleBtn").addEventListener("click", toggleList);
document.getElementById("focusBtn").addEventListener("click", focusControl);
document.getElementById("searchBtn").addEventListener("click", SearchDataSource);

There are also five buttons defined. Each of the interaction methods is attached as an event handler to the corresponding button. The "Search" button also have an input text field next to it to get string values for the method.

You can force the dropdown list to open by using the open() method.

Open the Dropdown List Copy imageCopy
function openList() {;

To close the dropdown list, when it is opened, use the close() method. Note that this method resets the search settings.

Close the Dropdown List Copy imageCopy
function closeList() {

To focus the control, use its focus() method. It will cause the control to be highlighted.

Focus the Control Copy imageCopy
function focusControl() {

Use the search() method to force the control to filter its data records. The search() method takes a string as an argument and filters the DataSource based on the filter property value of the control. The result is the dropdown list is opened and populated with the filtered data.

Forcing a Search Copy imageCopy
function SearchDataSource() {
    var searchText = document.getElementById("searchText").value;;