Kendo Grid not binding to data (using razor page)

Question

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.

Desichele · Accepted Answer · 2024-08-26 04:00:29Z

0

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));
        }

edited Aug 26, 2024 at 4:00

answered Aug 26, 2024 at 3:54

Desichele

3992 gold badges6 silver badges16 bronze badges

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

2 Comments

Aleksandar Over a year ago

The Ajax() configuration option of the DataSource formats the request filter, sort, group, page, page size, and aggregates in a specific way and requires you to configure a [DataSourceRequest]DataSourceRequest request parameter in the action so they are parsed. There is also the need to extend the response with a call of the .ToDataSourceResult(). Calling this extension method will format the returned data in the format expected by the Grid (and other Telerik data-bound components) automatically, i.e convert it to a DataSourceResult object.

Desichele Over a year ago

Thanks for the explanation Aleksandar. Appreciate it.

Collectives™ on Stack Overflow

Kendo Grid not binding to data (using razor page)

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related