Post
Ask Question

Remote Binding KendoGrid Using WEB API 2 ODATA v3 And Entity Framework

Introduction

What is OData

  1. It is an open data protocol to exchange the data between client and server.
  2. The odata uses a REST architecture to send particular types of message over HTTP.
  3. OData standardizes the request/response formats in JSON and AtomXml on how the data and its metadata is structured.
  4. OData also specifies a very rich query language to enable consumers query your services for precise information they are looking for with the help of $filter, $orderby, $skip, $top, $expand.

Description

Now let us start with creating the OData End point with WEB API.

Just create a WEB API project in Visual Studio as in the following figures 1 and 2:

 
Figure 1 
 
   
 Figure 2
 
Creating a Model Classes

Right-click on the model folder and create a class. In my case I named it Product.

Write the following code in the Product.cs model class.

  1. public class Product  
  2.    {  
  3.            [Key]  
  4.            [DatabaseGenerated(DatabaseGeneratedOption.Identity)]  
  5.            public int ProductID { get; set; }  
  6.            [Required]  
  7.            public string ProductName { get; set; }  
  8.            [Required]  
  9.            public string UnitPrice { get; set; }  
  10.          
  11.    }  

Here I am using Entity Framework Code first technique so we need to create the context class.

Right-click on the model folder and create one more class. In my case I named it ProductContext.

Write the following code in ProductContext class.

  1. public class ProductContext : DbContext  
  2.     {  
  3.         public ProductContext() : base("name=TestConnection") { }  
  4.         public DbSet<Product> Products { get; set; }  
  5.   
  6.     }  

Scaffolding the WEB API Controller Class

Note: Before doing Scaffolding build your application once.

Right-click on Controller folder, then select Add--> Controller and create a WEB API class as in the following figure 3 and 4.

 
 Figure 3
 
  
 
Figure 4 
 
The preceding procedure will scaffold the RESTfull service in the ProductsController.cs.

You will get some pre-defined HTTP GET, POST, PUT,PATCH and DELETE requests/responses in the products Controller. Modify the code based on your application requirements. For this example I didn't modified the code.
 
Now the REST services are created, it's time to create a Kendo UI Grid to consume the services.

Before implementing the service in the Kendo UI once check the service request/response in Postman / Fiddler. 

HTTP GET: odata/Products (odata Endpoint)
 
 
Figure 5 
 
From the above figure 5 you can observe the service response from server where it consist of metadata and no objects are listed because it is a new database which is created from Entity framework code first technique.
 
Let us insert some values in table using HTTP POST request as in the following figure 6:
 
 
Figure 6  

Create an HTML page in your project. In my case I named it KendoGrid.html.

Design in KendoGrid.html
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title></title>  
  5.     <meta charset="utf-8" />  
  6.     <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.common.min.css" />  
  7.     <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.default.min.css" />  
  8.     <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.dataviz.min.css" />  
  9.     <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.dataviz.default.min.css" />  
  10.     <script src="http://cdn.kendostatic.com/2014.3.1316/js/jquery.min.js"></script>  
  11.     <script src="http://cdn.kendostatic.com/2014.3.1316/js/kendo.all.min.js"></script>  
  12.     <script src="http://cdn.kendostatic.com/2014.3.1029/js/jszip.min.js"></script>  
  13. </head>  
  14. <body>  
  15.     <div id="example" class="container">  
  16.         <div class="row">  
  17.             <div class="col-sm-6">  
  18.             <div id="grid"></div>  
  19.                 </div>  
  20.         </div>  
  21. </div>
  22. </body>
  23. </html>
JavaScript
  1. $(document).ready(function () {  
  2.            $("#grid").kendoGrid({  
  3.                dataSource: {  
  4.                    type: "odata",  
  5.                    transport: {  
  6.                        read: {  
  7.                            url: "odata/Products",  
  8.                            dataType: "json"  
  9.                        },  
  10.                    },  
  11.   
  12.                    schema: {  
  13.                        data: function (data) {  
  14.                            return data["value"];  
  15.                        },  
  16.                        total: function (data) {  
  17.                            return data["odata.count"];  
  18.                        },  
  19.                        model: {  
  20.                            fields: {  
  21.                                ProductName: { type: "string" },  
  22.                                UnitPrice: { type: "string" },  
  23.   
  24.                            }  
  25.                        }  
  26.                    },  
  27.                    pageSize: 20  
  28.                },  
  29.                height: 200,  
  30.                width: 100,  
  31.                sortable: true,  
  32.                pageable: {  
  33.                    refresh: true,  
  34.                    pageSizes: true,  
  35.                    buttonCount: 5  
  36.                },  
  37.                columns: [  
  38.                    { field: 'ProductName', title: 'Product Name',width:200 },  
  39.                        { field: 'UnitPrice', title: 'Unit Price', width: 100 }]  
  40.            });  
  41.        });  
Result in Browser
 
 
Figure 7

Conclusion

From this article we learned about OData and how to remote bind the Kendo grid using WEB API 2 ODATA v3 and Entity Framework

Hope you have enjoyed this article.

Thank you! Happy Coding!


Similar Articles