Kendo Grid has correct JSON but data not showing up

Question

I'm trying to use Teleric's Kendo Grid in ASP.NET MVC 5. I'm following the example here, but the grid is not populating with data. The columns show up, but it says "No items to display".

http://docs.telerik.com/kendo-ui/getting-started/using-kendo-with/aspnet-mvc/helpers/grid/ajax-binding

This is my Words/Read function:

    public ActionResult Read([DataSourceRequest] DataSourceRequest request)
    {
        var items = db.Words.Take(1).ToList();
        //this code was necessary to get the correct JSON result
        JsonSerializerSettings jsSettings = new JsonSerializerSettings();
        jsSettings.ReferenceLoopHandling = ReferenceLoopHandling.Ignore;
        var converted = JsonConvert.SerializeObject(items, null, jsSettings);
        return Content(converted);
    }

I got the following JSON result from Words/Read:

[{"WordId":1,"Rank":1,"PartOfSpeech":"article","Image":"Upload/29/1/Capture1.PNG","FrequencyNumber":"22038615","Article":null,"ClarificationText":null,"WordName":"the | article","MasterId":0,"SoundFileUrl":"/UploadSound/7fd752a6-97ef-4a99-b324-a160295b8ac4/1/sixty_vocab_click_button.mp3","LangId":1,"CatId":null,"IsActive":false}]

Finally, my view page:

@(Html.Kendo().Grid<NextGen.Models.Word>
    ()
    .Name("grid")
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(15)
        .Read(read => read.Action("Read", "Words"))
    )
    .Columns(columns =>
    {
        columns.Bound(c => c.WordName);
        columns.Bound(c => c.PartOfSpeech);
    })
    .Pageable()
    .Sortable()
)

I've seen some similar questions to this one, but most are using Javascript rather than Html helpers. Am I doing something dumb?

Answer 1

I found an alternative way to get around the circular reference problem I was having. Basically, the answer is here: A circular reference was detected while serializing an object of type 'SubSonic.Schema .DatabaseColumn'.

For people with the same problem: I took the two properties I needed - WordName and PartOfSpeech, and passed only those attributes to the toDataSource function Kendo provides.
My new read function looks like this:

        public ActionResult Read([DataSourceRequest] DataSourceRequest request)
    {
        var items = db.Words.Select(w => new WordL{
            WordName = w.WordName,
            PartOfSpeech = w.PartOfSpeech
        });

        return Json(items.ToDataSourceResult(request));
    }

where WordL is a model with just PartOfSpeech and WordName attributes, rather than all the attributes of my class.

Answer 2

It is probably because you are not using 2 methods in your controller. While your page view is first ActionResult you should use second one as in the grid as you did in your example. I hope it is obvious.

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

public ActionResult Read([DataSourceRequest] DataSourceRequest request)
{
    var items = db.Words.Take(1).ToList();
    //this code was necessary to get the correct JSON result
    JsonSerializerSettings jsSettings = new JsonSerializerSettings();
    jsSettings.ReferenceLoopHandling = ReferenceLoopHandling.Ignore;
    var converted = JsonConvert.SerializeObject(items, null, jsSettings);
    return Content(converted);    
}