In this article we will discuss how we can harness the power of the Kendo UI for creating Windows Phone applications. Before proceeding with this article please read "Hello World "Windows Phone Application using PhoneGap or Cordova to set up the environment for developing Windows Phone applications using Cordova. When you have completed the steps for the "Hello World" Windows Phone Application using PhoneGap or Cordova, you need to then download the Kendo UI mobile from here. After downloading, you need to put the JS and Styles files in the WWW folder.

After copying the Kendo UI files, open index.html and modify the CSS reference and include the following JS file. Make sure you have commented default CSS reference of Cordova.

Now we are all set to go ahead and modify the body of the index.html to work with the Kendo UI. Let us make a view:

Any div can be turned as VIEW id data-role is set to view. Data-transition is set to slide. There are many other values of data-slide as well.

A view can contain header, footer and body. The header can be set as below:

And a view footer can be set as below:

On the body of the view we set a button. On the click event of the button we will go to the Second View. We can convert the anchor tag to a mobile button by setting the data-role to button. We can set the background color of the button also. In the href, we need to provide a mobile view a name appended with a hash to navigate. On the click event of the button we will be navigated to a mobile view with id as the secondview.

The complete code for two views and navigation between the views is as follows:

// once the device ready event fires, you can safely do your thing! -jmfunction onDeviceReady() {//document.getElementById("welcomeMsg").innerHTML += "This is my first cordova/PhoneGap Application" console.log("onDeviceReady. You should see this message in Visual Studio's output window."); }</script></head><body><divid="firstview"data-role="view"data-transition="slide"><divdata-role="header">First View Header</div> Hello World First View <br/><ahref="#secondview"data-role="button"style="background-color: green"> Go to Second View</a><divdata-role="footer">First View Footer</div></div><divid="secondview"data-role="view"data-transition="slide"><divdata-role="header">Second View Header</div> Hello World Second View <br/><ahref="#firstview"data-role="button"style="background-color:red">Go to First View</a><divdata-role="footer">Second View Footer</div></div><scripttype="text/javascript">var app = newnew kendo.mobile.Application(); </script></body></html>

On running the application in a Windows Phone emulator you should have the following output:

In this way you can get started with the Kendo UI and Cordova to create apps targetting multiple platforms. We will get into details of different Kendo UI mobile widgets in a future article. Thanks for reading!