While working on a business grade mobile app using Telerik Platform and Visual Studio 2015 Professional. I was surprised how easy to build app using Telerik Platform, especially the Kendo UI that offers visual appealing mobile tools to build hybrid mobile app.

In this tutorial, I like to show you how you can get started with the Kendo UI Core (the free version of Kendo UI Professional) in Visual Studio 2015.

Before we get started, you may ask what is Kendo UI Core? Kendo UI Core is a Open Source (Free) UI Framework. This was the decision made by Telerik in 2014. Although Kendo UI Core is a strip down version of Kendo UI Professional, you got all the power needed to build a professional mobile app and most importantly it’s FREE.

Installation/Setup

Let’s  get all the tools ready before we start coding our kendo UI cordova app.

1. Download Visual Studio 2015 Community

    Go to https://www.visualstudio.com/en-us/products/visual-studio-community-vs.aspx, and click on "Download Community 2015" button in green.If you already have the Professional version or higher, you will have to uninstall it first before installing Visual Studio Community 2015 (Sounds stupid isn't it). So in this case, you don't install Community version. Just use Professional or higher.

    

2. Download the latest version of Visual Studio Tools for Apache Cordova

    http://taco.visualstudio.com/

    

3. Create Apache Cordova App In Visual Studio

   File > New > Project. In the Templates panel, Choose "Javascript" > "Apache Cordova App" > "Blank App(Apache Cordova)"

    

4. Install and configure Kendo UI Core
   

   I am going to show you how to do it using Bower 
   First, Open Bower.json file in visual studio, entering "Kendo-UI-core" in the dependency section as picture show below. IntelliSense feature in Visual Studio will search the Bower repository for you and suggest packages to install
   
   By default, any packages downloaded from Bower will be saved to disk in a bower_components folder located next to the bower.json file.
    
   
   To use the package, we need to manually save the files we need to www folder. let's create a kendo folder within www folder and copy/paste the following files/folder into it.
   
   1. kendo.ui.core.min.js
   2. kendo.mobile.all.min.css and the images folder
   
   

Now you are ready to code your app using Kendo UI. Unlike the Ionic UI framework which Microsoft created a template for visual studio project, There is no project template for Kendo UI as far as I know at this point. Therefore this tutorial is here to show you the steps and files needed to get started.

In next article, I am planning to show you more detail about how to code your mobile App using Kendo UI.

Reference:

1. Use Ionic instead of Kendo UI
2. Kendo UI Hybrid Demo