In this helpful guide, learn how to use the Kendo UI grid widget in AngularJS projects. It includes code snippets, a sample app and links to other relevant resources.
With the continuously growing popularity of the AngularJS framework, the need for ready-to-use components grows as well. Our Kendo UI framework provides just that by enabling developers to easily create complex AngularJS UI.
All you have to do to add Kendo UI Grid (or any other widget from the Kendo UI suite) to your AngularJS application is to include the proper Kendo UI libraries (Example 1) and declare dependency on “kendo.directives” (Example 2):
Once you have the right setup, adding the grid is as simple as including the kendo-grid directive to the element where the widget will be rendered:
There are several approaches that could be used for configuring the widget, but we will take a look at the one where all options are defined in the controller. For this scenario we are using the k-options attribute to specify the object with the defined options:
You can test and examine the entire example in this dojo.
Creating a grid structure in AngularJS could be easily achieved with ng-repeat, for example, but implementing complex functionality for it would be a huge and time consuming task. Here is where the 100+ built-in features of Kendo UI Grid that can be enabled and defined “the Angular way” come in handy. Here are just a few of them:
Other time-savers include the flexibility of data binding options and the variety of user-customizable templates that the grid widget supports. Whether you decide to go with local or remote data (Web Service, WebSocket, SignalR, Telerik Backend Services, etc.), to create a DataSource object on your own, or allow the widget to create it internally, data binding and enabling CRUD operations is as easy as it gets in the context of displaying and editing data.
As for the templates, they allow you to customize almost every element of the grid: headers, footers, cells, rows, editors, filters, detail rows and more.
Very often you will need a reference to the widget in order to call methods or retrieve some information from your controller. To get that reference in the controller you just need to assign a name to the kendo-grid attribute:
Once you have set a name to the kendo-grid attribute, you can access the object as a scope variable:
This is a very common requirement and there is a perfect attribute that allows nesting Kendo UI widgets in AngularJS. The main problem with nested widgets is the sequence of their initialization, and this is what the k-ng-delay directive resolves. With the k-ng-delay directive you can ensure that the parent widget is initialized before you initialize the nested one. This directive is also useful for creating dynamic column structure, based on definition coming from the server.
Yes, you can test the Kendo UI Grid widget in an AngularJS application in the following online demo. Since the kendo-grid directive initializes Kendo UI Grid, you can take a look at the other online demos for the Grid and familiarize yourself with the available features that the widget exposes.
For a more comprehensive AngularJS Kendo UI demo, take a look at our sample app, showcasing some of the most popular Kendo UI widgets, such as Scheduler, Grid, TabStrip, Charts and Map in a real world scenario.
The Kendo UI Grid and its AngularJS integration is officially supported as part of the Kendo UI product. More information on the product and the available plans could be found here.
The Kendo UI Grid comes with a set of 16 built-in themes, which can be applied by adding the corresponding CSS file for that particular theme. In addition to the built-in themes, we have created the online Kendo UI Theme Builder, which allows you to further customize the appearance of the widgets by using a built-in theme as a starting point.
Currently, Kendo UI supports AngularJS 1.x. For Angular 2, our goal is to rebuild the Kendo UI widgets and make them true UI components by the Angular 2 definition, with no jQuery dependency. Angular 2 support for Kendo UI Grid is expected at the end of 2016. See the full roadmap.
Konstantin Dikov is a Tech Support Engineer on the Kendo UI Team, and has been working with Kendo UI and Telerik UI products since 2013. He is passionate about music, literature, drawing and breakthrough technologies.
Subscribe to be the first to get our expert-written articles and tutorials for developers!