Read here to set up environment to use RadControls in your application.

In this post we will take a look on working with RadDropDownList in JavaScript based application for Windows 8. RadDropDownList allows you to select one item from list of items.

Getting Started with RadDropDownList

You can create a RadDropDownList by setting data-win-control property of a span or div element as Telerik.UI.RadDropDownList. You can do that as following,

<span id="sportsdropdown"
 data-win-control="Telerik.UI.RadDropDownList"
 data-win-options="{height: 250,
 dataSource:['Cricket','Soccer','Tennis']
 }"
 >
 </span>

RadDropDownList allows you to select an element from the list of elements displaying in drop down. RadDropDownList can display a local array or data returning from remote service as data. dataSource property of RadDropDown defines the data to be displayed . In above RadDropDown we have set the dataSource with inline array in the data-win-options. You can also bind dataSource of RadDropDownList from array defined in other files or JSON data returning from the remote services.

Let us say there is an array on default.js as following

var sportsArray = ['Cricket','FootBall','Hockey','Tennis','BaseBall'];

To set it as dataSource of RadDropDownList, first you need to create a Namespace. You can create that as following,

WinJS.Namespace.define("sportsdata", { sports: sportsArray }
 );

So far we have create array and namespace. Now you can set dataSource of RadDropDownList with array defined on default.js as following,

<div id="sportsdropdown"
 data-win-control="Telerik.UI.RadDropDownList"
 data-win-options="{height: 250,
 dataSource:sportsdata.sports
 }"
 >
 </div>

On running the application you should get RadDropDownList as populated with data from sportsArray as following,

Working with Remote Data

Above we used local data as dataSource of RadDropDownList. We can bind data from remote data source as well. For example if we want to display movies title from Netflix we can do that following below steps ,

• Make a call to Netflix Odata serveice
• Parse the resturned JSON
• Construct array from parsed JSON data
• Set array as datasource of RadDropDownList

WinJS.xhr({
 url: "http://odata.netflix.com/Catalog/Titles" + "?$format=json&$select=ShortName,BoxArt&$top=300"
 }).then(function (xhr) {
 var movies = JSON.parse(xhr.response).d;
 movies.forEach(function (i) {
 movieArray.push(i.ShortName);
 });
 var moviedropdown = document.getElementById("moviesdropdown").winControl;
 moviedropdown.dataSource.data = movieArray;
 });

In above code,

• we are making call to Netflix OData feed using WinJS.xhr
• Prasing returned JSON using JSON.parse
• Iterting each element and pushing it to array
• Taking reference of RadDropDownList using document.getElementbyID
• Setting the datasource

And on HTML there is a div elment with id moviedropdown

<div id="moviesdropdown"
 data-win-control="Telerik.UI.RadDropDownList"
 data-win-options="{height: 250,

 }"
 >
 </div>

When you run the application you will get RadDropDownList populated with movies title from Netflix.

Attaching Change Event

You can attach change event to RadDropDownList and read the selected value . You can do that as following

moviedropdown.addEventListener("change", function (e) {
 document.getElementById("output").innerText = e.target.value;

});

In above code

• Output is id of the span
• Selected value will be displayed as text of the output span

In this way you can work with RadDropDownList in the application. In this post we learnt on getting started, working with remote data and about change event. I hope you find this post useful. Thanks for reading.