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 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 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
Join the conversation! Your thoughts help the community grow.