Server Side Paging, Sorting, and Filtering Using the Kendo Grid and Entity Framework In ASP.NET MVC
This article will learn how we can retrieve data from serverside Paging, Sorting, and Filtering Using the Kendo UI Grid and Entity Framework in MVC ASP .NET applications.
Create a new project and select the MVC pattern.
Here we use Entity Framework 6 with MVC5 :
Firstly install the Entity framework from the Package manager Console
Install-Package EntityFramework
- First here is our SQL table:
- So for this tutorial first we created a new empty MVC application. In this we will add an ADO .NET Entity Data model to the Model folder as in the following:
- Select Data -> ADO.NET Entity Data Model.
- Select “EF Designer from database” :
- Then select the Server name and Database name.
- Select the click on “Next”.
- Select “Entity Framework 6.x”.
- Then select the table.
- Now, Model1.edmx has been added to the Model folder.
- Let’s get started.
Now, Add a new -> DefaultController and add the code to it.
- Now, Firstly we can DefaultController -> Index.cshtml
Index.cshtml File:
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace ServerSide_KendoGrid_Demo.Controllers
{
public class DefaultController: Controller
{
DBStudentEntities _context = new DBStudentEntities();
public ActionResult Index()
{
return View();
}
[HttpPost]
public JsonResult ServerSide()
{
try
{
string pageNo = Request.Params.GetValues(“page”).FirstOrDefault();
int pageOffSet = (Convert.ToInt32(pageNo) — 1) * 10;
string pageSize = Request.Params.GetValues(“pagesize”).FirstOrDefault();
string sortColumn = Request.Params.GetValues(“sort[0][field]”) == null ? “” : Request.Params.GetValues(“sort[0][field]”).FirstOrDefault();
string sortOrder = Request.Params.GetValues(“sort[0][dir]”).FirstOrDefault();
string searchFilter = Request.Params.GetValues(“filter[filters][2][value]”) == null ? “” : Request.Params.GetValues(“filter[filters][2]
[value]”).FirstOrDefault();
var data = _context.tblStudents.ToList();
int totalRecords = data.Count;
if (!string.IsNullOrEmpty(searchFilter) &&
!string.IsNullOrWhiteSpace(searchFilter))
{
data = data.Where(r => r.StudentName != null && r.StudentName.ToUpper().Contains(searchFilter.ToUpper()) ||
r.Class != null && r.Class.ToUpper().Contains(searchFilter.ToUpper()) ||
r.Course != null && r.Course.ToUpper().Contains(searchFilter.ToUpper()))
.ToList();
}
data = SortTableData(sortColumn, sortOrder, data);
int recFilter = data.Count;
data = data.Skip(pageOffSet).Take(Convert.ToInt32(pageSize)).ToList();
var modifiedData = data.Select(d =>
new
{
d.ID,
d.StudentName,
d.Class,
d.Course
}
);
return Json(new
{
total = totalRecords,
data = modifiedData
}, JsonRequestBehavior.AllowGet);
}
catch (Exception ex)
{
return Json(new
{
total = 0,
data = “”
}, JsonRequestBehavior.AllowGet);
};
}
private List<tblStudent> SortTableData(string order, string orderDir, List<tblStudent> data)
{
List<tblStudent> lst = new List<tblStudent>();
try
{
switch (order)
{
case “0”:
lst = orderDir.Equals(“DESC”, StringComparison.CurrentCultureIgnoreCase) ? data.OrderByDescending(p => p.StudentName).ToList()
: data.OrderBy(p => p.StudentName).ToList();
break;
case “1”:
lst = orderDir.Equals(“DESC”, StringComparison.CurrentCultureIgnoreCase) ? data.OrderByDescending(p => p.Class).ToList()
: data.OrderBy(p => p.Class).ToList();
break;
case “2”:
lst = orderDir.Equals(“DESC”, StringComparison.CurrentCultureIgnoreCase) ? data.OrderByDescending(p => p.Course).ToList()
: data.OrderBy(p => p.Course).ToList();
break;
default:
lst = orderDir.Equals(“DESC”, StringComparison.CurrentCultureIgnoreCase) ? data.OrderByDescending(p => p.ID).ToList()
: data.OrderBy(p => p.ID).ToList();
break;
}
}
catch (Exception ex)
{
Console.Write(ex);
}
return lst;
}
}
}
@{
ViewBag.Title = “Index”;
Layout = “~/Views/Shared/_Layout.cshtml”;
}
<div id=”main”>
<div id=”grid”></div>
</div>
@section scripts{
<link rel=”stylesheet” href=”https://kendo.cdn.telerik.com/2020.3.1021/styles/kendo.default-v2.min.css" />
<script src=”https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src=”https://kendo.cdn.telerik.com/2020.3.1021/js/kendo.all.min.js"></script>
<script>
$(document).ready(function () {
var table = null;
if (table != null) {
var grid = $(“#grid”).data(“kendoGrid”);
grid.destroy();
table = null;
}
table = $(“#grid”).kendoGrid({
dataSource: {
transport: {
read: {
url: “/KendioGrid/Serverside”,
type: “POST”,
dataType: “json”
}
},
schema: {
data: “data”,
total: “total”
},
serverPaging: true,
serverSorting: true,
sort: { field: “Date”, dir: “asc” },
serverFiltering: true,
pageSize: 10,
},
scrollable: false,
sortable: {
allowUnsort: false
},
toolbar: [“search”],
pageable: {
numeric: true,
input: true
},
groupable: false,
filterable: false,
columns: [
{ field: “ID”, title: “ID” },
{ field: “StudentName”, title: “StudentName” },
{ field: “Class”, title: “Class” },
{ field: “Course”, title: “Course” }
]
});
});
</script>
}
That’s it.
OUTPUT
I hope you guys understand how we can do that.
Let me know if you face any difficulties.
Happy Coding {;}