Grid doesn't display data

[Scott]

This is driving me nuts. I have a drop-down that onChange sends a query for the grid's data. I can see in my debugger that it is hitting my method in my controller and can see that the query actually returns rows but I get nothing showing up in the grid.

And before you ask, I did the camel-case serializer fix that is described many times over in these threads

 

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

                });

 

but it didn't help. I verified that the json looks correct by hitting the controller method directly and the fields are in PascalCase. I dumbed the grid down as much as possible to try to troubleshoot but no luck and I get no errors in my js console. Help! Here's my code

 

  @(Html.Kendo().Grid<Data.Model.Client>()
                .Name("grid")
                .Columns(columns => {
                    columns.Bound(e => e.ClientID);
                    columns.Bound(e => e.ClientName);
                    columns.Bound(e => e.ClientStatus);
    
                })
                .Sortable()
                .Pageable()
                .Scrollable()
                .DataSource(dataSource => dataSource
                    .Ajax()
                    .PageSize(10)
                    .Read(read => read.Action("GetClients", "Home")
                    .Data("filterGrid"))
                )
                
            )
            <script>
                function filterGrid() {
                    return {
                        stateId: $("#ddlStates").val()
                    };
                }
    
               
        </script>

[Nikolay]

Hi Scott,

I have replied to your other thread on the same topic but I will post here as well so others can benefit from it.

The Grid declaration is correct and the issue is most likely with the returned data from the controller. The grid expects a JSON as a response to its read request, however, the data must be converted to a Kendo.Mvc.UI.DataSourceResult object first. This is done using the ToDataSourceResult extension method.

I would recommend checking the below Ajax Binding article as a guideline on how to configure the Grid HtmlHelper extension for Ajax binding:

• https://docs.telerik.com/aspnet-core/html-helpers/data-management/grid/binding/ajax-binding

Let me know if you have further questions.

Regards,
Nikolay
Progress Telerik