CRUD Operation in Kendo Grid Using Web API

Gowtham K
9y
46.6k
0
3
100
Article

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>