kendo ui (core)

Recently, I came to know that the free and open-source distribution of Kendo UI news also ships AngularJS with it.

FYI : Kendo UI core now ships with Apache 2 license and not GPL.

We all know that Kendo UI is a full front-end framework. That means that it has all of the UI widgets. And I had been using Kendo with MVC in the past. The trend has been changed a bit fellas ! Since few months, I had been working on Web API, MVC, bootstrap and AngularJS — pretty popular stack now a days. Anywhere you need a page, use a MVC controller and views, whereas for CRUD operations basically one may use Web API controllers ( async calls ) with HTTP verbs.

Now, the marriage b/w AngularJS and bootstrap seem to be seamless for the client-side / GUI design point of view. But

I’ve gone ahead of the time created a public GitHub repository and also wanted to spin it up to web-app

  • You can follow along and/or refer to my code on GitHub for your reference or feel free to clone it !
  • I’m spinning this app on AppHarbor :

So, what are you waiting for now ? Let’s get our feet wet in the water.

I’ve, :

VS 2k 13 | SQL Server 2010 Express | Northwind database | Fiddler | & Couple cool dev tools extensions for Google Chrome ( Batrang & Kendo UI Chrome Inspector ).

  1. Fire up your Visual Studio IDE, and meanwhile …
    • download & extract Kendo UI core from here
    • I’d prefer to use Sidewaffle extension in my visual studio for AngularJS.
  2. Alright, now File — > New Project — > ASP.NET web Application — > Call it “LearnKendo” — > Select MVC + Check Web API.
  3. We also need to add two more class libraries to the solution. Let’s call them “NorthwindEntities” and “Domain“.I used NorthwindEntities to generate POCO classes from Northwind using EF 6’s code first approach in ~/NorthwindEntities/DB folder.I also went ahead and created few data-contracts in Domain/DataContracts. All these data contracts implement IDataContract interface that I created in the root of this project. ( You can put them in Model directory too, you want ! )Next, I created IDbContext interface and renamed Northwind.cs to NorthwindContext.cs in NorthwindEntities/DB folder. I also implemented IDbContext interface on this class.Cool !
  4. (You sure can stream line this using Nuget package manager but I’m personally li’le savvy on what and how much dead code lives on my server like all those css theme files that I’m not gonna use etc)Now go to ‘content’ directory of your application, and create a folder ‘kendo’ (~/LearnKendo/content/kendo). Then go to the extracted kendo ui core folder and go to ‘styles’ folder. Copy following and stick them in ~/LearnKendo/content/kendo :
    1. Default folder ( Theme )
    2. Textures folder
    3. kendo.common.min.css
    4. Kendo.default.min.css ( Theme )
  5. Now, the scripts. Create ~/LearnKendo/Scrtipts/KendoUI and copy following from extracted folder’s js directory :
    1. jquery.min.js
    2. kendo.core.min.js
    3. kendo.ui.core.min.js
    4. angular.min.js
  6. Almost there. Go to View/Shared/_Layout.cshtml and now add these css and js files:
    <link href="~/Content/kendo/kendo.common.min.css" rel="stylesheet" />
    <link href="~/Content/kendo/kendo.default.min.css" rel="stylesheet" />
    <script src="~/Scripts/KendoUI/jquery.min.js"></script>
    <script src="~/Scripts/KendoUI/kendo.core.min.js"></script>
    <script src="~/Scripts/KendoUI/kendo.ui.core.min.js"></script>
  7. Are we there yet ? Well nope. There is one sneaky thing that might surprise you. Though ~/NorthwindEntities/App.config has the right connection string that NorthwindContext.cs is expecting, remember that the LearnKendo is the main project. You’ll need to copy the connection string to the main project config file. Otherwise you might get an error : No connection string named ‘MyEntities’ could be found in the application config file. stack overflow question

All set ! The project is now ready to be worked on.

There may already be some templates for visual studio which should do all/most of Kendo UI configuration for you but I haven’t tried any, yet.

Now, we’ll start codin’. We’ve KendoUI, AngularJS backed in with MVC, Web API, SQL Server, and EF 6.0 (Still on 4.0? run PM> Update-Package EntityFramework in package manager console if you wish to upgrade).

So you can potentially drive from here, but wait ! At this point you’ve 2 main options :: [ read more on telerik ]

  1. Traditional approach — self explanatory
    • Using the data-bind syntax with MVVM
    • Using data- syntax with declarative approach
  2. AngularJS approach — add kendo to AngularJS rather AngularJS to kendo

1) Traditional Approach

I’d brief this one but, more could be found here on official demo page.

Now let’s go to MVC view folder for /Home/Index.cshtml and replace the code with following:

ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
<!-- the script tag below is here just for the simplicity sake -->
$(function () {
<div class="display-picker">
<input id="datepicker" value="10/10/2011" style="width:150px;" />
view raw Index.cshtml hosted with ❤ by GitHub

Let’s run the app & … Voila ! You see a date-picker

2) AngularJS approach

I can assume you’ve some intermediate / at-least basic knowledge of AngularJS, right?
I prefer to create a separate folder in ~/LearnKendo/Scripts called App, as I like to have all my scripts at one spot. You can probably tell that I’ve gone ahead a little & created couple sample files.

First things first, bootstrapping AngularJS. App.js would be our module, I called it ‘app’

var app = angular.module('app', [
// below, we're telling AngualrJs that we're gonna use kendo ui core's directives
// here is a very simple filter which has nothing to do with kendo but just to format my dates
app.filter("asDate", function () {
return function (input) {
return new Date(input);
app.value('$', $);
view raw app.js hosted with ❤ by GitHub

If you’re working on a large application this might be basic and raw, very raw version of your AngularJS module

Next, home controller js …

function () {
'use strict';
var controllerId = 'home';
app.controller(controllerId, ['$scope', 'customerService', home]);
function home($scope, service) {
$scope.title = 'home';
$scope.activate = function () {
service.getAll().success(function (records, status) {
$scope.ppl = records;
$scope.autoCompleteValues = new{ data: records });
}).error(function (data, status) {
$scope.spinnerOptions = {
format: '#'
//, decimals: 0
$scope.personId = 0;
$scope.$watch('person', function () {
if ($scope.person !== undefined && $scope.person !== null && $scope.person !== '') {
var result = $.grep($scope.ppl, function (e) { // jQuery grep
return == $scope.person.toLowerCase();
if (result.length & 0) {
console.log('found : ', result[0]);
$scope.personId = result[0].id;
else {
$scope.personId = -1;

Next, we’d these files’ references to MVC view file /View/Shared/_Layout.cshtml as following. And yea, don’t forget to bootstrap Angular with “ngApp” attribute of the body tag … and un-comment the AngualrJS reference script tag!

<script src="~/Scripts/KendoUI/kendo.core.min.js"></script>
<script src="~/Scripts/KendoUI/kendo.ui.core.min.js"></script>
<script src="~/Scripts/KendoUI/angular.min.js"></script>
<!-- angular module and controllers -->
<script src="~/Scripts/app/app.js"></script>
<script src="~/Scripts/app/controllers/home.js"></script>
<script src="~/Scripts/app/services/customerService.js"></script>
<!-- I am sure you would not miss it ! -->
<body data-ng-app="app">
<div class="navbar navbar-inverse navbar-fixed-top">
view raw _Layout.cshtml hosted with ❤ by GitHub

Finally, we need to update our view as following:

ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
<h2>Index </h2>
<div data-ng-controller="home" data-ng-init="activate()">
<div>Two way binding : </div>
Selected Date >> <b>NgFilter: </b> {{ dateObject | asDate | date:'shortDate'}} | <b>Date-String: </b> {{ dateString }} | <b>DateObject: </b> {{ dateObject | date:"EEEE, MMMM d, yyyy" }}
<li>Person ID >> {{personId}} </li>
<div id="container">
<div>Date </div>
<input data-kendo-date-picker data-ng-model="dateString" data-k-ng-model="dateObject" />
<div>Simple Numeric Spinner (0-10) </div>
<input data-kendo-numeric-text-box="" data-k-min="0" data-k-max="10" k-ng-model="personId" data-k-step="2" data-k-options="spinnerOptions" />
<div>Person </div>
<input kendo-auto-complete="" data-ng-model="person" k-data-source="autoCompleteValues" k-data-text-field="'name'" k-data-value-field="'id'" />
ID : {{personId}} & Name : {{person}}
<div>Look up Table : </div>
<table border="1">
<tr data-ng-repeat="p in ppl">
<td>{{}} </td>
<td>{{}} </td>
view raw Index.cshtml hosted with ❤ by GitHub

You see a date picker & also you see a date value above it. But wait, what happens if you change the date ?

As you might expect … the dates above change instantly all to-gather. AngularJS’s 2-way binding babes, … forget the observables !

fruit of our labor :

Running the application ! (fruit of our labor !)

Awe right… back in the business layer. Finally, the customerService.js calls the following Web API endpoint ( or like I lately changed it in my code, you can also use another OData Service or whatever in your service. In my case I am using a query from )

( I also like to keep MVC and Web API controller in separate namespaces … “Separation of concerns” you see! 😉 )

public class CustomerController : _ApiBaseController
// GET: api/Customer
public IEnumerable<CustomerContract> Get()
var customers = repository.EntitySet<NorthwindEntities.DB.Customer>().Take(10).ToArray();
return new List<CustomerContract>().AsEnumerable();

At the time of reading this you mostly would have a source code available ( githhub ) so you might download it from my git repository. So you can always investigate if something is teasing your buds. I’d go ahead and give you some quick explanations.

Repository :
Thanks to _ApiBaseController.

_ApiBaseController :
This class is in turn being derived from ApiController. It sits in ~/LearnKendo/Controllers/API. It also has a public member “IDbContext repository;” (IDbContext is an interface I added at ~/NorthwindEntities/DB/ directory) … if you’re still finding a clue about the existence of class _ApiBaseController ? Short answer : for removing the dependency for unit testing. But you can do the way you like / prefer.

So to test the query above in Customer Web API Controller, you can either run the project and navigate to http://localhost/LearnKendo/api/Customer or if you’re not using the Local IIS, just append /api/Customer.
In the later the case, your URL might look like http://localhost:49267/api/customer

Awesome !

Start building your web app, after all “the web is what you make of it” !

Leave a Comment

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

You are commenting using your 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 )

Connecting to %s