MVC Kendo Grid not showing any data

Question

I'm using the Kendo UI Grid server-side wrapper and attempt to load some data into it from my model. The grid is rendering on the page but no data is being populated. I haven't used this grid that much so I think I'm just missing something with the ClientTemplate. I've reviewed the Kendo docs but haven't had any luck yet.

Here is my View:

<div id="dependents">
    <div id="grid">
        @(Html.Kendo().Grid<Enrollment.Models.DependentModel>()
              .Name("grid")
              .DataSource(dataSource => dataSource
                  .Ajax()
                  .Read(read => read.Action("KendoGrid", "Dependents"))
                  .ServerOperation(false)
              )
              .Columns(columns =>
              {
                  columns.Bound(d => d.MaskedSSN).ClientTemplate("<#: MaskedSSN #>").Title("SSN");
                  columns.Bound(d => d.FirstName).ClientTemplate("<#: FirstName #>").Title("First Name");
                  columns.Bound(d => d.LastName).ClientTemplate("<#: LastName #>").Title("Last Name");
                  columns.Bound(d => d.DateOfBirth).ClientTemplate("<#: DateOfBirth #>").Title("Date of Birth");
                  columns.Bound(d => d.Gender).ClientTemplate("<#: Gender #>").Title("Gender");
                  columns.Bound(d => d.DependentTypeId).ClientTemplate("<#: DependentTypeId #>").Title("Type");
              })
              .Pageable()
              .Sortable()
              .HtmlAttributes(new {style = "height: 400px;"})
              )
    </div>

Here is my Controller:

[HttpGet]
    public ActionResult KendoGrid([DataSourceRequest]DataSourceRequest request)
    {
        DataSourceResult result = UnitOfWork.Enrollment.Dependents.ToDataSourceResult(request,
            model => new DependentModel
            {
                SSN = model.SSN,
                FirstName = model.FirstName,
                LastName = model.LastName,
                DateOfBirth = model.DateOfBirth,
                Gender = model.Gender,
                DependentTypeId = model.DependentTypeId
            });
        return View(result);   
    }

Can someone please let me know what I'm missing or what I'm doing wrong? If you need more info just let me know. Like I said, the grid renders on the page with all the correct column headings and there should be one row but no data is present. It just says "No items to display" in it.

Thanks

Solution 1

(Just to expand on the previous answer for you)

The grid actually performs a post when it is reading in it's default state. You will see this when running fiddler. So by tagging this with Http.GET the action is never called. Unless you have told the read action to send a get request rather than a post request.

Try changing your controller to this:

public JsonResult KendoGrid([DataSourceRequest]DataSourceRequest request)
{
    DataSourceResult result = UnitOfWork.Enrollment.Dependents.ToDataSourceResult(request,
        model => new DependentModel
        {
            SSN = model.SSN,
            FirstName = model.FirstName,
            LastName = model.LastName,
            DateOfBirth = model.DateOfBirth,
            Gender = model.Gender,
            DependentTypeId = model.DependentTypeId
        });


    return Json(result,JsonRequestBehavior.AllowGet);   
}

Notice I have removed the http verb. You can apply this back afterwards if you want.

Solution 2

By just looking at the code, i assume the controller is returning a view (html + data).

You probably should return JSON.

change your return statement to.

return Json(result);

or

return Json(result, JsonRequestBehavior.AllowGet);

Comments

[Encryption]

I have tried this but when I return Json it doesn't render a grid. The page just displays the Json payload and nothing else. Thoughts?

[scartag]

if you are trying to access /Dependents/KendoGrid .. you'll get the json payload of course ..

[Encryption]

Which proves I'm getting data back but when I hit the ActionResult Index which does return View() the grid renders with nothing and my breakpoint on KendoGrid never fires.