My grid remain blank using Ajax Read

[Anton Swanevelder]

I am using Telerik 2021.1.422

I get a successful response using my url /shuttlelocation/get 

{"data":[{"accountId":933080580393897320,"routeLocationId":"26bcb4b3-0226-4de3-9e65-de878ade40e8","name":"Nelspruit","address1":"Address 1","address2":"Address 2","address3":"Address 3","address4":"Address 4","latitude":1000,"longitude":2000,"isActive":true,"createdOn":"2022-12-09T15:14:37.133289+02:00","userId":"972c57b3-2996-43f2-9336-890750dfa7f8","userName":"Anton Swanevelder"},{"accountId":933080580393897320,"routeLocationId":"0f9b89c2-4bcc-4744-a833-29a615e07417","name":"Potchefstroom","address1":"Potchefstroom","address2":"Bult","address3":"Shell Garage","address4":null,"latitude":1000.00,"longitude":2000.00,"isActive":true,"createdOn":"0001-01-01T00:00:00+00:00","userId":"972c57b3-2996-43f2-9336-890750dfa7f8","userName":"Anton Swanevelder"}],"total":2,"aggregateResults":null,"errors":null}

But my grid remain empty

There are no errors in the browser

Here is the Controller Get. The Repository returns an IQueryable

public JsonResult Get([DataSourceRequest] DataSourceRequest request)
    {
        var data = _routeLocations.GetLocationsBySearch(string.Empty);
        return this.Json(data.ToDataSourceResult(request));
    }

Here is the View

@(Html.Kendo().Grid<RouteLocationModel>()
        .Name("grid")
        .Columns(c => {
            c.Bound(p => p.Name);
            c.Bound(p => p.Address1);
            c.Bound(p => p.Latitude);
            c.Bound(p => p.IsActive);
            c.Command(c =>
            {
                c.Edit(); // The "edit" command will edit and update data items.
                c.Destroy(); // The "destroy" command removes data items.
            }).Title("Commands").Width(200);
        })
        .ToolBar(toolbar => toolbar.Create().Text("Add Location").HtmlAttributes(new { @class="" }))
        .Editable(editable => editable.Mode(GridEditMode.PopUp))
        .DataSource(d => d
            .Ajax()
            .Read(r => r.Action("Get", "ShuttleLocation"))
            .PageSize(50)
            .Model(model => {
                model.Id(p => p.RouteLocationId);
            })
        )
        .Pageable()
        .Sortable()
        .Filterable()
    )

[Mihaela]

Hi Anton,

According to the server response, it appears the issue is caused by the JSON Serialization. Basically, the Grid depends on Pascal case-formatted response from the server. However, the default casing for JSON strings in ASP.NET Core is the Camel case. When the data returned from the server is in Camel case, the Grid cannot display it correctly.

Would you please configure the default serialization, as per the examples in the documentation, and let me know if the Grid is rendered correctly at your end?

https://docs.telerik.com/aspnet-core/installation/json-serialization#configure-json-serialization-in-aspnet-core-6-and-the-minimal-hosting-model

Regards, Mihaela Progress Telerik

[Anton Swanevelder]

Thanks Maheala, appreciate the response but I still have no data in the grid. I am concerned that this will change all the JSON output formats which will affect my APIs. I guess using the WebAPI method might be a safer option. Thanks for the assistance.

My JSON after the hack.

{"Data":[{"AccountId":933080580393897320,"RouteLocationId":"6e4413b8-90bc-48aa-a79b-22fdc1eaacbc","Name":"Middelburg","Address1":"Middelburg","Address2":null,"Address3":null,"Address4":null,"Latitude":null,"Longitude":null,"IsActive":true,"CreatedOn":"2022-12-14T13:28:40.128226+02:00","UserId":"972c57b3-2996-43f2-9336-890750dfa7f8","UserName":"Anton Swanevelder"},{"AccountId":933080580393897320,"RouteLocationId":"eb5f1ce0-a983-4e49-aa27-cc2d0298b112","Name":"Milleys","Address1":"Milleys","Address2":null,"Address3":null,"Address4":null,"Latitude":null,"Longitude":null,"IsActive":true,"CreatedOn":"2022-12-14T13:28:30.497855+02:00","UserId":"972c57b3-2996-43f2-9336-890750dfa7f8","UserName":"Anton Swanevelder"},{"AccountId":933080580393897320,"RouteLocationId":"401cc45c-6d97-419b-b5e6-0e02e929a236","Name":"Nelspruit","Address1":"Nelspruit","Address2":null,"Address3":null,"Address4":null,"Latitude":null,"Longitude":null,"IsActive":true,"CreatedOn":"2022-12-14T13:28:03.869046+02:00","UserId":"972c57b3-2996-43f2-9336-890750dfa7f8","UserName":"Anton Swanevelder"},{"AccountId":933080580393897320,"RouteLocationId":"245b6939-5cb2-40c9-a6ca-cdc07b98cffe","Name":"Ngwodana","Address1":"Ngwodana","Address2":null,"Address3":null,"Address4":null,"Latitude":null,"Longitude":null,"IsActive":true,"CreatedOn":"2022-12-14T13:28:22.676171+02:00","UserId":"972c57b3-2996-43f2-9336-890750dfa7f8","UserName":"Anton Swanevelder"},{"AccountId":933080580393897320,"RouteLocationId":"a1b09ee9-5984-49c2-ab5e-6e65835c05e1","Name":"OR Tambo","Address1":"OR Tambo","Address2":null,"Address3":null,"Address4":null,"Latitude":null,"Longitude":null,"IsActive":true,"CreatedOn":"2022-12-14T13:28:47.462194+02:00","UserId":"972c57b3-2996-43f2-9336-890750dfa7f8","UserName":"Anton Swanevelder"}],"Total":5,"AggregateResults":null,"Errors":null}

[Mihaela]

Hi Anton, 

Thank you for your reply.

I have created a demo application based on your Grid configuration, and it appears that the data is loaded as expected at my end. You can find it attached. It would be of great help if you could modify it based on your setup to replicate the issue you are experiencing.

In terms of the JSON serialization, the following article describes how to specify and use multiple JSON serialization settings in ASP.NET Core application:

https://thomaslevesque.com/2022/09/19/using-multiple-json-serialization-settings-in-aspnet-core/

I hope that helps.