In this article, we will learn how to enable sorting, grouping, pagination, reordering, show and hide columns and many other things for data, using Kendo Grid and simple Restful API, which has been created, using ASP.NET Core.

Milestone

In my previous article, we learned how to create a simple API in ASP.NET Core Web Application and parse the data received from API in HTML table,

Today, we will use Kendo Grid to parse the data into the Grid in ASP.NET Core Application.

Kendo UI is a UI Library for HTML, JavaScript and Angular development. Kendo UI for jQuery delivers everything you need to build a modern Web Application under tight deadlines. Choose from more than 70 UI components and easily combine them to create beautiful and responsive apps, while speeding the development time by up to 50 percent. [Definition from Kendo UI]

You can use both paid and free versions of Kendo UI.

Here is the link for an open source and free version of Kendo UI.

Creating Web API in ASP.NET Core

Add Model

Step 1

Create a new folder under Models folder named Student.

Step 2

Add New class named as PersonalDetail.

Step 3

Add the lines of codes given below to PersonalDetail class.

Kendo Grid using ASP.NET Web API by Nishan Aryal
Code snippet
  1. public class PersonalDetail
  2. {
  3. [Key]
  4. public string RegNo {
  5. get;
  6. set;
  7. }
  8. public string Name {
  9. get;
  10. set;
  11. }
  12. public string Address {
  13. get;
  14. set;
  15. }
  16. public string PhoneNo {
  17. get;
  18. set;
  19. }
  20. public DateTime AdmissionDate {
  21. get;
  22. set;
  23. }
  24. }

Add Web API

Step 1

Right click on Controller folder and Add => Controller.

Kendo Grid using ASP.NET Web API by Nishan Aryal

Step 2

Select API Controller - Empty.

Step 3

Click Add.

Kendo Grid using ASP.NET Web API by Nishan Aryal

Step 4

Name the Web API as StudentAPI.

Kendo Grid using ASP.NET Web API by Nishan Aryal

Step 5

Now, create a method called GetAllStudents().

Your method should look like, as shown below.

Code snippet
  1. // GET: api/StudentAPI/GetAllStudents
  2. //[HttpPost]
  3. [Route("api/StudentAPI/GetAllStudents")]
  4. public IEnumerable < PersonalDetail > GetAllStudents() {
  5. List < PersonalDetail > students = new List < PersonalDetail > {
  6. new PersonalDetail {
  7. RegNo = "2017-0001",
  8. Name = "Nishan Aryal",
  9. Address = "Kathmandu",
  10. PhoneNo = "9849845061",
  11. AdmissionDate = DateTime.Now
  12. },
  13. new PersonalDetail {
  14. RegNo = "2017-0002",
  15. Name = "Namrata Rai",
  16. Address = "Bhaktapur",
  17. PhoneNo = "9849845062",
  18. AdmissionDate = DateTime.Now
  19. },
  20. new PersonalDetail {
  21. RegNo = "2017-0003",
  22. Name = "Junge Rai",
  23. Address = "Pokhara",
  24. PhoneNo = "9849845063",
  25. AdmissionDate = DateTime.Now
  26. },
  27. new PersonalDetail {
  28. RegNo = "2017-0004",
  29. Name = "Sunita Ghimire",
  30. Address = "Kathmandu",
  31. PhoneNo = "9849845064",
  32. AdmissionDate = DateTime.Now
  33. },
  34. new PersonalDetail {
  35. RegNo = "2017-0005",
  36. Name = "John ",
  37. Address = "Bhaktapur",
  38. PhoneNo = "9849845065",
  39. AdmissionDate = DateTime.Now
  40. },
  41. };
  42. return students;
  43. }
Use Postman to check API

We can use Postand Google Chrome extension. Click here to install.

Now, let's navigate to WebAPI URL to check the data.

sorting and Grouping in Kendo Grid using ASP.NET Core by Nishan Aryal

Adding a new View to place Kendo Grid

Step 1

Let's create a new method called ListData at HomeController, as shown below.
Kendo Grid using ASP.NET Web API by Nishan Aryal
Code snippet
  1. /// <summary>
  2. /// Method to List all data in Kendo Grid
  3. /// </summary>
  4. /// <returns></returns>
  5. public IActionResult ListData()
  6. {
  7. return View();
  8. }
Step 2

Add Empty View for the method.

Step 3

Add references to CSS, JS and add a Bootstrap panel, as shown below.
Kendo Grid using ASP.NET Web API by Nishan Aryal

Code snippet
  1. <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.common.min.css" />
  2. <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.rtl.min.css" />
  3. <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.silver.min.css" />
  4. <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.mobile.all.min.css" />
  5. <script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
  6. <script src="http://kendo.cdn.telerik.com/2017.1.118/js/kendo.all.min.js"></script>
  7. <div class="panel panel-primary">
  8. <div class="panel-heading">Test Data from API</div>
  9. <div class="panel-body">
  10. <div id="Grid"></div> <!--end of grid-->
  11. </div> <!--end of panel-body-->
  12. </div> <!--end of panel-primary-->
Step 4

Add the scripts given below to
  1. Get the data from Web API.
  2. Format received data to the respective types (string, numbers, date, etc).
  3. Enable filtering, sorting and grouping.

Code snippet
  1. <script>
  2. $(document).ready(function() {
  3. $("#Grid").kendoGrid({
  4. dataSource: {
  5. type: "json",
  6. transport: {
  7. contentType: "application/json; charset=utf-8",
  8. type: "GET",
  9. dataType: "json",
  10. read: "/api/StudentAPI/GetAllStudents",
  11. },
  12. pageSize: 5,
  13. schema: {
  14. model: {
  15. fields: {
  16. RegNo: {
  17. type: "string"
  18. },
  19. Name: {
  20. type: "string"
  21. },
  22. Address: {
  23. type: "string"
  24. },
  25. PhoneNo: {
  26. type: "string"
  27. },
  28. admissionDate: {
  29. type: "date"
  30. }
  31. }
  32. }
  33. },
  34. },
  35. filterable: true,
  36. sortable: true,
  37. groupable: true,
  38. reorderable: true,
  39. resizable: true,
  40. pageable: {
  41. refresh: true,
  42. pageSizes: true,
  43. buttonCount: 5
  44. },
  45. columns: [{
  46. field: "regNo",
  47. title: "Regd No"
  48. }, {
  49. field: "name",
  50. title: "Student Name"
  51. }, {
  52. field: "address",
  53. title: "Address"
  54. }, {
  55. field: "phoneNo",
  56. title: "Phone No",
  57. }, {
  58. field: "admissionDate",
  59. title: "Admission Date",
  60. format: "{0:MM-dd-yyyy}"
  61. }]
  62. });
  63. });
  64. </script>
Application Execution

Now, rebuild the solution and run it.

Navigate to ListData Method of Home Controller (http://localhost:2131/Home/ListData).

You will be able to see the screen given below.


Now, you can enjoy Kendo Grid.

Sorting in Kendo Grid


Grouping in Kendo Grid

Summary

Thus, we have learned,
  • How to create a simple ASP.NET Core Web Application.
  • How to create a simple Web API in ASP.NET Core.
  • Pass JSON data via Web API.
  • How to use Web API in Kendo Grid.
  • Sorting and grouping in Kendo UI.
You may also like