Kendo UI Grid returning json instead of displaying data

Question

I am using the Kendo UI MVC grid. The controller is returning data, but it is not being displayed in the grid. What am I doing wrong?

The Controller

 [OutputCache(Duration = 1, VaryByParam = "*")]
    public ActionResult GetIdeasForApproval([DataSourceRequest] DataSourceRequest request)
    {
        IdeaResponse response = this.DashBoardService.GetIdeasForApproval();

        IEnumerable<Idea> ideas = response.Ideas;

        Idea viewModel = new Idea();
        JsonResult result = new JsonResult();

        result.Data =
            Json(
                response.Ideas.Select(
                    p =>
                        new
                        {
                            IdeaId = p.IdeaId,
                            Title = p.Title,
                            Description = p.Description,
                            //Photo = Convert.ToBase64String(p.TeamMember.Photo),
                            URL = p.Url ?? string.Empty
                        }));
        result.JsonRequestBehavior = JsonRequestBehavior.AllowGet;

        return result;
    }


@(Html.Kendo().Grid<Idea>()
.Name("ideas-for-approval")
.Columns(columns =>
    {
        columns.Bound(p => p.IdeaId).Visible(false);
        columns.Bound(p => p.Title).Title("Title");
        columns.Bound(p => p.Description).Title("Description");
        columns.Bound(p => p.Url).Title("URL");
    }
)
 .DataSource(dataSource => dataSource
        .Ajax()
        .Events(events => events.Error("onError"))
        .Read(read => read.Action("GetIdeasForApproval", "Dashboard"))
    )

)

returned json

{"ContentEncoding":null,"ContentType":null,"Data":[{"IdeaId":431,"Title":"Test","Description":"test","URL":""},{"IdeaId":406,"Title":"Windows 10 For All Developers Test","Description":"Upgrade Windows 7 to Windows 10 for all developers. Test","URL":"https://www.microsoft.com/en-us/windows/features"},{"IdeaId":433,"Title":"Test Title","Description":"Test Description","URL":""}],"JsonRequestBehavior":1,"MaxJsonLength":null,"RecursionLimit":null}

Answer 1

taking your code and tweaking it just slightly from:

 JsonResult result = new JsonResult();

        result.Data =
            Json(
                response.Ideas.Select(
                    p =>
                        new
                        {
                            IdeaId = p.IdeaId,
                            Title = p.Title,
                            Description = p.Description,
                            //Photo = Convert.ToBase64String(p.TeamMember.Photo),
                            URL = p.Url ?? string.Empty
                        }));
        result.JsonRequestBehavior = JsonRequestBehavior.AllowGet;

        return result;

to:

 var model =  response.Ideas.Select(p => new {
                                                    IdeaId = p.IdeaId,
                                                    Title = p.Title,
                                                    Description = p.Description,
                                                    //Photo = Convert.ToBase64String(p.TeamMember.Photo),
                                                    URL = p.Url ?? string.Empty
                                                        });
return Json(model.ToDataSourceResult(request, ModelState), JsonRequestBehavior.AllowGet);

I personally would probably also change the signature to be a public JsonResult rather than an ActionResult (just my preference here)

Hopefully this should work for you. If you need more info let me know and I will expand the answer for you.