Introduction
In this article i explain you how to show kendo grid records in frontend using jquery, I also show you how to get data from the controller and show this data into the kendo grid.
Step-1: Create new project in visula studio
now you need to create one mvc project in visul studio
Step-2: Add Css and Js of Kendo grid
After creating the project then you need to add the script and css in to your head section.
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.219/styles/kendo.default-v2.min.css" /> <script src="https://kendo.cdn.telerik.com/2020.1.219/js/jquery.min.js"></script> <script src="https://kendo.cdn.telerik.com/2020.1.219/js/kendo.all.min.js"></script>
Step-3: Now add Html code for the kendo grid
here only small code of html for the kendo grid just you need to give id of any html div.
<div id="grid"></div>
step-4: Add the js logic.
Now you need to define the columns of records as well as the datatypes of each and every columns.
$("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
},
pageSize: 20
},
height: 550,
groupable: true,
sortable: true,
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
columns: [{
template: "<div class='customer-photo'" +
"style='background-image: url(../content/web/Customers/#:data.CustomerID#.jpg);'></div>" +
"<div class='customer-name'>#: ContactName #</div>",
field: "ContactName",
title: "Contact Name",
width: 240
}, {
field: "ContactTitle",
title: "Contact Title"
}, {
field: "CompanyName",
title: "Company Name"
}, {
field: "Country",
width: 150
}]
});
Above example is just only for the jquery there is not any role of mvc so records get from the one json file and show into the fronend.
Now I am trying to get records from the controller and show this records to the kendo grid.
Step-1: create one view with model
you need to create one action result and give the model to this action result given below.
public ActionResult Index()
{
List<ClsEmployee> lstEmp = EmployeeData();
return View(lstEmp);
}
public List<ClsEmployee> EmployeeData()
{
List<ClsEmployee> lstEmp = new List<ClsEmployee>();
lstEmp.Add(new ClsEmployee { EmployeeName = "Bhavdip", City = "Surat", State = "Gujarat", PhoneNo = "9898989898" });
lstEmp.Add(new ClsEmployee { EmployeeName = "Faisal", City = "Ahemdabad", State = "Gujarat", PhoneNo = "787898" });
lstEmp.Add(new ClsEmployee { EmployeeName = "Yasin", City = "Surat", State = "Gujarat", PhoneNo = "98989879787" });
lstEmp.Add(new ClsEmployee { EmployeeName = "Sagar", City = "Mumbai", State = "Maharastra", PhoneNo = "6565658989" });
return lstEmp;
}
public class ClsEmployee
{
[DisplayName("Employee Name")]
public string EmployeeName { get; set; }
[DisplayName("Present City")]
public string City { get; set; }
[DisplayName("Current State")]
public string State { get; set; }
[DisplayName("Phone Number")]
public string PhoneNo { get; set; }
}
Step-2: send controller records to the view suing model
now you need to pass model in view and show this records using the kndo grid.
@model List<ShowRecordInKendogrid.ClsEmployee>
<div id="grid2"></div>
$(document).ready(function () {
var model =@{@Html.Raw(Json.Encode(Model))};
$('#grid2').kendoGrid({
dataSource: {
data : model,
pageSize :5
},
selectable : "single",
schema: {
model: {
fields: {
EmployeeName: { type: "string" },
City: { type: "string" },
State: { type: "string" },
PhoneNo: { type: "string" },
}
}
},
sortable : {
mode :"single",
allowUnsort : "false"
},
serverPaging: true,
height: 300,
pageSize:10,
pageable : {
refresh : false,
pageSizes : true,
buttonCount:10
},
columns: [
{ field: "EmployeeName", title: "Employee Name", width: "25%" },
{ field: "City", title: "City", width: "150px" },
{ field: "State", title: "State", width: "150px" },
{ field: "PhoneNo", title: "Phone No", width: "150px" }
]
});
});
Now I share my all code to you guy’s
Index.chstml (view of mvc)
@model List<ShowRecordInKendogrid.ClsEmployee>
<!DOCTYPE html>
<html>
<head>
<base href="https://demos.telerik.com/kendo-ui/grid/index">
<style type="text/css">
html {
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
}
.customer-photo {
display: inline-block;
width: 32px;
height: 32px;
border-radius: 50%;
background-size: 32px 35px;
background-position: center center;
vertical-align: middle;
line-height: 32px;
box-shadow: inset 0 0 1px #999, inset 0 0 10px rgba(0,0,0,.2);
margin-left: 5px;
}
.customer-name {
display: inline-block;
vertical-align: middle;
line-height: 32px;
padding-left: 3px;
}
</style>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.219/styles/kendo.default-v2.min.css" />
<script src="https://kendo.cdn.telerik.com/2020.1.219/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2020.1.219/js/kendo.all.min.js"></script>
</head>
<body>
<div class="jumbotron">
<h3>Kendo Grid with json file data</h3>
<p class="lead">How to show database records in kendo grid using in MVC using jquery.</p>
</div>
<div id="example">
<div id="grid"></div>
</div>
<h3>Kendo Grid with database record using MVC & Entity framework</h3>
<div class="jumbotron">
<h3>Kendo Grid</h3>
<p class="lead">How to show database records in kendo grid using in MVC using jquery.</p>
</div>
<div id="grid2"></div>
<script>
$(document).ready(function () {
getjsonnfromjsonfiledata();
getmvcdatafromcontroller();
});
function getmvcdatafromcontroller() {
var model =@{@Html.Raw(Json.Encode(Model))};
$('#grid2').kendoGrid({
dataSource: {
data : model,
pageSize :5
},
selectable : "single",
schema: {
model: {
fields: {
EmployeeName: { type: "string" },
City: { type: "string" },
State: { type: "string" },
PhoneNo: { type: "string" },
}
}
},
sortable : {
mode :"single",
allowUnsort : "false"
},
serverPaging: true,
height: 300,
pageSize:10,
pageable : {
refresh : false,
pageSizes : true,
buttonCount:10
},
columns: [
{ field: "EmployeeName", title: "Employee Name", width: "25%" },
{ field: "City", title: "City", width: "150px" },
{ field: "State", title: "State", width: "150px" },
{ field: "PhoneNo", title: "Phone No", width: "150px" }
]
});
}
function getjsonnfromjsonfiledata() {
$("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
},
pageSize: 20
},
height: 550,
groupable: true,
sortable: true,
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
columns: [{
template: "<div class='customer-photo'" +
"style='background-image: url(../content/web/Customers/#:data.CustomerID#.jpg);'></div>" +
"<div class='customer-name'>#: ContactName #</div>",
field: "ContactName",
title: "Contact Name",
width: 240
}, {
field: "ContactTitle",
title: "Contact Title"
}, {
field: "CompanyName",
title: "Company Name"
}, {
field: "Country",
width: 150
}]
});
}
function getRootUrl() {
return window.location.origin ? window.location.origin + '/' : window.location.protocol + '/' + window.location.host + '/';
}
</script>
</body>
</html>
HomeController.cs (Controller logic)
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace ShowRecordInKendogrid.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
List<ClsEmployee> lstEmp = EmployeeData();
return View(lstEmp);
}
public List<ClsEmployee> EmployeeData()
{
List<ClsEmployee> lstEmp = new List<ClsEmployee>();
lstEmp.Add(new ClsEmployee { EmployeeName = "Bhavdip", City = "Surat", State = "Gujarat", PhoneNo = "9898989898" });
lstEmp.Add(new ClsEmployee { EmployeeName = "Faisal", City = "Ahemdabad", State = "Gujarat", PhoneNo = "787898" });
lstEmp.Add(new ClsEmployee { EmployeeName = "Yasin", City = "Surat", State = "Gujarat", PhoneNo = "98989879787" });
lstEmp.Add(new ClsEmployee { EmployeeName = "Sagar", City = "Mumbai", State = "Maharastra", PhoneNo = "6565658989" });
return lstEmp;
}
public ActionResult About()
{
ViewBag.Message = "Your application description page.";
return View();
}
public ActionResult Contact()
{
ViewBag.Message = "Your contact page.";
return View();
}
}
}
ClsEmployee.cs (class for employee)
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Web;
namespace ShowRecordInKendogrid
{
public class ClsEmployee
{
[DisplayName("Employee Name")]
public string EmployeeName { get; set; }
[DisplayName("Present City")]
public string City { get; set; }
[DisplayName("Current State")]
public string State { get; set; }
[DisplayName("Phone Number")]
public string PhoneNo { get; set; }
}
}
Now you need to check the output of this all code.
Conclusions
In this artilce I explained how to show jsonfile data in kendo grid and as well as list of records from mvc to kendo grid.
I hope you like it and share it.
tҺe website іѕ really good, I love your site!
tҺe website іѕ really good, I enjoy your web site!
Bookmarked!, I love your site!