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; }
  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; }
  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. },
  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" },
  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!