Kendo Grid has correct JSON but data not showing up

0
votes

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?

2
asp.net-mvcjsonkendo-grid
I think the /"s are a big problem. It's double serializing my Json, but I can't figure out how to get rid of it. I need to pass in JSONSerializer settings to avoid reference loops, but I also can't return just the convert value. Is there a way I can pass in JSONSerializer settings to the JSON call? – hubatish
Got a great answer to that comment, though the overall code still doesn't work. – hubatish

2 Answers

1
votes

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.

0
votes

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);    
}