Multiple Ways To Bind Data To Kendo Grid In MVC

Introduction

Many times, while working with Grid, we need to show the result into a GridView in different situations.

What is Kendo Grid?

The Kendo UI Grid is a powerful widget which allows you to visualize and edit data via its table representation. It provides many options, such as paging, sorting, filtering, grouping, and editing, which determine the way data is presented and manipulated.

The Grid can be bound to local or remote data by using the Kendo UI DataSource component.

 

Scenario I

Bind data to Kendo Grid by using AJAX Read action method.

Scenario II

Change the datasource on change event of any HTML controls.

Scenario I

Normally, a developer can bind the data to Grid by using AJAX Read method.

This read method is ActionResult method in MVC which will return JSON DataSourceResult & direclty bind the data to Grid. 

Note

Also, the developer can pass parameters to this read method. Suppose below is our read method.

Read(read => read.Action("BindGrid", "Home").Data("SortByCompanyId"))

In the above line, my JavaScript function name is SortByCompanyId which will return company id. On that basis, we can pass parameter to our action method in Controller. 

public ActionResult BindGrid([DataSourceRequest]DataSourceRequest request, string companyId)
       {
      // bind json data result here
    }

Our JavaScript function is like the following.

<script type="text/javascript">
        function SortByCompanyId() {
            var cId = 25;
            return {
                companyId: cId
            }
        }
    </script>

Step 1

Create a Model, give it a name as Company, and declare some properties into it.

public class Company
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public int? CompanyId { get; set; }
    }

Step 2

Now, create a Controller, give it name as HomeController. In this, create a action method as Index() which will return a View. On this View, write some code to bind data into the Grid View by using the above Model. 

@model Grid.Models.Company
@using System.Web.Optimization
@using Kendo.Mvc.UI
@using Kendo.Mvc.Extensions
@{
   Layout = "~/Views/Shared/_Layout.cshtml";
}
<div style="width:60%;height:100%">
    @(Html.Kendo().Grid<Grid.Models.Company>()
        .Name("BindGridUsingRead")
        .Columns(columns =>
        {
            columns.Bound(p => p.Id).Width(15).Title("Sr. No.").Filterable(false);
            columns.Bound(p => p.Name).Title("Name").Width(30).Filterable(false);
            columns.Bound(p => p.CompanyId).Title("Company Id").Width(15).Filterable(false);
            })
           .Scrollable()
           .Pageable(x => x.PageSizes(new List<object> { 10, 20, 100, 200, 500, "all" }).Refresh(true))
            .Filterable(ftp => ftp.Mode(GridFilterMode.Row))
            .Resizable(resize => resize.Columns(true))
            .HtmlAttributes(new { style = "height: 100%" })
            .Selectable()
            .DataSource(dataSource => dataSource
            .Ajax()
            .Model(model => model.Id(p => p.Id))
            .ServerOperation(false)
            .Read(read => read.Action("BindGrid", "Home"))
     )
    )
</div>

Step 3

In Controller, write method which will bind the data to Grid by using Ajax Read action method. Now, write some action methods named as BindGrid (to bind the JSON data to Grid). I am going to bind some hard coded values by using action method GetGridData() using Company model which will return IEnumerable List.

public ActionResult Index()
       {
           return View();
       }

       public ActionResult BindGrid([DataSourceRequest]DataSourceRequest request)
       {
           try
           {
               decimal companyId = 0;
               List<Models.Company> lst = new List<Models.Company>();
               lst = GetGridData(Convert.ToInt32(companyId)).ToList();
               DataSourceResult result = lst.ToDataSourceResult(request, p => new Models.Company
               {
                   Id = p.Id,
                   Name = p.Name,
                   CompanyId = p.CompanyId,
               });
               return Json(result, JsonRequestBehavior.AllowGet);
           }
           catch (Exception ex)
           {
               var errorMsg = ex.Message.ToString();
               return Json(errorMsg, JsonRequestBehavior.AllowGet);
           }
       }
      public IEnumerable<Models.Company> GetGridData(decimal companyId)
       {
           List<Models.Company> objCmp = new List<Models.Company>();
           List<Models.Company> listCompany = new List<Models.Company>();
           objCmp.Add(new Models.Company() { Id = 1, Name = "Rupesh Kahane", CompanyId = 20 });
           objCmp.Add(new Models.Company() { Id = 2, Name = "Vithal Wadje", CompanyId = 40 });
           objCmp.Add(new Models.Company() { Id = 3, Name = "Jeetendra Gund", CompanyId = 30 });
           objCmp.Add(new Models.Company() { Id = 4, Name = "Ashish Mane", CompanyId = 15 });
           objCmp.Add(new Models.Company() { Id = 5, Name = "Rinku Kulkarni", CompanyId = 18 });
           objCmp.Add(new Models.Company() { Id = 6, Name = "Priyanka Jain", CompanyId = 22 });
           if(companyId > 0)
           {
               listCompany = objCmp.ToList().Where(a => a.CompanyId <= companyId).ToList();
               return listCompany.AsEnumerable();
           }
           return objCmp.ToList().AsEnumerable();
       }

Step 4

Here is the result after running our solution.

 

Scenario II

While working with html controls or forms, there are some situations, like we need to bind the data to Grid on change event of controls or we need to apply some custom filters, on search button click event, we are applying these filters that change the datasource on change event of any html control.

Note

There is a built-in functionality as well to filter Grid data from column values. Here, we are using custom filters.

 

Suppose, the user entered some integer value & we need the data where company id is less than input value in on change event of control. So we take one textbox & will write on change event code into a javascript by using transport.options.read method. We are passing read method URL & input value to out action method.

Step 1

As I explained in scenario I, we are adding only one textbox &JS file which contains change event function to our View. Add some JavaScript code above this which will contain bind grid method as -

<script type="text/javascript">
    var gridObject;
    var readURL = new Array();
    readURL[0] = "/Home/BindGrid";
    readURL[1] = "/Home/BindGridOnSearch?companyId=";
</script>

 Now, our View page will look like the following.

@model Grid.Models.Company
@using System.Web.Optimization
@using Kendo.Mvc.UI
@using Kendo.Mvc.Extensions
@{
   Layout = "~/Views/Shared/_Layout.cshtml";
}
<script type="text/javascript">
    var gridObject;
    var readURL = new Array();
    readURL[0] = "/Home/BindGrid";
    readURL[1] = "/Home/BindGridOnSearch?companyId=";
</script>
<div>
    <div class="box-header with-border">
        <div class="col-xs-12">
            <div class="col-xs-4 martop" style="text-align:right;width:22%">
                @(Html.Kendo().TextBoxFor(model => model.CompanyId)
                    .Name("CompanyId")
                    .HtmlAttributes(new { placeholder = "Search By Company Id", @autocomplete = "off", @class = "col-sm-12", style = "width:100%", maxlength = 200 })
                )
            </div>
        </div>
    </div>
</div>
<br />

<div style="width:60%;height:100%">
    @(Html.Kendo().Grid<Grid.Models.Company>()
        .Name("BindGridUsingRead")
        .Columns(columns =>
        {
            columns.Bound(p => p.Id).Width(15).Title("Sr. No.").Filterable(false);
            columns.Bound(p => p.Name).Title("Name").Width(30).Filterable(false);
            columns.Bound(p => p.CompanyId).Title("Company Id").Width(15).Filterable(false);
            })
           .Scrollable()
           .Pageable(x => x.PageSizes(new List<object> { 10, 20, 100, 200, 500, "all" }).Refresh(true))
            .Filterable(ftp => ftp.Mode(GridFilterMode.Row))
            .Resizable(resize => resize.Columns(true))
            .HtmlAttributes(new { style = "height: 100%" })
            .Selectable()
            .DataSource(dataSource => dataSource
            .Ajax()
            .Model(model => model.Id(p => p.Id))
            .ServerOperation(false)
            .Read(read => read.Action("BindGrid", "Home"))
     )
    )
</div>
<script src="~/Scripts/Custom/Home.js"></script>

Step 2

Now, write code on change event of textbox into JavaScript Home.js file. In our JS file on windows.load method, we can get data of Grid into a our global variable.

$(window).load(function () {
    gridObject = $("#BindGridUsingRead").data("kendoGrid");
});

$(document).ready(function () {
    $('#CompanyId').on('change', function () {
        //debugger;
        var cmpId = $("input[id='CompanyId']").val();
        gridObject.dataSource.transport.options.read.url = readURL[1] + cmpId;
        gridObject.dataSource.read();
    });
});

Step 3

Write some code into Controller against these read methods.

public ActionResult BindGridOnSearch([DataSourceRequest]DataSourceRequest request, string companyId)
        {
            try
            {
                List<Models.Company> list = new List<Models.Company>();
                list = GetGridData(Convert.ToInt32(companyId)).ToList();
                DataSourceResult result = list.ToDataSourceResult(request, p => new Models.Company
                {
                    Id = p.Id,
                    Name = p.Name,
                    CompanyId = p.CompanyId,
                });
                return Json(result, JsonRequestBehavior.AllowGet);
            }
            catch (Exception ex)
            {
                var errorMsg = ex.Message.ToString();
                return Json(errorMsg, JsonRequestBehavior.AllowGet);
            }
        }

Step 4

Here is the result after running our solution (if we enter 25 into input box).

 

 

Summary

In this article, you learned the basics of how to bind data to Kendo Grid in MVC using multiple methods.