Kendo UI Grid returns JSON to browser (using MVC)

Question

I've recently purchased a Kendo subscription, I'm having trouble getting an AJAX bound grid to operate as expected, hoping someone here can help.

I have followed the Kendo docs tutorial @ http://docs.kendoui.com/getting-started/using-kendo-with/aspnet-mvc/helpers/grid/ajax-binding and could get the AJAX binding working nicely.

I've tried to now implement it into an existing MVC solution, and whenever I click the New or Edit command button, I get a string of JSON returned to the browser. Similiar to issue (JSON data to KENDO UI Grid ASP.NET MVC 4) But the answer in that problem didn't work for me.

Here is my Controller code...

    public ActionResult Index()
    {
        // non-important code removed here // 

        var viewModel = newReferenceViewModel();
        ViewBag.TradeReferences = TradeReferenceWorker.Get(applicationId);

        return View(viewModel);
    }

    public ActionResult TradeReferences_Read([DataSourceRequest]DataSourceRequest request)
    {
        var applicationId = GetCurrentApplicationId();
        DataSourceResult result = TradeReferenceWorker.Get(applicationId).ToDataSourceResult(request);
        return Json(result, "text/x-json", JsonRequestBehavior.AllowGet);
    } 

And the View ....

@(Html.Kendo().Grid((IEnumerable<TradeReference>)ViewBag.TradeReferences)
  .Name("gridTradeReference")

  .DataSource(dataSource => dataSource
      .Ajax()
       .Model(model =>
        {
            model.Id(tradeReference => tradeReference.TradeReferenceId);
            model.Field(tradeReference => tradeReference.TradeReferenceId).Editable(false);
        })
        .Read(read => read.Action("TradeReferences_Read", "References"))
        .Create(create => create.Action("TradeReference_Create", "References"))
        .Update(update => update.Action("TradeReference_Update", "References"))
        .Destroy(destroy => destroy.Action("TradeReference_Destroy", "References"))
   )

  .Columns(columns =>
  {
      columns.Bound(tref => tref.TradeReferenceId).Visible(false);
      columns.Bound(tref => tref.Name);
      columns.Bound(tref => tref.Phone);
      columns.Command(commands =>
      {
          commands.Edit();
          commands.Destroy();
      }).Title("").Width(200);
  })
  .ToolBar(toolbar => toolbar.Create()) 
  .Editable(editable => editable.Mode(GridEditMode.InLine)) 
  .Sortable()

)

So to sum up... the Grid will load perfectly the first time. I haven't wired up anything on the Edit / Delete actions, just trying to get Create operational. Clicking Add New, or even Edit for that matter will make the browser simply display Json to the screen.

It is hopefully something simple - thanks in advance

Answer 1

Solved it - the problem was the kendo js files were not being referenced correctly.

In my particular case, the bundling wasn't done 100% correctly so the Kendo javascript files were never getting included in the page.

They must also appear in a certain order, as described in the troubleshooting guide http://docs.kendoui.com/getting-started/using-kendo-with/aspnet-mvc/helpers/grid/troubleshooting