Server side paged groups with ajax jquery remote data end point

0 Answers 51 Views
Grid
Don
Top achievements
Rank 1
Don asked on 04 Jan 2022, 06:59 PM | edited on 04 Jan 2022, 11:03 PM

I've tried to get this working using this aspnetmvc-ajax sample code from telerik found here.

https://demos.telerik.com/kendo-ui/grid/grouppaging

I'm using jquery ajax restful api for the remote data endpoint and I am returning the response in the exact format as shown in the above example but it doesn't work.

After the grid loads, an "undefined" is displayed as the first row in the grid despite the data from the ajax data call returning the data in the exact same format as shown in the above example.

I also added the code for the sample into my project and I tried a local data source in order to rule out jquery ajax as remote api being the problem with the same response data format as the sample code to see if the server side group paging is anyway dependent on the datasource.type being aspnetmvc.  In this case I also get the same error as seen in my jquery ajax grid with remote group paging.

Has anyone been able to get group paging for a grid using a custom function for the transport read (jquery ajax) configuration?

 

Can anyone confirm whether it should work for this use case? And does anyone have an example?

Thanks in advance and appreciate your help.

Best,

Don

 

Nikolay
Telerik team
commented on 07 Jan 2022, 02:25 PM

Hi Don,

There is an article dedicated to Group Paging Using with Remote Data:

The "aspnetmvc-ajax" type is specific and is used so the dataSource can bind to the response generated by the ToDataSourceResult() method. It helps you use the ASP.NET MVC or Core server-side extensions which perform all the data operations and group paging out of the box. 

When using the "aspnetmvc-ajax" type it is important to include the kendo.aspnetmvc.js file to allow for the DataSourceRequest to be usable for the web application.

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewBag.Title - My Telerik MVC Application</title>
    <link href="@Url.Content("~/Content/kendo/2021.2.616/kendo.bootstrap-v4.min.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/bootstrap.min.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/kendo/2021.2.616/jquery.min.js")"></script>
    <script src="@Url.Content("~/Scripts/kendo/2021.2.616/angular.min.js")"></script>
    <script src="@Url.Content("~/Scripts/kendo/2021.2.616/jszip.min.js")"></script>
    <script src="@Url.Content("~/Scripts/kendo/2021.2.616/kendo.all.min.js")"></script>
    <script src="@Url.Content("~/Scripts/bootstrap.min.js")"></script>
    <script src="https://kendo.cdn.telerik.com/2021.2.616/js/kendo.aspnetmvc.min.js"></script>
</head>

Hope this helps.

No answers yet. Maybe you can help?

Tags
Grid
Asked by
Don
Top achievements
Rank 1
Share this question
or