asp-net Telerik grid not getting populated

Question

In a asp.net MVC page i have this grid

    <div>
    @(Html.Kendo().Grid<KerberosTest.Models.Bench>()
.Name("grid")
.Columns(columns =>
{
    columns.Bound(p => p.id);
    columns.Bound(p => p.name);
})
.Pageable()
.Sortable()
.Scrollable()
.Filterable(ftb => ftb.Mode(GridFilterMode.Row))
            //.HtmlAttributes(new { style = "height:430px;" })
.DataSource(dataSource => dataSource
    .Ajax()
    .PageSize(20)
    //.ServerOperation(true)
    .Read(read => read.Action("GetBenches", "home"))
 )
    )
</div>

and my data comes from this method in my HomeController.cs

    public async Task<ActionResult> GetBenches()
    {
        BenchesService bService = new BenchesService();
        List<Bench> obj = await bService.getBenches();
        Console.WriteLine("ALAL");

        var action = Json(obj.Select(s => new Bench
        {
            id = s.id,
            bookable = s.bookable,
            name = s.name,
            seatsCount = s.seatsCount,
            zone = s.zone

        }).Distinct(), JsonRequestBehavior.AllowGet);

        return action;
    }

that calls this other one

        public async Task<List<Bench>> getBenches()
    {
        List<Bench> jsonOBJ = new List<Bench>();

        try
        {
            using (var client = new HttpClient())
            {
                client.BaseAddress = Constants.baseAddress;
                client.DefaultRequestHeaders.Accept.Clear();
                client.DefaultRequestHeaders.Accept.Add(new MediaTypeWithQualityHeaderValue("application/json"));
                client.DefaultRequestHeaders.Add("Authorization", "Bearer " + Constants.token);
                client.DefaultRequestHeaders.Add("apiKey", Constants.apiKey);


                // New code:
                HttpResponseMessage response = await client.GetAsync("bench/list");
                if (response.IsSuccessStatusCode)
                {
                    Stream sResposta = await response.Content.ReadAsStreamAsync();
                    string res = new StreamToStringcs().ConvertStream(sResposta);

                    jsonOBJ = JsonConvert.DeserializeObject<List<Bench>>(res, new JsonSerializerSettings { NullValueHandling = NullValueHandling.Ignore });
                }
            }
        }
        catch (Exception e)
        {
            Console.WriteLine(e.Message);
        }

        return jsonOBJ;
    }

and finally here is my Bench class

    public class Bench
{
    public int id { get; set; }
    public string name { get; set; }
    public bool bookable { get; set; }
    public int zone { get; set; }
    public int seatsCount { get; set; }
    //public type bookedSeats {get;set;}
}

my problem is that my grid show any rows. it shows a loading bar when for a while then it stays empy. Using a breaking point i can see that the List obj variable gets filled with 350 Bench.

what am i missing?

Answer 1

Try adding the ToDataSourceResult() extension to your GetBenches result

public async Task<ActionResult> GetBenches([DataSourceRequest] DataSourceRequest request)
{
    BenchesService bService = new BenchesService();
    List<Bench> obj = await bService.getBenches();
    Console.WriteLine("ALAL");

    return Json(obj.Select(s => new Bench
        {
            id = s.id,
            bookable = s.bookable,
            name = s.name,
            seatsCount = s.seatsCount,
            zone = s.zone

        }).Distinct().ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
}

This creates a json object with a Data property that contains your data. I believe the MVC helper grid looks for this Data property.

You may need to add using Kendo.Mvc.Extensions; to your controller if you dont have it already.

BTW [DataSourceRequest] DataSourceRequest request has the parameters you need for doing paging and sorting so you have to include that as a parameter to your ActionResult if you want to use server side paging and filtering. Not sure if it's important if you're doing this on the client