Introduction

The Kendo UI supports working with its widget using AngularJS.

This article flows as follows.

  1. Creating an ASP.NET WEB API application.
  2. Creating a Controller.
  3. Testing the REST API
  4. Implementing the Kendo Grid using AngularJS with the REST API.

Creating an ASP.NET WEB API application

Create a WEB API application using an installed web template in Visual Studio as in the following figures.

WEB API

Template

  1. Creating model classes: In the Solution Explorer, right-click the model folder, select Add, then Class, and name it Employee. cs
  2. Code in Employee. cs 
    public class Employee
{
    public Employee(int EmployeeID, string FirstName, string LastName)
    {
        this.EmployeeID = EmployeeID;
        this.FirstName = FirstName;
        this.LastName = LastName;
    }
    public int EmployeeID { get; set; }
    public string FirstName { get; set; }
    public string LastName { get; set; }
}

Creating a Controller

Right-click on the Controller folder and add a new WEB API 2- Empty controller as in the following figure 3. In my case, I named it EmployeeDetailsController.cs.

Controller

Code in EmployeeDetailsController.cs

[RoutePrefix("api/EmployeeList")]
public class EmployeeDetailsController : ApiController
{
    [HttpGet]
    [Route("List")]
    public HttpResponseMessage EmployeeList()
    {
        try
        {
            List<Employee> _emp = new List<Employee>();
            _emp.Add(new Employee(1, "Bobb", "Ross"));
            _emp.Add(new Employee(2, "Pradeep", "Raj"));
            _emp.Add(new Employee(3, "Arun", "Kumar"));
            return Request.CreateResponse(HttpStatusCode.OK, _emp, Configuration.Formatters.JsonFormatter);
        }
        catch (Exception ex)
        {
            return Request.CreateResponse(HttpStatusCode.OK, ex.Message, Configuration.Formatters.JsonFormatter);
        }
    }
}

The above employee controller action EmployeeList will return a list of Employees.

Testing the REST API

Test the API using the POSTMAN/Fiddler as in the following figure 4.

Implementing the Kendo Grid using AngularJS and the REST API

  1. Creating an HTML page: Create a new HTML page in the project.
  2. Design 
    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Untitled</title>
    
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.412/styles/kendo.common.min.css">
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.412/styles/kendo.rtl.min.css">
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.412/styles/kendo.default.min.css">
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.412/styles/kendo.mobile.all.min.css">
    
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://kendo.cdn.telerik.com/2016.1.412/js/angular.min.js"></script>
    <script src="http://kendo.cdn.telerik.com/2016.1.412/js/jszip.min.js"></script>
    <script src="http://kendo.cdn.telerik.com/2016.1.412/js/kendo.all.min.js"></script>
</head>
<body>
    <div id="example" ng-app="KendoDemos">
        <div ng-controller="MyCtrl">
            <kendo-grid options="mainGridOptions"></kendo-grid>
        </div>
    </div>
    
    <script>
        angular.module("KendoDemos", ["kendo.directives"])
            .controller("MyCtrl", function($scope) {
                $scope.mainGridOptions = {
                    dataSource: {
                        type: "json",
                        transport: {
                            read: "/api/EmployeeList/List"
                        },
                        pageSize: 5,
                        serverPaging: true,
                        serverSorting: true
                    },
                    sortable: true,
                    pageable: true,
                    columns: [
                        {
                            field: "EmployeeID",
                            title: "EmployeeID",
                            width: "120px"
                        },
                        {
                            field: "FirstName",
                            title: "First Name",
                            width: "120px"
                        },
                        {
                            field: "LastName",
                            title: "Last Name",
                            width: "120px"
                        }
                    ]
                };
            });
    </script>
</body>
</html>
  3. Result in Browser
    Broswer

Conclusion

We have seen how to work with Kendo Grid using AngularJS, which is really useful to build an application with ease.

I hope you have enjoyed this article. Your valuable feedback, questions, or comments about this article are always welcome.

Read more articles on AngularJS.