Grid not binding in Ajax mode

1 Answer 303 Views

Grid

Rey asked on 25 Oct 2022, 07:34 PM

My grid is not binding whenever a read is made. I programmed it so that when the user presses a button, it gathers search parameters and calls the read() method. It fetches the data and I get results successfully, but it doesn't update in the UI, no loading graphic or anything. I can see the grid but it has no data. I simplified the fields and columns to only one to see if there was an error in the naming but no luck. No console errors. I used tag helper and HTML helper, none work. Below is my code, simplified for this post.

Razor Page

<head>
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link href="~/lib/kendo-ui/styles/kendo.bootstrap-main.min.css" rel="stylesheet" type="text/css" />
<script src="~/lib/kendo-ui/js/jquery.min.js"></script>
<script src="~/lib/kendo-ui/js/jszip.min.js"></script>
<script src="~/lib/kendo-ui/js/kendo.all.min.js"></script>
<script src="~/lib/kendo-ui/js/kendo.aspnetmvc.min.js"></script>
</head>

<body>
@inject Microsoft.AspNetCore.Antiforgery.IAntiforgery Xsrf
@Html.AntiForgeryToken()
<button type="button" id="btnSearch" onclick="SearchPosInfo()">Search</button>
    <kendo-grid name="grdResults" auto-bind="false">
        <datasource type="DataSourceTagHelperType.Ajax" page-size="25">
            <schema>
                <model id="piid">
                    <fields>
                        <field name="piid" type="number"></field>
                    </fields>
                </model>
            </schema>
            <transport>
                <read url="Index?handler=Read" data="SearchParams" />
            </transport>
        </datasource>
        <columns>
            <column field="piid"></column>
        </columns>
        <sortable enabled="true" />
        <pageable button-count="5" page-sizes="new int[] { 10, 25, 50, 100 }">
        </pageable>
    </kendo-grid>
.
.
.
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
</body>

function SearchParams() {
    var searchParams = {
        pd: $("#txtNumber").val()
    }
    var ext = $.extend(true, {}, kendo.antiForgeryTokens(), searchParams);

    return ext;
}

function SearchPosInfo() {
    $("#grdResults").data("kendoGrid").dataSource.read();
}

Response

{"data":[{"piid":37133},{"piid":37525},{"piid":48314},{"piid":56042}],"total":4,"aggregateResults":null,"errors":null}

1 Answer, 1 is accepted

Accepted

answered on 28 Oct 2022, 04:07 PM

Hi Rey,

Thank you for sharing your code and the server response of the Grid's Read request.

The issue arises because data-bound Telerik UI components like the Grid depend on Pascal case-formatted response from the server. However, the default casing for JSON strings in ASP.NET Core is the Camel case. If the serializer changes the casing to Camel, the data-bound widget cannot display the data correctly.

To configure the application to serialize JSON strings in PascalCase add the following code to the ConfigureServices method located of the project:

public void ConfigureServices(IServiceCollection services)
{
    ...
    services
            .AddControllersWithViews()
            .AddJsonOptions(options => 
                options.JsonSerializerOptions.PropertyNamingPolicy = null);

    // Add the Kendo UI services to the services container.
    services.AddKendo();
}

For more information on the topic please refer to our Json Serialization Documentation article.

I remain open if further issues on the topic arise.

Regards,
Stoyan
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Rey

commented on 28 Oct 2022, 04:59 PM

Thank you, this worked.