Remote DataBinding In Kendo SpreadSheet

Introduction

Kendo Spreadsheet control is used to display the data in the spreadsheet view. In this article, we are going to see how to do remote binding in Kendo SpreadSheets.

WEB API Services

I'm going to use the following WEB API Services which are developed using ASP.NET CORE to construct the data source for Kendo SpreadSheet control. If you are new to ASP.NET CORE WEB API please go through my previous article which will give you a basic idea about how to create an API service using ASP.NET CORE WEB API project.

Create a model class,

Product.cs

public class Product
{
public int ProductID { get; set; }
public string ProductName { get; set; }
public double Price { get; set; }
public double Tax { get; set; }
public Product(int ProductID,string ProductName, double Price, double Tax )
{
this.ProductID = ProductID;
this.ProductName = ProductName;
this.Price = Price;
this.Tax = Tax;
}
}

Create a Controller.

ProductsController.cs

namespace MyCoreAPI.Controllers
{
[Produces("application/json")]
[Route("api/Products")]
public class ProductsController : Controller
{
[HttpGet]
[Route("ProductDetails")]
public List<Product> GetProduct()
{
try
{
List<Product> products = new List<Product>();
products.Add(new Product(1, "Tea pack", 100, 10));
products.Add(new Product(2, "Coffee pack", 120, 12));
return products;
}
catch (Exception ex)
{
List<Product> products = null;
return products;
}
}
}
}

GetProduct action will return a list of products.

Testing the API in Postman

/api/Products/ProductDetails

Yes, we got the product list from the above API in JSON format. Now, our API is ready, and we will construct the kendoSpreadSheet using this API.

KendoSpreadSheet.html

<!DOCTYPE html>
<html>
<head>
<style>
html {
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
}
</style>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.material.mobile.min.css" />
<script src="https://kendo.cdn.telerik.com/2018.3.1017/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.3.1017/js/jszip.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.3.1017/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div class="box wide">
<div class="box-col">
<h4>Save data changes</h4>
<ul class="options">
<li>
<button class="k-button" id="save">Save changes</button>
<button class="k-button" id="cancel">Cancel changes</button>
</li>
</ul>
</div>
</div>
<div id="spreadsheet" style="width: 100%"></div>
<script>
$(function () {
var dataSource = new kendo.data.DataSource({
transport: {
read: onRead,
},
schema: {
model: {
id: "ProductID",
fields: {
productID: { type: "number" },
productName: { type: "string" },
price: { type: "number" },
tax: { type: "number" }
}
}
}
});
$("#spreadsheet").kendoSpreadsheet({
columns: 20,
rows: 100,
toolbar: false,
sheetsbar: false,
sheets: [{
name: "Products",
dataSource: dataSource,
rows: [{
height: 40,
cells: [
{
bold: "true",
background: "#9c27b0",
textAlign: "center",
color: "white",
title: "ID"
}, {
bold: "true",
background: "#9c27b0",
textAlign: "center",
color: "white",
title:"Product Name"
}, {
bold: "true",
background: "#9c27b0",
textAlign: "center",
color: "white",
title:"Price"
}, {
bold: "true",
background: "#9c27b0",
textAlign: "center",
color: "white"
}, ]
}],
columns: [
{ width: 100 },
{ width: 415 },
{ width: 145 },
{ width: 145 },
{ width: 145 }
]
}]
});
function onRead(options) {
$.ajax({
url: "http://localhost:11207/api/Products/ProductDetails",
dataType: "json",
success: function (result) {
options.success(result);
},
error: function (result) {
options.error(result);
}
});
}
</script>
</div>
</body>
</html>

From the above code, you can notice the kendoSpreadSheet object is used to initialize the spreadsheet widget. The Sheets object is used to set the data source and other sheet information properties like rows, column name and many more.

The onRead method is used to make the AJAX call to get the product details.

Result in the browser

Filtering and sorting in Kendo Spreadsheet

Sorting and filtering of Kendo spreadsheets can be enabled using the filter object, as given below.

filter: {
ref: "A1:D3",
columns: []
},

In ref property, we need to set the range of the cell.

Here is the complete code.

KendoSpreadSheet.html

<!DOCTYPE html>
<html>
<head>
<style>
html {
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
}
</style>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.material.mobile.min.css" />
<script src="https://kendo.cdn.telerik.com/2018.3.1017/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.3.1017/js/jszip.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.3.1017/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div id="spreadsheet" style="width: 100%"></div>
<script>
$(function () {
var dataSource = new kendo.data.DataSource({
transport: {
read: onRead,
},
schema: {
model: {
id: "ProductID",
fields: {
productID: { type: "number" },
productName: { type: "string" },
price: { type: "number" },
tax: { type: "number" }
}
}
}
});
$("#spreadsheet").kendoSpreadsheet({
columns: 20,
rows: 100,
toolbar: false,
sheetsbar: false,
sheets: [{
name: "Products",
dataSource: dataSource,
filter: {
ref: "A1:D3",
columns: []
},
rows: [{
height: 40,
cells: [
{
bold: "true",
background: "#9c27b0",
textAlign: "center",
color: "white",
title: "ID"
}, {
bold: "true",
background: "#9c27b0",
textAlign: "center",
color: "white",
title:"Product Name"
}, {
bold: "true",
background: "#9c27b0",
textAlign: "center",
color: "white",
title:"Price"
}, {
bold: "true",
background: "#9c27b0",
textAlign: "center",
color: "white"
}, ]
}],
columns: [
{ width: 100 },
{ width: 415 },
{ width: 145 },
{ width: 145 },
{ width: 145 }
]
}]
});
function onRead(options) {
$.ajax({
url: "http://localhost:11207/api/Products/ProductDetails",
dataType: "json",
success: function (result) {
options.success(result);
},
error: function (result) {
options.error(result);
}
});
}
});
</script>
</div>
</body>
</html>

Kendo spreadhsheet with filter

Reference

https://demos.telerik.com/kendo-ui/spreadsheet/index

Conclusion

We saw how to implement a remote data binding in the kendo spreadsheet, which is basic functionality. Also, we saw the process of enabling the client-side sorting and filtering in the spreadsheet. We will see more advanced functionality in Kendo spreadsheets in my future articles.

I hope you have enjoyed this article. Your valuable feedback, questions, or comments about this article are always welcomed.