CRUD Operation in Kendo Grid Using Web API

Gowtham K

ASP.NET Web APIKendoUIKendoUI CRUD OperationWEB API CRUD Operation

17 Comments

Join the conversation! Your thoughts help the community grow.

Divakar Chinta7y ago
Thank You So much, you save my day
Rupali Shinde10y ago
nice , thanks for sharing
Chandradev Prasad10y ago
Nice post.
Asfend Yar10y ago
and accept my request
Asfend Yar10y ago
keep it up
Asfend Yar10y ago
good
sreenivasa k10y ago
nice article
Arul R11y ago
Nice share!!!
Mukesh Kumar11y ago
Good Job Sir
Nitin11y ago
good one
- Gowtham K11y ago
  Thanks a lot
Sibeesh Venu11y ago
Good one.
- Gowtham K11y ago
  Thank you
Santhakumar Munuswamy11y ago
Thanks for nice one
- Gowtham K11y ago
  Thank you
Friyank Parikh11y ago
Hello Gowtham, the post is awesome . and it will give new comer a startup for kendo ui, no doubt. but , there are some issue which you must edit and post this blog again. 1 . folder structure is not like folder structure you have shown us in figure 2 , when you select mvc as a empty project. 2. In Add controller section , you asked to add a controller and for kendo and fiddler you are using api , so that's a big difference . controller is way different from API 3. In kendo you have allow to add ID also, but in database its auto increment so that is also one issue. it keeps on adding data even if you pass the same id.4. Delete is not working in database.
- Gowtham K11y ago
  Thank you, Sure I will update it but for me the delete is working check my source code

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:

public class Category
{
[Key]
public int CategoryID {
get;
set;
}
[Required]
public string CategoryName {
get;
set;
}
}

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.

public class CategoryContext: DbContext
{
public CategoryContext(): base("name=TestConnection") {}
public DbSet < Category > Categories {
get;
set;
}
}

Establish the connection string in the web config before building. In my case my code is:

<connectionStrings>
<add name="TestConnection" connectionString="Data Source=your SQL servername ;Initial Catalog=Test;Integrated Security=True" providerName="System.Data.SqlClient" />
</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:

<head>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.common.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.default.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.dataviz.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.dataviz.default.min.css" />
<script src="http://cdn.kendostatic.com/2014.3.1316/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1316/js/kendo.all.min.js"></script>
<title></title>
</head>
<body>
<script>
$(document).ready(function () {
dataSource = new kendo.data.DataSource({
transport: {
read:
{
url: "http://localhost:54129/api/Category",
dataType: "json",
},
destroy:
{
url: "http://localhost:54129/api/Category",
type: "DELETE"
},
create:
{
url: "http://localhost:54129/api/Category",
type:"POST"
},
update:
{
url: "http://localhost:54129/api/Category",
type: "PUT",
parameterMap: function (options, operation) {
if (operation !== "read" && options.models) {
return {
models: kendo.stringify(options.models)
};
}
}
},
},
schema:
{
model:
{
id: "CategoryID",
fields: {
CategoryID: { editable: false, nullable: true, type: "number" },
CategoryName: { editable: true, nullable: true, type: "string" },
}
}
}
});
$("#grid1").kendoGrid({
dataSource:dataSource,
editable: "inline",
toolbar: ["create"],
columns: [
{
field: "CategoryID",
title: "number",
},
{
field: "CategoryName",
title: "Name"
},
{
command: ["edit",
{
name: "destroy",
text: "remove",
}
],
}
],
height: "500px",
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
}).data("kendoGrid");
});
</script>
<div class="main-content">
<div id="grid1"></div>
</div>
</body>undefined</html>