Kendo ajax grid is not showing data that it is receiving

Question

I cannot get my grid to render the data it's retrieving. I have the following code in my controller, and verify it gets returned by watching the network tab in the browser:

 [HttpPost, HttpGet]
    public ActionResult SavedSettings_Read([DataSourceRequest] DataSourceRequest request)
    {
        var ret = DBFunctions.SavedStringInfos.ToDataSourceResult(request);
        //return Json( ret); made everything lowercase?
        return JsonConvert.SerializeObject(ret);//newtonsoft

    }

My grid is defined like this:

    Html.Kendo().Grid<SavedStringInfo>()
        .Name("grid")
        .Pageable()
        .Sortable()
        .Filterable()
        .Scrollable()
        .Editable(editable => editable.Mode(GridEditMode.InLine))
        .DataSource(data =>
        {
            data.Ajax()
                .PageSize(20)

                .Model(x => x.Id(p => p.IPAddress))
                .Create("SavedSettings_Create", "Home")
                .Read("SavedSettings_Read", "Home")
                .Update("SavedSettings_Update", "Home")
                .Destroy("SavedSettings_Destroy", "Home");
        })

        .HtmlAttributes(new { style = "height:430px;" })
        .ToolBar(t => t.Create().Text("Add New Device(s)"))
        .Columns( columns =>
        {
            columns.Command(x => { x.Edit(); x.Destroy(); });

            columns.Bound(m => m.StreamTo).Title("Stream To").Width(120);
            columns.Bound(m => m.StringName).Title("String Name").Width(200);
            columns.Group(g =>
            {
                g.Title("Channels");
                g.Columns(gc =>
                {
                    gc.Bound(m => m.StartChannel).Title("Start").Width(100);
                    gc.Bound(m => m.EndChannel).Title("End").Width(100);
                });
            });
            columns.Bound(m => m.DisableFrameLimiter).Title("DFL").Width(100);
            columns.Bound(m => m.IPAddress).Title("IP Address").Width(160);
            columns.Bound(m => m.MacAddress).Title("MAC Address)").Width(160);
            columns.Group(g =>
            {
                g.Title("Aspect Ratio");
                g.Columns(gc =>
                {
                    gc.Bound(m => m.XYAspectRatio).Title("XY").Width(100);
                    gc.Bound(m => m.XZAspectRatio).Title("XZ").Width(100);
                });
            });
        })
    )

I have also verified the grid's datasource is actually empty by this: $("#grid").data("kendoGrid")._data as well as $("#grid").data("kendoGrid").dataItems() and inspecting the tree.

I'm apparently missing an important setting but I don't know what. Here's the returned json (captured in fiddler)

{
"Data": [
   {
     "ID": 1,
     "StringName": "Line in bedroom",
     "StartChannel": 1,
     "IPAddress": "192.168.4.166",
     "MacAddress": "a8:03:2a:3e:76:95",
     "StreamTo": true,
     "XYAspectRatio": 0.8,
     "XZAspectRatio": 0,
     "DisableFrameLimiter": true
   },
   {
     "ID": 2,
     "StringName": "Right poles",
     "StartChannel": 1,
     "IPAddress": "192.168.4.36",
     "MacAddress": "a4:e5:7c:c4:75:01",
     "StreamTo": true,
     "XYAspectRatio": 0.45455,
     "XZAspectRatio": 11.36364,
     "DisableFrameLimiter": true
   },
   {
     "ID": 3,
     "StringName": "Left poles",
     "StartChannel": 1,
     "IPAddress": "192.168.4.37",
     "MacAddress": "a4:e5:7c:5e:6f:f9",
     "StreamTo": true,
     "XYAspectRatio": 0.5,
     "XZAspectRatio": 11.36364,
     "DisableFrameLimiter": true
   }
 ],
 "Total": 3,
 "AggregateResults": null,
 "Errors": null
}

Any ideas?

Answer 1

If someone can chime in and explain why this fixed my problem, I'll change my accepted answer to theirs. Inside my Program.cs, where you configure your Web Application Builder, I added a configuration parameter to NewtonSoft to use

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddKendo();
builder.Services.AddControllersWithViews()
            .AddNewtonsoftJson(options =>
            {
                options.UseMemberCasing();
            }
        );

var app = builder.Build();

Then, I made the following change to my Controller

 public ActionResult<string> SavedSettings_Read([DataSourceRequest] DataSourceRequest request)
    {
        var ret = DBFunctions.SavedStringInfos.ToDataSourceResult(request);
        return Json(ret);
    }

Now, the sharp-eyed among you may see why this is confusing to me. Json doesn't belong to NewtonSoft, and the serialize object call didn't work with the change in Program.cs, and both changes were required to fix the issue. If anyone can explain WHY this fixes it, points to you. Until then, I hope this helps someone else who is stuck.