I previously wrote about using the Telerik RadAutoCompleteBox control for Windows Store apps. We’re going to look at another control, which is the RadDropDownList control. This control is as simple as the RadAutoCompleteBox, and I’m going to include some additional steps not mentioned previously. So let’s get started. To begin, we need to add a reference to the Telerik.UI.DLL, which is available once you downloaded and installed the Windows 8 components. Once installed, you can add a reference to it by right-clicking references, selecting “Add reference”. It should appear in the extensions list.
Once you have this, we need to add some references to scripts and styles, as shown next:
<link href=”///Telerik.UI/css/common.css” rel=”stylesheet” />
<link href=”///Telerik.UI/css/dark.css” rel=”stylesheet” />
<script src=”///Telerik.UI/js/jquery.js”></script>
<script src=”///Telerik.UI/js/ui.js”></script>
Notice the triple slash at the beginning of the script. This is the assembly notation. This signals to the Windows framework to look in Telerik.UI.dll for the associated CSS and JS files, similar to how we pull out embedded references in the ASP.NET AJAX framework.
Next, we need to add a reference to the control in the page:
<span id=”Group” data-win-control=”Telerik.UI.RadDropDownList”
data-win-options=”{dataTextField:’GroupName’,dataValueField:’GroupUserName’,autoBind:false}”></span>
Here we create a new RadDropDownList and initialize the field names, which are pointers to fields in the objects bound to the list. Next, the autoBind feature signals not to automatically bind on load. This is because, in this example, we’re going to programmatically bind the grid. I do so first by making a call to a backend service:
WinJS.xhr({
type:”get”,
url: “..”,
headers: { “content-type”: “application/json” }
})
.then(
function(d) {
var data = JSON.parse(d.response);
var dataSource = new Telerik.Data.DataSource(data);
var group = document.querySelector(“#Group”).winControl;
group.dataSource = dataSource;
}
);
Using the xhr function to make an XML HTTP request, the established JSON data returned from the backend service is passed to the Telerik data source and bound to the control. Instead of binding from code, we can also bind data inline, as illustrated in the following example. Below is a snapshot of an example created in the telerik sample documents.
<span id=”Span1″ data-win-control=”Telerik.UI.RadDropDownList” data-win-options=”{
dataSource: [
{ category: ‘Green’, color: ‘#7AD36A’, border: ‘#3A7E2B’ },
{ category: ‘Interesting’, color: ‘#9CB6E7’, border: ‘#28518E’ },
{ category: ‘Orange’, color: ‘#F9BA89’, border: ‘#B14F0C’ },
{ category: ‘Purple’, color: ‘#B6A2E3’, border: ‘#4C318E’ },
{ category: ‘Red’, color: ‘#E6A0A1’, border: ‘#A61C22’ },
{ category: ‘Yellow’, color: ‘#FCFA90’, border: ‘#A0981D’ }
]
}”></span>
I hope this was a good illustration of the Telerik RadDropDownList control, and how easy it is to use in your projects.
On All Things Web 