Grid Not Reading JSON Data

[Hady]

Hello,

I'm working on the KendoUI Sample Grid Application for MVC. 

This is my view file:

@using Kendo.Mvc.UI
@{
    ViewBag.Title = "Grid";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Grid</h2>

<div id="dependents">
    <div id="grid">
        @(Html.Kendo().Grid<KendoUIApp1.Models.OrderViewModel>()
              .Name("grid")
              .DataSource(dataSource => dataSource
                  .Ajax()
                  .Read(read => read.Action("Orders_Read", "Grid"))
                  .ServerOperation(false)
              )
              .Columns(columns =>
              {
                  columns.Bound(d => d.OrderID).Title("order_id");
                  columns.Bound(d => d.Freight).Title("Freight");
                  columns.Bound(d => d.OrderDate).Title("OrderDate");
                  columns.Bound(d => d.ShipName).Title("ShipName");
                  columns.Bound(d => d.ShipCity).Title("ShipCity");
              })
              .Pageable()
              .Sortable()
              .HtmlAttributes(new {style = "height: 400px;"})
              )
    </div>
</div>

And this is my GridController File

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web.Mvc;
using KendoUIApp1.Models;

namespace KendoUIApp1.Controllers
{
	public partial class GridController : Controller
    {
		public ActionResult Orders_Read()
		{
			var result = Enumerable.Range(0, 50).Select(i => new OrderViewModel
			{
				OrderID = i,
				Freight = i * 10,
				OrderDate = DateTime.Now.AddDays(i),
				ShipName = "ShipName " + i,
				ShipCity = "ShipCity " + i
			});

			return Json(result, JsonRequestBehavior.AllowGet);
		}

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

When I run the Application, The Grid isn't binding the columns with the JSON result. It's simply returning the JSON in a new page. What should I do? 

Thank you for your help!

[Eyup]

Hi Hady,

 

Thank you for writing to us.

The grid controller action should use the DataSourceResult syntax. I am sending a full working MVC project where you can see how to configure that.

Feel free to check the attached sample and let me know if it helps you.

 

Regards,
Eyup
Progress Telerik