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":"(514)260-8227","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":"(514)451-7657","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":"(514)451-7657","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":"(438)403-2806","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":"(450)793-2578","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
{"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":"(514)260-8227","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":"(514)451-7657","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":"(514)451-7657","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":"(438)403-2806","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":"(450)793-2578","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