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

Answer 1

You know what? scartag and David Shorthose both are right. As far as I can get the problem you should return the view separately.

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

and then you try to do the ajax call for your grid.

.DataSource(dataSource => dataSource
              .Ajax()
              .Read(read => read.Action("GetKendoGridData", "Dependents"))
              .ServerOperation(false)
          )

[HttpGet]
public ActionResult GetKendoGridData([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
        });
    Json(result,JsonRequestBehavior.AllowGet);   
}

That should work. Or you may try the following. Never tried it before so I'm not sure about this;

return View(Json(result, JsonRequestBehavior.AllowGet));

Answer 2

(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.

Answer 3

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