Unable to use Backend pagination for KendoUI grid using jQuery

[Karan]

I am having hard time implementing server side pagination using Kendo UI Grid. I have a POST route `/worklist` that does return results when I supply params to it but I am unable to use it using the Kendo UI grid, I have searched a lot online but I cant find anything useful. Here is the result that is returned by the URL when I use Postman to supply params to it. 

    {"header":{"cursor":{"pageable":{"sort":null,"offset":0,"pageSize":5,"pageNumber":0},"page":0,"size":5,"numberOfElements":5,"totalElements":26315,"totalPages":5263},"filter":{"dobFrom":null,"dobTo":null,"inFacility":null,"inICURoom":null,"isICUBaby":null,"hasDocumentWaitingApproval":null,"hasNotification":null,"statusInfoCompleted":false,"statusToBeScreened":false,"statusConsentRequired":false,"statusSecondScreeningDateRequired":false,"statusSecondScreeningDateGiven":false,"statusAppointmentDateRequired":false,"statusAppointmentDateGiven":false,"statusReferredToENT":false,"statusFirstHourOfRehabGiven":false,"statusHaRecommended":false,"riskFactorCode":null,"facilityFollowingPatient":true,"readyToBeScreened":false,"restrictToMyPatientList":false}},"rows":[{"patientId":43101,"patientName":"LAUZON, FLORENCE","sex":"F","statusIcon":"KARAN_ICON","birthDate":"2014-07-22","decesedDate":null,"ramq":"LAUF14572215","mrn":"3009796","mrnFacilityCode":"CHUSJ","followUpFacilityCode":"CHUSJ","location":null,"age":"6 ans 4 mois","motherMaidenName":null,"phoneNumber":"[phone]","address":"1425 RUE UNION","city":"SAINTE-CATHERINE","postalCode":"J5C 1G8","status":"Réussite - fin du PQDSN","statusDate":"2014-08-12"},{"patientId":43102,"patientName":"BETOURNAY, KEITH","sex":"M","statusIcon":"KARAN_ICON","birthDate":"2014-08-18","decesedDate":null,"ramq":"BETK14081812","mrn":"3010677","mrnFacilityCode":"CHUSJ","followUpFacilityCode":"CHUSJ","location":null,"age":"6 ans 3 mois","motherMaidenName":null,"phoneNumber":"[phone]","address":"1735 RANG DUMAS","city":"ORMSTOWN","postalCode":"J0S 1K0","status":"Réussite - fin du PQDSN","statusDate":"2014-08-24"},{"patientId":43103,"patientName":"BETOURNAY, MARLY","sex":"F","statusIcon":"KARAN_ICON","birthDate":"2014-08-18","decesedDate":null,"ramq":"BETM14581814","mrn":"3010678","mrnFacilityCode":"CHUSJ","followUpFacilityCode":"CHUSJ","location":null,"age":"6 ans 3 mois","motherMaidenName":null,"phoneNumber":"[phone]","address":"1735 RANG DUMAS","city":"ORMSTOWN","postalCode":"J0S 1K0","status":"Réussite – surveillance en audiologie recommandée","statusDate":"2014-09-04"},{"patientId":43104,"patientName":"CLIMACO-DOS SANTOS, MATHEO","sex":"M","statusIcon":"KARAN_ICON","birthDate":"2014-07-21","decesedDate":"2015-03-24","ramq":"CLIM14072117","mrn":"3011417","mrnFacilityCode":"CHUSJ","followUpFacilityCode":"CHUSJ","location":null,"age":"6 ans 4 mois","motherMaidenName":null,"phoneNumber":"[phone]","address":"1448, RUE TARDIVEL","city":"LAVAL","postalCode":"H7K 0C2","status":"Décédé","statusDate":"2015-03-24"},{"patientId":43105,"patientName":"CHAGNON, BB DE SINDY","sex":"F","statusIcon":"KARAN_ICON","birthDate":"2014-08-04","decesedDate":null,"ramq":null,"mrn":"3011180","mrnFacilityCode":"CHUSJ","followUpFacilityCode":"CHUSJ","location":null,"age":"6 ans 4 mois","motherMaidenName":null,"phoneNumber":"[phone]","address":"72 DION","city":"SAINT-LIBOIRE","postalCode":"J0H 1R0","status":"Réussite – surveillance en audiologie recommandée","statusDate":"2014-09-04"}]}
This is the result when explicitly mention that I need the first five results , how can I display this through kendo UI Grid, I am using the `pageSize` and the `total` records variable but no luck. 
Here is my jQuery Kendo UI code

    $('#grid').kendoGrid({
            dataSource: {
                transport: {
                    read: function (options) {
                       $.ajax({
                           type: "POST",
                           contentType: "application/json",
                           url: "worklist",
                           dataType: 'json',
                           cache: false
                       })
                    }
                },
                serverPaging: true,
                timeout: 600000,
                pageSize: 10,
            },
            schema: {
                total: '26315',
                model: {
                    fields: {
                        patientName: { type: 'string'},
                        birthDate: { type: 'string'},
                        phoneNumber: { type: 'string'},
                        ramq: { type: 'string'},
                        address: { type: 'string'},
                        mrn: { type: 'string'}
                    }
                }
            },
            height: 550,
            filterable: true,
            sortable: true,
            pageable: true,
            columns: [
                {
                    field: "patientName",
                    title: 'Patient name'
                },
                {
                    field: "birthDate",
                    title: 'BirthDate'
                },
                {
                    field:"ramq",
                    title:"RAMQ"
                },
                {
                    field:"address",
                    title: "Address"
                },
                {
                    field:"mrn",
                    title: "MRN"
                }]
        });

    });

using this, in my network tab I keep getting a 404 Not found, apparently the library is not supplying any params to the request, however I do see the empty Kendo UI grid being displayed on the page.Thanks for the help

[Anton Mironov]

Hi Karan,

Thank you for the provided details.

I tried to replicate the issue locally. Achieving the same result is not easy without the full configuration. Is it possible for you to send me an isolated sample project back in this thread? Examining this project will let us replicate the issue locally and further troubleshoot it.

The following project from our git repository could be used as a template:

• https://github.com/telerik/kendo-examples-asp-net-mvc/tree/master/grid-crud

Looking forward to hearing back from you. I Will try my best to resolve this one quickly.

Kind Regards,
Anton Mironov
Progress Telerik

[Karan]

Hi Anton,

Thanks for your reply. Unfortunately it will really difficult for me to push the project to github, since a lot of work is confidential and also its a Java project and you will need to configure the project with our environment to run it. If there is an alternate way let me know and I can try that, but I would like to know if my Kendo jQuery code is correct or do I need to change something in my front end code or do I need to change the backend response so that it works properly with Kendo. Here is a screenshot of the empty grid just in case.

[Karan]

Just in case I am attaching the HTML page for your reference as well.

[Anton Mironov]

Hi Karan,

Thank you for providing the additional details.

It will be great if you could provide the full response from the server. Open the Network tab of the developer tools (press F12 in the browser), refresh the Kendo UI Grid, copy the response, and send it back to me in this thread. 

Furthermore, I notice that there is schema.data implemented. Does the response include a collection?

When using an Ajax request to get data from a Method in the Controller, this data should be used in the callback (in the success scope) for setting it out of the box. The following article demonstrates the implementation of Ajax CRUD operations:

• https://docs.telerik.com/kendo-ui/framework/datasource/crud#local-read-operations
  

Also, please double-check the route for the read method. It should include both the Controller name + slash (/) + the Method name. I believe the "worklist" actually represents the WorklistController. But the Method name should be added as well.

Feel free to correct me if I misunderstood something. Give the approaches above a try and send me the dev tools response if further assistance is needed.

Best Regards,
Anton Mironov
Progress Telerik