Install Kendo UI Core in Visual Studio Cordova

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.

VSCordovaKendoUI
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 installVSCordovaKendoUI.bower-kendo
    
    By default, any packages downloaded from Bower will be saved to disk in a bower_components folder located next to the bower.json file.
     VSCordovaKendoUI.bower_component
    
    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
    
    VSCordovaKendoUI.www-kendo

 

 

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
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s