Telerik blogs

Ready-to-Use Grid UI for AngularJS Applications

Konstantin-Dikov by Konstantin Dikov
May 17, 2016 Web, Angular 0 Comments
AngularJS Grid Kendo UI


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.

Kendo UI AngularJS Grid

Why Is the Kendo UI Grid Easy to Use in AngularJS Apps?

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): 

Example 1
<script src="jquery.js"></script>
<script src="angular.js"></script>
<script src="kendo.all.js"></script>
Example 2
var app = angular.module("your-angular-app", [ "kendo.directives" ]);

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:

<div kendo-grid></div>

or

<kendo-grid></kendo-grid>

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:

<div id="example" ng-app="KendoDemos"> 
    <div ng-controller="MyCtrl">
      <div kendo-grid k-options="mainGridOptions" >           
      </div>
    </div>
</div>

<script>
    angular.module("KendoDemos", [ "kendo.directives" ])
        .controller("MyCtrl", function($scope){
            $scope.mainGridOptions = {
                dataSource: {
                    type: "odata",
                    transport: {
                        read: "//demos.telerik.com/kendo-ui/service/Northwind.svc/Employees"
                    }
                },
                ….
            };     
        })
</script>

You can test and examine the entire example in this dojo.

How Does Kendo UI Grid Save Development Time? 

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:

  • CRUD operations
  • Paging, sorting, filtering, grouping and hierarchy
  • Export
  • Responsiveness
  • Built-in themes and option for creating custom ones

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.

How Can I Call Out the Kendo UI Grid in an AngularJS App?

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:

<div kendo-grid="grid1"></div>

Once you have set a name to the kendo-grid attribute, you can access the object as a scope variable: 

$scope.grid1

Can I Initialize the Kendo UI Grid in Other Widgets?

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.  

Can I See an AngularJS Grid Demo/Sample App? 

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.

Does the Kendo UI Grid Come with Support? 

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.

Does the Kendo UI Grid Come with Built-In Themes?  

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.  

Which Version of Angular Does the Kendo UI Grid Work With? 

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.

How Can I Get the AngularJS Grid?

You can see how all this works as soon as you download the Kendo UI free trial and take it for a spin. The grid is available as part of the Kendo UI suite, which includes 70+ UI components for building HTML5 and JavaScript apps faster.

Related Resources:

Angular, Grid, Kendo UI, UI
Konstantin-Dikov
About the Author

Konstantin Dikov

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.

Related Posts

Web Angular

How to Use Kendo UI for Angular to Display and Manage Data from Your Python App

Web Angular

Angular Basics: How to Use the Event Emitter with Examples

Comments

Comments are disabled in preview mode.