Ndtyjky

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

}

Only need change

pageable: 'true',

pageSize: 10,

serverPaging: 'true',

to

pageable: true,

pageSize: 10,

serverPaging: true,

work for my with your code