Introduction

 

Hello and welcome to our “First Look” of Telerik’s Windows 8 UI Controls. In this post, we are going to specifically target Windows 8 Applications built using HTM5/JS/CSS3 and our new Windows 8 control suite.

Have you ever wanted to create a Metro Application that had a more powerful ComboBox with functionality such as auto-complete or placeholder text? What about an AutoCompleteBox with the same functionality, but found that control completely missing? Maybe you are writing an application that needs the user to select from a list of World Countries, but don’t know where to start. In this blog post, we are going to show you how to implement these features using RadComboBox & RadAutoComplete found in Telerik’s Windows 8 UI Control Suite.

Gathering the Required Tools
 

Just like last time, you will need to setup your development environment. I created a “From Soup to Nuts” post that contains this information here. After that is complete then you will need to download and install the Telerik’s Windows 8 UI Controls. This download will install Beta 2 of the control suite. Once that is in place we are ready to start working with the controls. The latest version of the components also work with Visual Studio 2012 RTM (which is what I am using in this post).

Taking a Peek at RadComboBox First
 

Let’s begin by launching Visual Studio 2012 from the Start Screen and selecting “Templates” -> “Other Languages” -> “JavaScript” then “Windows Store”. If you are using the RC, then it located under "Windows Metro Style”. Select “Blank App” then give it a name and select the OK button as shown below.

SNAGHTML75bd951

In this first sample, we are going to use the name WorldCountriesRadComboBox. Once the project loads, we need to right click on References and select “Add Reference”.

From here, we can select “Telerik UI for JS Metro” and press OK.

SNAGHTML75c39f0

If you look under References, you will see “Telerik UI for JS Metro” has been added.

image

Double click on the default.html file and drag and drop the CSS files and JavaScript files from the Telerik UI for JS Metro onto your default.html page. These files contain the styles and controls required to use Telerik’s Windows 8 UI Controls (HTML). We now have the required files to begin the controls.

Switching Over to Blend
 

Go ahead and right click on default.html and select “Open in Blend”. We are going to use the power of blend to easily add this control onto our page.

Navigate over to Assets once the project loads and select “References” then “Telerik UI for JS Metro”. This will allow you to see all of the controls available in the suite.

image

Let’s go ahead now and drag and drop “RadComboBox” onto our designer and remove the <p> tag that says “Set Content Here”. Let’s select RadComboBox from the Live DOM and edit some of the HTML Attributes.

image

In this sample, we are going to add a dataSource which comes from a JavaScriptArray, give the dataTextField a name to key off of (so that it doesn’t list each item as objects and displays the actual name and finally set a placeholder text. Your completed code should look like the following:

<span data-win-control="Telerik.UI.RadComboBox" data-win-options="{dataSource: [

{ name: 'United States', code: 'US' },

{ name: 'Australia', code: 'AU' },

{ name: 'Germany', code: 'DE' },

{ name: 'United Kingdom', code: 'UK' },

{ name: 'France', code: 'FR' },

{ name: 'India', code: 'IN' }

], dataTextField: 'name', placeholder:'Select a Country'}"
></span>

If we go ahead and run the application, then we have a RadComboBox with a predefined set of data and placeholder text.

screenshot_08212012_124017

If we begin typing then we will see our results narrowed down.

screenshot_08212012_124243

You will notice that it followed Microsoft’s convention of data-win-control and you may optionally use data-win-option for further customization.

Using JavaScript with RadComboBox

 

Let’s go ahead and remove the span tag and configure RadComboBox programmatically by using JavaScript code and placing a div inside the body tag as shown below:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>WorldCountriesRadComboBox</title>

<!-- WinJS references -->

<link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />

<script src="//Microsoft.WinJS.1.0/js/base.js"></script>

<script src="//Microsoft.WinJS.1.0/js/ui.js"></script>

<!-- WorldCountriesRadComboBox references -->

<link href="/css/default.css" rel="stylesheet" />

<script src="/js/default.js"></script>

<link href="/Telerik.UI/css/dark.css" rel="stylesheet" />

<link href="/Telerik.UI/css/common.css" rel="stylesheet" />

<script src="/Telerik.UI/js/jquery.js"></script>

<script src="/Telerik.UI/js/ui.js"></script>

<script>

document.addEventListener("DOMContentLoaded", function () {

var comboBox = new Telerik.UI.RadComboBox(document.getElementById("myComboBox"), {

dataTextField: "name",

placeholder: "'Select a Country"

});

var dataSource = [

{ name: 'United States', code: 'US' },

{ name: 'Australia', code: 'AU' },

{ name: 'Germany', code: 'DE' },

{ name: 'United Kingdom', code: 'UK' },

{ name: 'France', code: 'FR' },

{ name: 'India', code: 'IN' }

];

comboBox.dataSource.data = dataSource;

});

</script>

</head>

<body>

<div id="myComboBox"></div>

</body>

</html>

 

The first thing you may notice is a simple div called, “myComboBox”. This is a placeholder for the RadComboBox control we are about to place inside. If you scroll up then you will see we added a small piece of JavaScript to run after the DOMContent is loaded and we declared a new instance of RadComboBox and set a local DataSource, DataTextField and Placeholder.

What if we wanted to bind to Remote Data?
 

Static data is great for simple applications where we know what the underlying data names/values should contain. But most real-world applications need data coming from a remote data source. We could quickly and easily bind to Twitter’s API with changing the JavaScript to the one listed below:

<script>

document.addEventListener("DOMContentLoaded", function () {

var comboBox = new Telerik.UI.RadComboBox(document.getElementById("myComboBox"), {

dataTextField: "text",

placeholder: "Tweet containing #telerik"

});

var ds = new Telerik.Data.DataSource({

transport: {

read: {

url: "http://search.twitter.com/search.json",

dataType: "json",

data: { q: "telerik" }

}

},

schema: { data: "results" }

});

comboBox.dataSource = ds;

ds.read();

});

</script>

 

As you can see in this example, everything is similar to what we saw before except we are using Telerik.Data.DataSource to create a dataset that we will use shortly for our RadComboBox’s datasource.

What is Telerik.Data.DataSource you may ask? Well it is a component that provides a flexible API for data binding UI Controls to local or remote data. In this sample, it allowed us to specify a read option and pass the url (Twitter’s search URL), data type (JSON) and data (which is the Twitter query string of “telerik”). We also can set the schema to read the “results” coming back from Twitter. We wrap up by setting the data source to ds and calling the read() method to make a web request to the remote service asynchronously.

What About RadAutoCompleteBox?
 

So far we have covered RadComboBox, but have not mentioned RadAutoCompleteBox. The first thing to discuss is the differences between them. RadComboBox is generally used to show a list of items and allows the user to select one or enter a custom value. RadAutoCompleteBox is used to display a list of suggestions matching the text typed in the box. You will notice that it does not have the drop-down arrow that we saw in RadComboBox.

So how do we Use it?
 

You will be pleasantly surprised that its functionality is nearly identical to RadComboBox. Go ahead and create another new project and give it the name “WorldCountriesAutoCompleteBox”. Add the references to the Telerik Controls as shown earlier and switch over to Blend by right-clicking the default.html page. Navigate over to Assets once the project loads and select “References” then “Telerik UI for JS Metro” and drag and drop “RadAutoCompleteBox” onto our designer and remove the <p> tag that says “Set Content Here”.

Let’s go ahead and set the same options that did before by setting a dataSource, dataTextField and placeholder to same thing we did for RadComboBox. The completed span tag should look like the following:

<span data-win-control="Telerik.UI.RadAutoCompleteBox" data-win-options="{dataSource: [

{ name: 'United States', code: 'US' },

{ name: 'Australia', code: 'AU' },

{ name: 'Germany', code: 'DE' },

{ name: 'United Kingdom', code: 'UK' },

{ name: 'France', code: 'FR' },

{ name: 'India', code: 'IN' }

], dataTextField: 'name', placeholder:'Select a Country'}"
></span>

 

If we run the application and type the letter ‘g’, then it will return the only item that matches it which is “Germany”. You may notice that it does not contain the drop-down arrow shown in RadComboBox.

screenshot_08212012_153811

 

Adding it through JavaScript
 

Adding it through JavaScript is also identical to its ComboBox implementation. Create a div called myautoCompleteBox inside the body tag and add the following piece of JavaScript. The only difference you will see here is that we are instantiating a new Telerik.UI.RadAutoCompleteBox instead of Telerik.UI.RadComboBox.

<script>

document.addEventListener("DOMContentLoaded", function () {

var autoCompleteBox = new Telerik.UI.RadAutoCompleteBox(document.getElementById("myautoCompleteBox"), {

dataTextField: "name",

placeholder: "'Select a Country"

});

var dataSource = [

{ name: 'United States', code: 'US' },

{ name: 'Australia', code: 'AU' },

{ name: 'Germany', code: 'DE' },

{ name: 'United Kingdom', code: 'UK' },

{ name: 'France', code: 'FR' },

{ name: 'India', code: 'IN' }

];

autoCompleteBox.dataSource.data = dataSource;

});

</script>

 

Wrap-up
 

In this blog post, we took a look at RadComboBox and RadAutoCompleteBox part of Telerik’s Windows 8 UI Controls. We saw how easy you can implement the controls in a real-world application using Blend or through JavaScript. I encourage you to check out the other controls available in the suite.

Thanks again and if you have any questions or comments, then feel free to drop them in the comments section below.

Win8_Download (2)


MichaelCrump
About the Author

Michael Crump

is a Microsoft MVP, Pluralsight and MSDN author as well as an international speaker. He works at Telerik with a focus on everything mobile.  You can follow him on Twitter at @mbcrump or keep up with his various blogs by visiting his Telerik Blog or his Personal Blog.

Related Posts

Comments