I'm using the Kendo Grid with a Vue project. I'm using server side pagination. The first page works great, showing the number of pages, total number of records, and the first set of rows retrieved from the server. When clicking page 2 (or page 3, etc), the grid correctly adjusts the URL and hits the server. I can see the returned rows in the change() grid event, but the grid does not show the retrieved rows. What am I doing wrong? Do I need to tell the grid to refresh after the requestEnd() event?
This grid is defined thusly:
<kendo-grid ref="gridComponent"
:data-source="quotes"
:auto-bind="true"
:selectable='true'
:sortable='true'
:resizable='true'
:pageable-page-size="pageSize"
:pageable-page-sizes='true'
:pageable-button-count='5'
:reorderable='true'
:no-records="noRecords"
v-on:databinding="onDataBinding"
v-on:databound="onDataBound"
v-on:change="rowSelected"
:sort="sortFilter">
Here are the computed "quotes" and "queryString" definitions.
computed: {
quotes: function () {
// eslint-disable-next-line
// return new kendo.data.DataSource({
// data: this.localDataSource
// })
let vue = this
// eslint-disable-next-line
return new kendo.data.DataSource({
transport: {
read: {
url: this.queryString,
beforeSend: function (xhr) {
// xhr.setRequestHeader('Access-Control-Allow-Origin', '*')
xhr.setRequestHeader('Authorization', Constants.AUTH_KEY)
},
type: 'GET',
dataType: 'json'
}
},
schema: {
total: function (response) {
let records = 0
if (response && response.length > 0) {
records = response[0].Count
}
return records
}
},
pageable: 'true',
pageSize: 10,
serverPaging: 'true',
// testing the change event handler
change: function (e) {
let data = this.data()
console.log(data)
},
requestStart: function () { vue.loading = true },
requestEnd: function () { vue.loading = false }
})
},
queryString () {
var me = this.$store.getters.user
var agentNumber = me.userName
var searchURLstring = `${Constants.SEARCH_URL}?AgentNumber=${agentNumber}`
if (this.currentPolicyNo) {
searchURLstring += `&QuoteNumber=${this.currentPolicyNo}`
}
if (this.currentInsuredName) {
searchURLstring += `&InsuredName=${this.currentInsuredName}`
}
if (this.currentAddr1) {
searchURLstring += `&Address=${this.currentAddr1}`
}
if (this.currentSortField) {
searchURLstring += `&sortField=${this.currentSortField}`
searchURLstring += `&sortDirection=${this.currentSortField}`
}
searchURLstring += `&SearchScope=${this.searchScope}`
return searchURLstring
}
