What is Kendo UI

Kendo UI is a framework based on HTML5 and jQuery. It helps build an interactive web application by providing several features for a fast, rich, and responsive web applications in a single package. Kendo UI can be used seamlessly with AngularJS and Bootstrap.

Why use it ?

Our case for using Kendo UI was slightly different. We wanted to have a consistent look and feel across our web application. The application being developed has several tables and grids. In order to keep the look and feel the same we decided to try Kendo UI throughout our application.

Along with keeping a constant visual feel, Kendo UI also provides several other benefits. The Kendo UI package is an all-in-one solution. It comes all the features, instead of downloading several different libraries. It also tuned for performance, the Kendo UI has been developed from ground to up with performance in mind and no shortcuts have been taken along the way.

Using Angular-Kendo bindings

The Angular bindings are now integrated into Kendo UI. In order for the Angular bindings to be activated, you must load Angular.js before Kendo. Load the scripts in the following order:

<script src="jquery.js"></script>
<script src="angular.js"></script>
<script src="kendo.all.js"></script>

Also make sure you load the style sheets for Kendo UI. Here are the stylesheets for it:

<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.dataviz.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.mobile.all.min.css">

Now when creating your AngularJS application you have to declare dependency on “kendo.directives”:

var app = angular.module("your-angular-app", [ "kendo.directives" ]);

Creating a simple grid using Kendu UI

Add the following piece of code to your HTML file :

 <div kendo-grid k-options="gridOptions" k-rebind="gridOptions.selectable"
 k-on-change="handleChange(data, dataItem, columns)"></div>

And this would be the your controller code:

 angular.module("app", ["kendo.directives"]).controller("MyCtrl", function($scope) {
 var data = new kendo.data.DataSource({
 data: [
 { text: "Foo", id: 1 },
 { text: "Bar", id: 2 },
 { text: "Baz", id: 3 }
 ]
 });
 $scope.handleChange = function(data, dataItem, columns) {
 $scope.data = data;
 $scope.columns = columns;
 $scope.dataItem = dataItem;
 };
 $scope.gridOptions = {
 dataSource: data,
 selectable: "row",
 columns: [
 { field: "text", title: "Text" },
 { field: "id", title: "Id" }
 ]
 };
 });

Here we can see that a data source is defined for which the data gird will display. We also tell the code what are the names of the columns. We can also select how the data can be selected, here we tell the code that we need to select the data in rows. This can be changed as needed. This is an elementary example. There are a lot of features that can be implemented using Kendo UI. I have yet to explore more.