Azure Cosmos DB
This article provides a step-by-step tutorial on how to add Kendo UI to an existing web application that is built with Azure Cosmos DB through SQL .NET API and Azure Portal, and how to configure a Kendo UI Grid to display Cosmos DB data and perform CRUD operations.
The complete implementation of the sample project is available in the Kendo UI Cloud Integration repository on GitHub.
Prerequisites
Basic knowledge on the organization of Azure Portal.
Creating Azure Cosmos DB Applications
-
Follow the steps from the Build a .NET web app with Azure Cosmos DB using the SQL API and the Azure Portal quickstart.
This quickstart demonstrates how create an Azure Cosmos DB SQL API account, document database, and collection by using the Azure Portal. You will also build and deploy a sample To-Do List web application.
After successfully completing the quickstart, add Kendo UI to the To-Do List sample application by implementing the endpoints for the CRUD operations and configuring the Grid to use the endpoints.
Adding CSS and JavaScript References
To use Kendo UI in the sample project, add the Kendo UI CSS and JavaScript references in the head tag of the _Layout.cshtml file.
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - Todo App with Azure DocumentDB</title>
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/themes/7.2.1/default/default-main.css" />
@Scripts.Render("~/bundles/jquery")
<script src="https://kendo.cdn.telerik.com/2024.1.319/js/kendo.all.min.js"></script>
</head>
Implementing the Create, Read, Update, and Destroy Actions
-
Add the following
usingstatements to theItemController.using System.Collections.Generic; using Newtonsoft.Json; using System.Linq; Implement the four actions in the
ItemControllerwhich will be called by the Grid on performing CRUD operations. Name the actions, for example,KendoRead,KendoCreate,KendoUpdate, andKendoDestroy.
The following example demonstrates the Read action.
[ActionName("KendoRead")]
public async Task<ActionResult> KendoRead()
{
var items = await DocumentDBRepository<Item>.GetItemsAsync(d => !d.Completed);
return this.Json(items, JsonRequestBehavior.AllowGet);
}
The following example demonstrates the Create action.
[ActionName("KendoCreate")]
public async Task<ActionResult> KendoCreate(string models)
{
var items = JsonConvert.DeserializeObject<IEnumerable<Item>>(models);
if (items != null && ModelState.IsValid)
{
Item item = items.FirstOrDefault();
await DocumentDBRepository<Item>.CreateItemAsync(item);
}
return Json(items, JsonRequestBehavior.AllowGet);
}
The following example demonstrates the Update action.
[ActionName("KendoUpdate")]
public async Task<ActionResult> KendoUpdate(string models)
{
var items = JsonConvert.DeserializeObject<IEnumerable<Item>>(models);
if (items != null && ModelState.IsValid)
{
Item item = items.FirstOrDefault();
await DocumentDBRepository<Item>.UpdateItemAsync(item.Id, item);
}
return Json(items, JsonRequestBehavior.AllowGet);
}
The following example demonstrates the Destroy action.
[ActionName("KendoDestroy")]
public async Task<ActionResult> KendoDestroy(string models)
{
var items = JsonConvert.DeserializeObject<IEnumerable<Item>>(models);
if (items != null && ModelState.IsValid)
{
Item item = items.FirstOrDefault();
await DocumentDBRepository<Item>.DeleteItemAsync(item.Id, item.Category);
}
return Json(items, JsonRequestBehavior.AllowGet);
}
Consuming the Implemented CRUD Endpoints on the Client
To consume the data from the endpoints and display it in the Grid, configure the widget and its data source.
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
dataSource: {
transport: {
read: {
url: "/Item/KendoRead/",
dataType: "json"
},
update: {
url: "/Item/KendoUpdate",
dataType: "json"
},
destroy: {
url: "/Item/KendoDestroy",
dataType: "json"
},
create: {
url: "/Item/KendoCreate",
dataType: "json"
},
parameterMap: function (options, operation) {
if (operation !== "read" && options.models) {
return { models: kendo.stringify(options.models) };
}
}
},
batch: true,
pageSize: 10,
schema: {
model: {
id: "Id",
fields: {
Id: { type: "string", editable: false, nullable: true },
Name: { validation: { required: true } },
Description: { type: "string", required: true },
Category: { type: "string", required: true },
Completed: { type: "boolean" }
}
}
}
},
pageable: true,
height: 500,
toolbar: ["create"],
columns: [
{ field: "Name", title: "Task Name", width: "220px" },
{ field: "Description", title: "Description", width: "120px" },
{ field: "Category", title: "Category", width: "120px" },
{ field: "Completed", title: "Completed", width: "120px" },
{ command: ["edit", "destroy"], title: " ", width: "250px" }],
editable: {
mode: "popup"
}
});
</script>