Grid paging with custom api

1 Answer 20 Views
Data Source Grid
Maurizio
Top achievements
Rank 1
Maurizio asked on 21 Aug 2021, 06:59 AM

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: [....]
            });

1 Answer, 1 is accepted

Sort by
0
Georgi Denchev
Telerik team
answered on 25 Aug 2021, 10:34 AM

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

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Tags
Data Source Grid
Asked by
Maurizio
Top achievements
Rank 1
Answers by
Georgi Denchev
Telerik team
Share this question
or