Post
Ask Question

CRUD Operation in Kendo Grid Using Web API

Main Objective of this Article

This article shows how to do create, read, update and delete operations in Kendo Grid using the ASP.NET WEB API.

Requirements
  •   VS2010 and above
  •   Fiddler/Postman for testing
  •   SQL Server 2008 and above 
Before going through this article ensure that you have a basic understanding of the MVC Architecture, ASP.NET Web API and jQuery.

Open the ASP.NET MVC project as shown in Figure 1.

 

Figure 1

Create one empty application as shown in Figure 2.
 
 
 
Figure 2 
 
Your project structure will be like this figure (Figure 3).

  
 
Figure 3

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


Fill in the property in the Category model class.

In my case it is:

  1. public class Category  
  2. {  
  3.     [Key]  
  4.     public int CategoryID {  
  5.         get;  
  6.         set;  
  7.     }  
  8.     [Required]  
  9.     public string CategoryName {  
  10.         get;  
  11.         set;  
  12.     }  
  13. } 
To connect with the database I have used the code first technique in Entity Framework.

Create one more model class called CategoryContext.cs.

Write the following code in that class.
  1. public class CategoryContext: DbContext  
  2. {  
  3.     public CategoryContext(): base("name=TestConnection") {}  
  4.     public DbSet < Category > Categories {  
  5.         get;  
  6.         set;  
  7.     }  
  8. } 
Establish the connection string in the web config before building. In my case my code is:
  1.  <connectionStrings>  
  2.       <add name="TestConnection" connectionString="Data Source=your SQL servername ;Initial Catalog=Test;Integrated Security=True" providerName="System.Data.SqlClient" />  
  3. </connectionStrings> 
It's time to create a Controller named CategoryController.cs as shown in Figure 3.



Figure 3
 
Note: Before scaffolding, build your application once to get a Model classes.

Make sure that if your using MVC 4 that the Entity Framework is version 5 or later.

Open the Category controller class. You will see some predefined code with GET, PUT, POST and DELETE HttpResponses.

I have modified the predefined code based on my application needs, you can refer to it by downloading the source code.

Now you can check these  HTTP response/request using the Postman/Fiddler.

First insert some records using HTTP POST request/response as shown in Figure 4.



Figure 4
 
HTTP GET:

As shown in Figure 5.

   

Figure 5 

HTTP PUT:

As shown in Figure 6.

    
Figure 6 

HTTP DELETE:

As shown in Figure 7.

  
Figure 7

Now to consume the Web API using Kendo UI.

Create one HTML page in the project.

Here is my deign:

  1. <head>  
  2.     <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.common.min.css" />  
  3.     <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.default.min.css" />  
  4.     <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.dataviz.min.css" />  
  5.     <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.dataviz.default.min.css" />  
  6.     <script src="http://cdn.kendostatic.com/2014.3.1316/js/jquery.min.js"></script>  
  7.     <script src="http://cdn.kendostatic.com/2014.3.1316/js/kendo.all.min.js"></script>  
  8.     <title></title>  
  9. </head>  
  10. <body>  
  11.     <script>    
  12.       $(document).ready(function () {    
  13.       dataSource = new kendo.data.DataSource({    
  14.       transport: {    
  15.          read:    
  16.          {    
  17.             url: "http://localhost:54129/api/Category",    
  18.             dataType: "json",    
  19.          },    
  20.          destroy:    
  21.          {    
  22.             url: "http://localhost:54129/api/Category",    
  23.             type: "DELETE"    
  24.          },    
  25.          create:    
  26.          {    
  27.             url: "http://localhost:54129/api/Category",    
  28.             type:"POST"    
  29.          },    
  30.          update:    
  31.          {    
  32.             url: "http://localhost:54129/api/Category",    
  33.             type: "PUT",    
  34.             parameterMap: function (options, operation) {    
  35.                if (operation !== "read" && options.models) {    
  36.                   return {    
  37.                      models: kendo.stringify(options.models)    
  38.                   };    
  39.                }    
  40.             }    
  41.          },    
  42.       },    
  43.       schema:    
  44.       {    
  45.          model:    
  46.          {    
  47.             id: "CategoryID",    
  48.             fields: {    
  49.                CategoryID: { editable: false, nullable: true, type: "number" },    
  50.                CategoryName: { editable: true, nullable: true, type: "string" },    
  51.             }    
  52.          }    
  53.       }   
  54.    });    
  55.    $("#grid1").kendoGrid({    
  56.       dataSource:dataSource,    
  57.       editable: "inline",    
  58.       toolbar: ["create"],    
  59.       columns: [    
  60.       {    
  61.          field: "CategoryID",    
  62.          title: "number",    
  63.       },    
  64.       {    
  65.          field: "CategoryName",    
  66.          title: "Name"    
  67.       },    
  68.       {    
  69.          command: ["edit",    
  70.          {    
  71.             name: "destroy",    
  72.             text: "remove",    
  73.          }    
  74.          ],    
  75.       }    
  76.       ],    
  77.       height: "500px",    
  78.       pageable: {    
  79.          refresh: true,    
  80.          pageSizes: true,    
  81.          buttonCount: 5    
  82.       },    
  83.    }).data("kendoGrid");    
  84. });    
  85.     
  86. </script>  
  87.     <div class="main-content">  
  88.         <div id="grid1"></div>  
  89.     </div>  
  90. </body>undefined</html>    
In the browser, the design will be as shown in Figure 8.


Figure 8

Add a new record as shown in Figures 9 and 10.

 

Figure 9


Figure 10

EDIT record as shown in figure 11 and 12.

Figure 11



Figure 12

Delete a record as shown in Figures 13 and 14.



Figure 13 
 


Figure 14
 
The reflection in the SQL table.
 
  

That's it. Enjoy coding.


Similar Articles