Binding a Model class object to Kendo Grid using JSON result

Question

I need to bind a Kendo grid to a model class. I am returning the same from controller using Json result but the gird is not getting bind. Also find below code snippets used.

Model:

 public DataTable ErrorData { get; set; } 
 public List<string> Groups { get; set; }        
 public Dictionary<string, System.Type> ErrorColumns { get; set; }

Controller :

public JsonResult PopulateData()
{
  ErrorPage _objError = new ErrorPage();

  //Getting the details from Database
  _objError.ErrorData = dbl.GetDataTable(DbConnectionString,Table,whereCondition, columns);

  //Poplulating the Column list as it is dynamically generated every time     as per the filter on front end(View)
  //Column description: Name and Type    
  var columnlist = new Dictionary<string, System.Type>();
  foreach (System.Data.DataColumn column in _objError.ErrorData.Columns)
  {       
     var t = System.Type.GetType( column.DataType.FullName );
     columnlist.Add(column.ColumnName, t);  
  }

  _objError.ErrorColumns = columnlist;

  return Json(_objError);

}

View: This is a code return on button click

$.post(path, { application: app, columns: columns, machine: machine, pages: pages,
 startDate: startDate, endDate: endDate }, function (result) {

        var grid = $("#ErrorLog").data(result);
        grid.dataSource.read();
        grid.refresh();
});

This is Kendo grid code which also get bind to data on page load:

@(Html.Kendo().Grid<dynamic>()
              .Name("ErrorLog")
              .Columns(columns =>
              {
                  //Define the columns
                  foreach (var c in Model.ErrorColumns)
                      columns.Bound(c.Value, c.Key);
              })

              .DataSource(dataSource => dataSource
               .Ajax()
               .Model(model =>
               {
                   foreach (System.Data.DataColumn column in Model.ErrorData.Columns)
                   {
                       model.Field(column.ColumnName, column.DataType);
                   }
               })

               .Read(read => read.Action("populateData", "Common"))
             )

             .Groupable()
             .Sortable(s => s.AllowUnsort(true))
             .Filterable(ftb => ftb.Mode(GridFilterMode.Menu))
             .Pageable(pageable => pageable
                 .Refresh(true)
                 .PageSizes(true)
                 //.ButtonCount(5)
                 )
                )

The column list is populated properly. but i am not sure about the returning the JsonResult to a kendo grid. Kindly help on how to bind a kendo grid using Json result.

Answer 1

Here we go with the solution:

This is my controller where i have serialized the object we are trying to send to View:

public JsonResult populateData(string application, string columns, string machine, string pages, string startDate, string endDate)
    {
        ErrorPage _objError = new ErrorPage();
        var ErrorResult = _objError.GetErrorData(application, columns, machine, pages, startDate, endDate);

        //Column description: Name and Type    
        var columnlist = new Dictionary<string, System.Type>();
        foreach (System.Data.DataColumn column in _objError.ErrorData.Columns)
        {
            var t = System.Type.GetType(column.DataType.FullName);
            columnlist.Add(column.ColumnName, t);
        }

        _objError.ErrorColumns = columnlist;

        var result = JsonConvert.SerializeObject(ErrorResult.ErrorData, Formatting.Indented,
                       new JsonSerializerSettings
                       {
                           ReferenceLoopHandling = ReferenceLoopHandling.Ignore
                       });

        return Json(result, JsonRequestBehavior.AllowGet);
    }

Here is my view which binds the datatable send from controller to Kendo grid:

$.ajax({
        type: "POST",
        url: '@Url.Content("~/Common/PopulateData")',
        contentType: "application/json;charset=utf-8",
        dataType: 'json',
        data: JSON.stringify({ application: app, columns: columns, machine: machine, pages: pages, startDate: startDate, endDate: endDate }),
        success: function (data) {

            $('#ErrorLog').data("kendoGrid").dataSource.data(JSON.parse(data));

        }

    });

Thanks