Kendo UI is a comprehensive HTML5/JavaScript framework for modern web and mobile app development. It consists of 17 widgets for web, a core framework, a mobile suite, and a complete Data Vizualization solution.

The Angular Kendo project aims to provide deep integration between Kendo UI Web/DataViz and AngularJS.

Installation

To use Angular-Kendo, you need to include the angular-kendo.js file in your page BELOW Angular and Kendo UI. Don't forget that Kendo UI depends on jQuery, so you are going to need that too:

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

Pass the kendo.directives module into your app as a dependency:

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

And you're done! Now you can use the Angular directives for Kendo UI to create and use widgets.

Basic Use

Any widget can be created using a directive (attribute or class). There is one directive per Kendo UI widget and they are named using a dash-separated version of the Kendo UI widget name. For example, the DropDownList Kendo UI widget becomes a kendo-drop-down-list attribute that you can apply on an input element. The attribute doesn't have to have a value, it just has to be present.

Dead Simple Widget Creation

Code

<select kendo-drop-down-list>
  <option value="1">Thing 1</option>
  <option value="2">Thing 2</option>
  <option value="3">Thing 3</option>
</select>
    

Demo

Configuring Widget Options (k- Attributes)

You can specify any widget configuration attributes with k-attributes. Your data source should exist in the controller as that is the only place the directive will look for the k-source attribute. Notice that all strings values must be quoted with single-quotes as per AngularJS standards.

Code

// controller
function HomeCtrl($scope) {
  $scope.things = {
    data: [{ name: "Thing 1", id: 1 },
           { name: "Thing 2", id: 2 },
           { name: "Thing 3", id: 3 }]
  };
}

// markup
<select kendo-drop-down-list
        k-option-label="'Select A Thing'"
        k-data-text-field="'name'"
        k-data-value-field="'id'"
        k-data-source="things"></select>
    

Demo

Configuring Widget Options From The Controller

You may not want to have your configuration in the widget itself. In that case, you can pass the object that contains your widgets configuration into the k-options attribute.

Code

// controller
function HomeCtrl($scope) {
  $scope.thingsOptions = {
    dataSource: {
      data: [{ name: "Thing 1", id: 1 },
             { name: "Thing 2", id: 2 },
             { name: "Thing 3", id: 3 }]
    },
    dataTextField: "name",
    dataValueField: "id",
    optionLabel: "Select A Thing"
  };
}

// markup
<select kendo-drop-down-list k-options="thingsOptions"></select>
    

Demo

Binding To Events

Events can be specified either in markup, or in the options object passed to k-options. Any events passed to k-options are specified accoding to the Kendo UI API Docs.

Events specifed in Markup need a k-on prefix and must pass a kendEvent argument.

Code

// controller
function HomeCtrl($scope) {
  $scope.thingsOptions = {
    dataSource: {
      data: [{ name: "Thing 1", id: 1 },
             { name: "Thing 2", id: 2 },
             { name: "Thing 3", id: 3 }]
    },
    dataTextField: "name",
    dataValueField: "id",
    optionLabel: "Select A Thing"
  };

  $scope.thingsChange = function(e) {
    console.log(e.sender.text());
  };
}

// markup
<select kendo-drop-down-list k-options="thingsOptions" k-on-change="thingsChange(kendoEvent)"></select>
    

Demo

Integration With AngularJS Models

Kendo UI Widgets raise their changed events so that AngularJS is notified to update the model. Simply specify which model property to update by adding the ng-model attribute.

Code

<select kendo-drop-down-list="thingsOptions"
        ng-model="selectedThing"></select>
<h5>You Selected: {{ selectedThing }}</h5>
    

Demo

You Selected: {{ selectedThing }}

Assigning Widget References

Sometimes, you need to get a reference to your widget in the controller. Pass in the desired controller property into the directive. You can then call methods on the widget from the controller.

Code

// controller
$scope.window = {
  open: function() {
    $scope.modal.center().open();
  }
};

// markup
<button class="k-button" ng-click="window.open()">Open Modal</button>
<div kendo-window="modal" k-title="'Sample Window'" k-visible="false" k-modal="true">
    

Demo

Hello! I'm a modal window.

Pretty nifty eh?

DropDown Lists are great, but what about REAL widgets?

Kendo UI includes Grids, TreeViews, MultiSelects, ColorPickers - 17 widgets in all and that's not including the complete DataViz suite which includes bar, pie, line, donut, guage charts and much more.

Just for fun, here are a few of those widgets in action:

Grid

This grid is pageable, sortable, groupable and filterable. Select A row to see the Angular binding.

{{selectedItem.ProductName}} (Product ID: {{selectedItem.ProductID}})

Quantity in stock: {{selectedItem.UnitsInStock}}

Price per unit: {{selectedItem.UnitPrice | currency}}

Value of stock: {{selectedItem.UnitsInStock * selectedItem.UnitPrice | currency}}

DataViz

Kendo UI Comes with a powerful data vizualizatin suite. In this demo, move the slider to see the binding to the radial guages.

Complete Kendo UI Demos

For A complete list of all widgets and demos, visit the Kendo UI Demos site.

Have suggestions for this project? Something that you don't see that you need? Please enter an issue, or better yet - fork us and submit a pull request!