How To Show Records In Kendo Grid Using Asp.Net MVC And JQuery

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.