Grid is not binding using Ajax

Question

I'm doing some simple testing of the Kendo MVC Grid and I'm unable to get it to bind using Ajax.

Here's my code:

The JSON call in my controller:

[HttpGet]
public ActionResult GetRaceCarsAjax([DataSourceRequest]DataSourceRequest request)
{
    IList<RaceCar> myRaceCars = GetRaceCars();
    return Json(myRaceCars.AsQueryable(),JsonRequestBehavior.AllowGet);
}

protected IList<RaceCar> GetRaceCars(){
    IList<RaceCar> myCollection = new List<RaceCar>();
    var myEntity = new RaceCar
    {
        Color = "Red",
        Name = "Corvette",
        Count = 2
    };
    myCollection.Add(myEntity);
    // more cars inserted - 16 in all

    return myCollection;
}

The Kendo MVC statement:

@(Html.Kendo().Grid<RaceCar>() // Specify the type of the grid
    .Name("Grid")
    .AutoBind(true)
    .Columns(columns =>
    {
        columns.Bound(p => p.Name);
        columns.Bound(p => p.Color);
        columns.Bound(p => p.Count);
    })
    .Pageable()
    .DataSource(dataSource => dataSource
        .Ajax()
        .Read(read => read.Action("GetRaceCarsAjax", "Grid").Type(HttpVerbs.Get)))
)

The Model:

public class RaceCar
{
    public string Name { get; set; }
    public string Color { get; set; }
    public int Count { get; set; }
}

My Grid is calling GetRaceCarsAjax and returning all the results, as follows:

[{"Name":"Corvette","Color":"Red","Count":2},{"Name":"Mini","Color":"Stars \u0026 Stripes","Count":1
},{"Name":"Masarati","Color":"Neon","Count":2},{"Name":"Lamborghini","Color":"Silver","Count":5},{"Name"
:"Miata","Color":"Black","Count":6},{"Name":"Sky","Color":"Blue","Count":1},{"Name":"TR7","Color":"Green"
,"Count":1},{"Name":"Dodge Charger","Color":"Yellow","Count":1},{"Name":"Gremlin","Color":"Fuschia","Count"
:0},{"Name":"Old Style Ford Taurus","Color":"Tan","Count":1},{"Name":"\u002767 Mustang","Color":"Matte
 Black","Count":1},{"Name":"Airplane","Color":"Invisible","Count":1},{"Name":"Chevy","Color":"Rusty"
,"Count":98},{"Name":"Jaguar","Color":"Red","Count":3},{"Name":"Aston Martin","Color":"Blue","Count"
:1},{"Name":"Porsche","Color":"Green","Count":8}]

But the grid is empty.

I am using the same grid with Server Binding and it works just fine.

Nic · Accepted Answer · 2015-05-21 22:57:10Z

1

You need to return a DataSourceResult as JsonResult to format the Json properly.

[HttpGet]
public JsonResult GetRaceCarsAjax([DataSourceRequest]DataSourceRequest request)
{
    var myRaceCars = GetRaceCars();
    return Json(myRaceCars.ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
}

Additional advice - If you query something from the database, ensure ToDataSourceResult(request) executes your query, this will improve your performance.

For example:

protected IQueryable<RaceCar> GetRaceCars() 
{
    IQueryable<RaceCar> myCollection = null;

    using (var entity = new MyEntities())
    {
        myCollection = entity.RaceCar.Where(w => w.Something == "something"); // This doesn't call the database yet
    }
    return myCollection;
}

edited May 21, 2015 at 22:57

answered May 21, 2015 at 22:43

Nic

13k20 gold badges85 silver badges107 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Grid is not binding using Ajax

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related