Grid paging with custom api

[Maurizio]

Hello,
I need to use a prebuild api for load paged data on telerik grid.

For do that in the DataSource.Transport.Ready(options) function I need to retrieve the PageNumber and PageSize value but the options.data.pageSize  and options.data.page result undefined

Also when I receive the response I need to set the new loaded page information (loaded page number) to the grid.

The code below works (retrieve and display data) but in the request url the page paramenter are undefined. In the botton page bar restult "NaN - NaN di 47 elementi"

Where I found the structure of the options parameter of the read function ? Also where I found the object expected by the option.success function?

gridSource = new kendo.data.DataSource({
                transport: {
                    serverPaging: true,
                    serverSorting: true,
                    serverFiltering: true,
                    pageSize: 50,
                    read: function (options) {
                        console.log(JSON.stringify(options)) // show {"data":{}}
                        let u = "<My URL>?search=" + encodeURIComponent(<SearchValue>) + "&pnum=" + encodeURIComponent(options.data.page) + "&psize=" + encodeURIComponent(options.data.pageSize);
                        const instance = axios.create({
                            baseURL: 'my url',
                            timeout: 1000,
                            headers: { 'Authorization': 'Bearer  Token' }
                        });
                        instance.get(u)
                            .then((response) => {
                                let res = response.Data
                                // res is
                               // {"PageNumber":1,"PageSize":50,"HaveOtherPage":false,"TotalRecord":47,"Data":[...]}

                              // options.success(res)  run the catch function and return an error who is empty
                              
                               options.success(res.Data);
                            })
                            .catch((error) => {
                                alert("ERRORE");
                                options.error(error)
                            })

                    },
                    schema: {
                        data: function (response) {
                            return response.Data; 
                        },
                        total: function (response) {
                            return response.TotalRecord; 
                        }
                    }
                }
            });
            $('#grid').kendoGrid({
                dataSource: gridSource,
                scrollable: true,
                filterable: true,
                pageable: true,
                columns: [....]
            });

[Georgi Denchev]

Hello, Maurizio,

Thank you for the provided code snippet and details.

The problem occurs due to the structure of the DataSource configuration.

The serverOperations and pageSize options are part of the DataSource itself, not the transport configuration:

gridSource = new kendo.data.DataSource({
                serverPaging: true,
                serverSorting: true,
                serverFiltering: true,
                pageSize: 50,
                transport: {
                    read: function (options) {
                        console.log(JSON.stringify(options)) // show {"data":{}}

The options.success method expects the array of data returned by the server(it is configured correctly in the provided snippet).

The structure of the options.data object depends on the enabled serverOperations. Each operation showcases it's individual structure in the documentation. You can check the serverPaging API for an example.

With the currently enabled server operations, the data object is going to look like this:

Let me know if you have any questions.

Best Regards,
Georgi Denchev
Progress Telerik