Kendo Grid Data Not Binding

Question

I'm trying to bind a Kendo Grid with data from SQL. The table appears but is not populated with any data. I cannot figure out what is wrong. I appreciate all help!

This is my Controller:

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

[HttpGet]
public ActionResult Test_Read([DataSourceRequest] DataSourceRequest request)
{
    return Json(GetCountries().ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
}

[NonAction]
private IQueryable<CountryViewModel> GetCountries()
{
    return from user in database.Countries
           select new CountryViewModel
           {
               Id = user.Id,
               Name = user.Name,
           };
}

This is my ViewModel:

public class CountryViewModel
{
    public int Id { get; set; }
    public string Name { get; set; }
}

This is the model auto generated by Entity Model Data Wizard:

public partial class Country
{
    public Country()
    {
        this.Cities = new HashSet<City>();
        this.Regions = new HashSet<Region>();
    }

    public int Id { get; set; }
    public string Name { get; set; }
    public System.DateTime CreatedDate { get; set; }

    public virtual ICollection<City> Cities { get; set; }
    public virtual ICollection<Region> Regions { get; set; }
}

This is the View:

@(Html.Kendo().Grid<Traveler.Models.CountryViewModel>()
      .Name("grid")
      .DataSource(dataSource => dataSource
          .Ajax()
          .PageSize(20)
          .Model(model => model.Id(p => p.Id))
          .Read(read => read.Action("Test_Read", "Home").Type(HttpVerbs.Get))
       )

      .Columns(columns =>
      {
          columns.Bound(user => user.Id).Width(100);
          columns.Bound(user => user.Name).Width(100);
      })
      .Pageable()
      .Sortable()
      .ColumnMenu()
      .Resizable(resize => resize.Columns(true))
      .Scrollable()
      .HtmlAttributes(new { style = "height:100%;" })
      .Filterable()
      .Reorderable(reorder => reorder.Columns(true))
      .ColumnMenu()
      .Pageable(p => p.Enabled(true).Input(true).PageSizes(new[] { 10, 20, 50 }).Refresh(true))
)

couple of questions 1) Is the controller being hit first of all? 2) If it is what data is it returning back (have you checked in fiddler or developer tools etc)? — David Shorthose
There are two Pageable()s and ColumnMenu()s in your grid. Remove the extra ones. — ataravati

Deepesh Deepesh · Accepted Answer · 2015-08-26T11:13:04

@(Html.Kendo().Grid<Traveler.Models.CountryViewModel>()
      .Name("grid")
     .EnableCustomBinding(true)
      .DataSource(dataSource => dataSource
          .Ajax()
          .PageSize(20)
          .Read(read => read.Action("Test_Read", "Home"))
       )
      .Columns(columns =>
      {
          columns.Bound(user => user.Id).Width(100);
          columns.Bound(user => user.Name).Width(100);
      })
      .Pageable()
      .AutoBind(true)
      .Sortable()
      .Resizable(resize => resize.Columns(true))
      .Scrollable()
      .Filterable()
      .Reorderable(reorder => reorder.Columns(true))
)

I have changed Some code , Check if this will help.

Kendo Grid Data Not Binding

1 Answers