In this article, We will learn how to bind JSON data to the kendo grid in MVC without using Ajax calls
Introduction
Kendo UI is an HTML5 user interface for building High-Quality, responsive web sites and we have lot of widgets are available more than 70 , it is an MVVM (Model-View-ViewModel) library.
Kendo is a Collection of JavaScript UI components(responsive, High performance, Rich look) with libraries for jQuery, Angular, React, and Vue.
bind JSON data to the kendo grid in MVC
Go to project right click on model Folder Add a class name like Product
you will create Inside product class two properties names like product ID, product Name Simple way to Add the following given Snippet code
public class Product
{
public int ID { get; set; }
public string Name { get; set; }
}
Right-click on Controller folder Add an empty controller name like HomeController
in this example, instead of connecting to database statically I created some thousand of records at constructor level by using for loop
All Records are available at the global list (products) where we want to read this list of products we will use that global object List (products)
you will implement HomeController By using given below code
public class HomeController : Controller
{
private static List<Product> products = new List<Product>();
private static int id;
static HomeController()
{
// create some large data
for (id = 1; id < 20000; id++)
{
products.Add(new Product()
{
ID = id,
Name = "Product" + id
});
}
}
protected override JsonResult Json(object data, string contentType,
Encoding contentEncoding, JsonRequestBehavior behavior)
{
return new CustomJsonResult
{
Data = data,
ContentType = contentType,
ContentEncoding = contentEncoding,
JsonRequestBehavior = behavior
};
}
public ActionResult Index()
{
return View();
}
public ActionResult Read([DataSourceRequest]DataSourceRequest request)
{
return Json(products.ToDataSourceResult(request));
}
public ActionResult LocalData()
{
return View(products);
}
}
Given below CDN’s are required for Implementing Kendo UI in MVC or go to manage NuGet package console install the Kendo UI Library
or
you will Add given below CDN’s are layout page level or page level or If you have in these files in your Script folder go to the App_Start folder and open BundleConfig.cs Add js file to bundle.
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2014.2.1008/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2014.2.1008/styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2014.2.1008/styles/kendo.dataviz.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2014.2.1008/styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2014.2.1008/styles/kendo.dataviz.default.min.css" rel="stylesheet" type="text/css" />
<script src="http://cdn.kendostatic.com/2014.2.1008/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.2.1008/js/kendo.all.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.2.1008/js/kendo.aspnetmvc.min.js"></script>
you will create a view for the Index Action Method and LocalData Action Method and Add given below code
Index View
@{
ViewBag.Title = "Index";
}
<ul id="menu">
<li>@Html.ActionLink("AJAX binding", "Index", "Home")</li>
<li>@Html.ActionLink("Binding to local data", "LocalData", "Home")</li>
</ul>
<h2>Index</h2>
@(Html.Kendo().Grid<KendoUIMVC5.Models.Product>()
.Name("Grid")
.Columns(columns =>
{
columns.Bound(p => p.ID);
columns.Bound(p => p.Name);
})
.Pageable()
.Sortable()
.Filterable()
.DataSource(dataSource => dataSource
.Ajax()
.ServerOperation(false)
.Read("Read", "Home")
)
)
LocalData view
@{
ViewBag.Title = "Local data";
}
@model IEnumerable<KendoUIMVC5.Models.Product>
<ul id="menu">
<li>@Html.ActionLink("AJAX binding", "Index", "Home")</li>
<li>@Html.ActionLink("Binding to local data", "LocalData", "Home")</li>
</ul>
<h2>Bound to local data</h2>
@(Html.Kendo().Grid(Model)
.Name("Grid")
.Columns(columns =>
{
columns.Bound(p => p.ID);
columns.Bound(p => p.Name);
})
.Pageable()
.Sortable()
.Filterable()
.DataSource(dataSource => dataSource
.Ajax()
.ServerOperation(false)
)
)
Run your application thanks
? In the above example, we are binding statically created data but next example We will see binding data to Kendo Grid by using Database
I like to share my work experience, research, and knowledge through my blog.
I love developing the applications in Microsoft technologies including asp.net mvc,c#.net, windfarms, SQL server,entityfrawork,Ajax,Jquery,WEbApi,Asp.net core, SEO, WordPress, UI..more
- Angular 11 Crud Operation - April 14, 2021
- How to create dynamic form fields using jQuery - January 4, 2021
- What is CTS (Common Type System) in .Net - October 16, 2020
Bookmarked!, I like your website!