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.
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.
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.
<select kendo-drop-down-list> <option value="1">Thing 1</option> <option value="2">Thing 2</option> <option value="3">Thing 3</option> </select>
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.
// 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>
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.
// 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>
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.
// 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>
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.
<select kendo-drop-down-list="thingsOptions" ng-model="selectedThing"></select> <h5>You Selected: {{ selectedThing }}</h5>
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.
// 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">
Pretty nifty eh?
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:
This grid is pageable, sortable, groupable and filterable. Select A row to see the Angular binding.
Quantity in stock: {{selectedItem.UnitsInStock}}
Price per unit: {{selectedItem.UnitPrice | currency}}
Value of stock: {{selectedItem.UnitsInStock * selectedItem.UnitPrice | currency}}
Kendo UI Comes with a powerful data vizualizatin suite. In this demo, move the slider to see the binding to the radial guages.
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!