telerik

How to bind JSON to Kendo Grid datadource in MVC  #angularjs #reactjs

  • Using the developer tools in chrome I can see that the response for the ReadData() is [{“Name”:”Abc”,”Age”:10},{“Name”:”PersonName”,”Age”:25}] the rendered grid is only showing the column names but no data columns.
  • The Kendo UI MVC Grid is designed to work with ToDataSourceResult() in the action method that serves the data.
  • Stack Overflow works best with JavaScript enabled
  • public class MyModel { public string Name { get; set; } public int Age { get; set; } }
  • I’m trying to dynamically bind the JSON response to grid.

I’m trying to dynamically bind the JSON response to grid. I have set autobind = false so I can control when to call ReadData().

@ng_real_ninja: How to bind JSON to Kendo Grid datadource in MVC #angularjs #reactjs

@(Html.Kendo().Grid() .Name(“GridDetail”) .AutoBind(false) .DataSource(ds => { ds.Ajax().Read(r => { r.Action(“ReadData”, “Home”); //action in Home controller }); }) .Columns(c => { c.Bound(m => m.Name); c.Bound(m => m.Age); }) ) @section Scripts{ }

public ActionResult ReadData() { var model = new[] { new MyModel { Name = “Abc”, Age = 10 }, new MyModel { Name = “PersonName”, Age = 25 }, }; return Json(model, JsonRequestBehavior.AllowGet); }

public class MyModel { public string Name { get; set; } public int Age { get; set; } }

in the action method that serves the data. Check the following article:

will take care of performing the data operations (sorting, paging, etc), and will also serve the data in the expected format, which is:

{ Data: [ { “Name”: “Abc”, “Age”: 10 }, { “Name”: “PersonName”, “Age”: 25 } ], Total: 2 }

Edit addition: To add to this answer, an example of what your controller code may look like is as follows:

telerik

You might also like More from author

Comments are closed, but trackbacks and pingbacks are open.