Date Range Filtering in Kendo Grid Using WEB API and Entity Framework

Description

The date range filtering in the Kendo grid can be done in one of the following two ways.

1. We can create a separate function to perform the Filtering.
2. We can use the filtering property of the Kendo Grid.

Step 1

Create a Web API project as in the following:

• Open Visual Studio 2012 and create a new project.
• Select "File" -> "New" -> "Project...".
• Select Web in the installed templates and click ASP.NET Web Application.
• Provide the name for the project and click OK as in Figures 1 and 2.

I am using the Entity Framework with Database First approach, so the Entity Framework builds default model classes and context classes.

My database schema is as in Figure 3.

Figure 3: Database Schema

My table structure is as in Figure 4.

It's time to do the scaffolding.

.

Figure 5: Controller

You will get some pre-defined HTTP GET, POST, PUT and DELETE requests/responses in the Order Histories Controller. Modify the code based on your application requirements. For this example I didn't modify the code.

Now the REST services have been created, it's time to consume the services.

Before implementing the service in the design, just cross-check it using Fiddler or Postman as shown in Figure 7.

Step 3

Create one HTML page in the project, in my case I named it DateFilter.html.

Here is my code in DateFilter.html.

1. <!DOCTYPE html>
2. <html xmlns="http://www.w3.org/1999/xhtml">
3. <head>
4. <title></title>
5. <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.2.805/styles/kendo.common.min.css">
6. <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.2.805/styles/kendo.rtl.min.css">
7. <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.2.805/styles/kendo.default.min.css">
8. <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.2.805/styles/kendo.mobile.all.min.css">
9. <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
10. <script src="http://kendo.cdn.telerik.com/2015.2.805/js/angular.min.js"></script>
11. <script src="http://kendo.cdn.telerik.com/2015.2.805/js/jszip.min.js"></script>
12. <script src="http://kendo.cdn.telerik.com/2015.2.805/js/kendo.all.min.js"></script></head>
13. <body>
14. <div>From: <input id="from" /> To: <input id="to" />
15. <br />
16. <br />
17. <button id="filter" class="k-button">Filter</button></div>
18. <br />
19. <br />
20. <div id="grid"></div>
21. <script>
22. var grid = $("#grid").kendoGrid({
23. dataSource:{
24. type: "json",
25. transport: {
26. read: "api/OrderHistories"
27. },
28. pageSize: 10,
29. schema: {
30. model: {
31. fields: {
32. OrderId: { type: 'number' },
33. OrderItem: { type: 'string' },
34. OrderDate: { type: 'date' }
35. }
36. }
37. }
38. },
39. pageable: true,
40. columns:
41. [
42. { field: "OrderID", width: 100, title: "Order ID", filterable: false },
43. { field: "OrderItem", width: 100, title: "Order Item", filterable: false },
44. { field: "OrderDate", width: 100, format: "{0:d}", title: "Order Date" }
45. ]
46. }).data("kendoGrid");
48. $("#from, #to").kendoDatePicker({
49. });
51. $("#filter").on("click", function () {
52. var from = $("#from").data("kendoDatePicker").value()
53. var to = $("#to").data("kendoDatePicker").value()
54. alert(from)
55. var filter = [
56. { field: "OrderDate", operator: "gte", value: from },
57. { field: "OrderDate", operator: "lte", value: to }
58. ];
59. grid.dataSource.filter(filter);
60. });
61. </script>
62. </body>
63. </html>

Result in the browser

Before filtering