How to bind JSON data to kendo grid in MVC

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