Introduction
This article explains how to implement multi-check filtering in Kendo Grid, using ASP.NET Web API. To explain it, I have created a RESTful GET Service that is used to load the Data Source of Kendo Grid.
Prerequisites
Basic knowledge of ASP.NET WebAPI, jQuery, and Kendo UI Grid.
This article flows as per the following.
- Creating an ASP.NET Web API Application.
- Creating a Controller.
- Testing the REST API.
- Creating an HTML page and implementing multi-check filtering in Kendo Grid.
Creating an ASP.NET Web API application
Create a Web API Application, using an installed Web template in Visual Studio, as shown below. In my case, I named the application “MultiCheckFilteringGrid”.
![ASP.NET]()
Figure 1
![Web API]()
Figure 2
Creating a Model
In Solution Explorer, right-click the Models folder, select Add followed by Class, and name it as “Employee. cs”.
Employee. cs
public class Employee
{
public Employee(int Id, string Name, string Designation, string Company)
{
this.EmployeeID = Id;
this.EmployeeName = Name;
this.Designation = Designation;
this.Company = Company;
}
public int EmployeeID { get; set; }
public string EmployeeName { get; set; }
public string Designation { get; set; }
public string Company { get; set; }
}
Creating a Controller
Right-click on the Controllers folder and add a new Web API 2- Empty Controller, as shown in figure 3. In my case, I named it as EmployeeController.
![EmployeeController]()
Figure 3
EmployeeController.cs
[RoutePrefix("api/Employee")]
public class EmployeeController : ApiController
{
[HttpGet]
[AllowAnonymous]
[Route("EmployeeList")]
public HttpResponseMessage GetEmployee()
{
try
{
List<Employee> EmpLists = new List<Employee>();
EmpLists.Add(new Employee(1, "Govind Raj", "Business Analyst", "Company A"));
EmpLists.Add(new Employee(2, "Krishn Mahato", "Development", "Company B"));
EmpLists.Add(new Employee(3, "Bob Ross", "Testing", "Company A"));
EmpLists.Add(new Employee(4, "Steve Davis", "Development", "Company A"));
EmpLists.Add(new Employee(5, "Dave Tucker", "Infrastructure", "Company B"));
EmpLists.Add(new Employee(6, "James Anderson", "HR", "Company A"));
return Request.CreateResponse(HttpStatusCode.OK, EmpLists, Configuration.Formatters.JsonFormatter);
}
catch (Exception ex)
{
return Request.CreateResponse(HttpStatusCode.OK, ex.Message, Configuration.Formatters.JsonFormatter);
}
}
}
The Employee Controller Action GetEmployee() will return the list of employees.
Testing the REST API
Test API, using the POSTMAN/Fiddler, as shown in Figure 4.
- API End Point /API/Employee/EmployeeList.
- Type GET.
![REST API]()
Figure 4
Yes, now our API is ready. Let's try to create a data source for Kendo Grid by using this service.
Creating an HTML page and implementing multi-select filtering in Kendo Grid
Create a new HTML page in our Application. In my case, I named it as kendoGrid.html.
KendoGrid.html
<!DOCTYPE html>
<html>
<head>
<title>Kendo Grid</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.common.min.css" />
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.rtl.min.css" />
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.silver.min.css" />
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.mobile.all.min.css" />
<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2017.1.118/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div id="grid"></div>
<script>
$(document).ready(function() {
$("#grid").kendoGrid({
dataSource: {
type: "json",
transport: {
read: "/api/Employee/EmployeeList"
},
schema: {
model: {
fields: {
EmployeeID: {
type: "number"
},
EmployeeName: {
type: "string"
},
Designation: {
type: "string"
},
Company: {
type: "string"
}
}
}
},
},
filterable: true,
sortable: true,
pageable: true,
columns: [{
field: "EmployeeID",
filterable: false
},
{
field: "EmployeeName",
title: "EmployeeName",
filterable: {
multi: true
}
},
{
field: "Designation",
title: "Designation"
},
{
field: "Company",
title: "Company",
}
]
});
});
</script>
</div>
</body>
</html>
To implement the multi-check filtering functionality in the Kendo Grid, first, we need to enable the filtering functionality using the filterable property ( filterable:true). To enable the multi-select option in filtering, we need to set the multi-option as true (filterable:{multi: true}).
Result in Browser
![Browser]()
Figure 5
Including the search box with multi-check in filtering.
kendoGrid.html
<!DOCTYPE html>
<html>
<head>
<title>Kendo Grid</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.common.min.css" />
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.rtl.min.css" />
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.silver.min.css" />
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.mobile.all.min.css" />
<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2017.1.118/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div id="grid"></div>
<script>
$(document).ready(function() {
$("#grid").kendoGrid({
dataSource: {
type: "json",
transport: {
read: "/api/Employee/EmployeeList"
},
schema: {
model: {
fields: {
EmployeeID: { type: "number" },
EmployeeName: { type: "string" },
Designation: { type: "string" },
Company: { type: "string" }
}
}
}
},
filterable: true,
sortable: true,
pageable: true,
columns: [{
field: "EmployeeID",
filterable: false
}, {
field: "EmployeeName",
title: "EmployeeName",
filterable: { multi: true, search: true }
}, {
field: "Designation",
title: "Designation"
}, {
field: "Company",
title: "Company",
}]
});
});
</script>
</div>
</body>
</html>
Set the search as true in the filterable property of Kendo Grid to enable the search option in the filter.
Result in Browser
![Result]()
Figure 6
I hope you have enjoyed this article. Your valuable feedback, questions, or comments about this article are always welcome.