Multi-Check Filtering In Kendo Grid Using ASP.NET Web API

Gowtham K
7y
9.6k
0
1

Article

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”.

Figure 1

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 the figure 3. In my case, I named it as 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.

Figure 4

Yes, now our API is ready. Let's try to create a datasource for Kendo Grid by using this service.

Creating a 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 functioanlity 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

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 seacrh as true in filterable property of Kendo Grid to enable the search option in filter.