asp core kendo ui grid not showing data

Question

I have a kendo ui grid that uses the razor model to get its data. The grid is showing the correct column name, however, it is not showing any data. I can verify that data is being returned but the grid is not rendering it. I have followed this sample: Link to sample,

Below is the code for startup, controller and cshtml page.

The project is running on .NET Core 2.0 and the controller inherits from Microsoft.AspNetCore.Mvc.Controller, where the sample inherits from BaseController.

Any help appreciated! thanks in advance.

Startup.cs - Configure:

    // Configure Kendo UI
    app.UseKendo(env);

Startup.cs - ConfigureServices:

services.AddMvc()
        .AddJsonOptions(options =>
         options.SerializerSettings.ContractResolver = new DefaultContractResolver());

        //Add Kendo UI services to the services container
        services.AddKendo();

CONTROLLER:

 var response = _personService.LoadById(id).Result;
 return View(response);

CSHTML:

    @(Html.Kendo().Grid<Pet>(Model.Person.Pets)
                   .Name("Grid")
                   .Columns(columns =>
                   {
                       columns.Bound(p => p.Name).Title("Pet Name");
                   })
                   .Pageable()
                   .Sortable()
                   .Scrollable(scr => scr.Height(430))
                   .Filterable()
                   .DataSource(dataSource => dataSource
                       .Ajax()
                       .PageSize(20)
                       .ServerOperation(false)
                    )
                )

Answer 1

You need to specify the IEnumerable as the model of the view, then you can pass the data like this:

Controller Action:

    public IActionResult Index()
    {
        var petList = new List<Pet>();

        petList.Add(new Pet { Name = "Cat" });
        petList.Add(new Pet { Name = "Dog" });

        return View(petList);
    }

Index.cshtml

@model IEnumerable<TelerikAspNetCoreApp1.Models.Pet>

<div class="row">
    <div class="col-xs-18 col-md-12">
        @(Html.Kendo().Grid(Model)
            .Name("petgrid")
            .Columns(columns =>
            {
                columns.Bound(p => p.Name);
            })
            .Pageable()
            .Sortable()
            .Scrollable()
            .Filterable()
            .DataSource(dataSource => dataSource
                .Ajax()
                .PageSize(20)
            )
        )
    </div>
</div>