[SOLVED] Kendo Grid not binding to data (using razor page)

Kendo Grid not binding to data (using razor page)

New to Telerik Kendo and running into a stupid scenario but has been driving me nuts. No matter what I do the kendo grid doesnt populate data at all. below is the Razor page that displays testdata in a kendo grid:

@model IEnumerable<Mynamespace.Models.MyModel>
@addTagHelper *, Kendo.Mvc

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>MyTitle</title>
    <link href="https://kendo.cdn.telerik.com/2023.1.301/styles/kendo.default-v2.min.css" rel="stylesheet" />
    <script src="https://kendo.cdn.telerik.com/2023.1.301/js/jquery.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2023.1.301/js/kendo.all.min.js"></script>
</head>
<body>
    <div>
        @(Html.Kendo().Grid<Mynamespace.Models.MyModel>()
            .Name("MyKendoGrid")
            .Columns(columns =>
            {
                columns.Bound(c => c.Name).Title("Full Name");
                columns.Bound(c => c.Address).Title("Address");
                columns.Bound(c => c.Age).Title("Age");
            })
            .DataSource(dataSource => dataSource
            .Ajax()
            .Read(read => read.Action("GetData", "MyData"))

.Model(model =>
{
    model.Field(c => c.Name);
    model.Field(c => c.Address);
    model.Field(c => c.Age);
})
            )
            .HtmlAttributes(new { style = "height: 550px;" })
            )
    </div>
</body>
</html>

and here is the Controller:

namespace Mynamespace.Controllers
{
    public class MyDataController : Controller
    {
        public IActionResult Index()
        {
            return View();
        }
        [HttpGet]
        public IActionResult GetData() {
            List<MyModel> data = new()
            {
                new() { Name= "testName1", Address= "Address 1", Age= "32"},
                new() { Name= "testName1", Address= "Address 2", Age= "12" },
                new() { Name= "testName1", Address= "Address 3", Age= "34" },
            };
            return Json(data);
        }
    }
}

and here is the model :

namespace Mynamespace.Models
{
    public class MyModel
    {
        public string? Name{ get; set; }
        public string? Address{ get; set; }
        public decimal Age{ get; set; }
    }
}

Also here is the standard controller routing :

app.MapControllerRoute(
    name: "default",
    pattern: "{controller=Home}/{action=Index}/{id?}");

Tried populating MyKendoGrid with the test data filled inside the Controller action GetData. But failed to do so. I can debug and see in the browser that GetData() does return the json list but razor page doesnt populate 'em.

Would appreciate if anybody can help out or Provide another way to impplement.

Thanks a lot.

Solution

Added using Kendo.Mvc.Extensions And changing method to this format resolved the issue. Dont know how !!


          public IActionResult GetData([DataSourceRequest] DataSourceRequest request) {
            List<MyModel> data = new()
            {
                new() { Name= "testName1", Address= "Address 1", Age= "32"},
                new() { Name= "testName1", Address= "Address 2", Age= "12" },
                new() { Name= "testName1", Address= "Address 3", Age= "34" },
            };
            return Json(data.ToDataSourceResult(request));
        }