Почему Kendo Grid (Vue) не показывает данные для страниц 2, 3, 4? - PullRequest
Новая
       44

Почему Kendo Grid (Vue) не показывает данные для страниц 2, 3, 4?

0 голосов
/ 16 ноября 2018

Я использую Kendo Grid с проектом Vue.Я использую нумерацию на стороне сервера.Первая страница прекрасно работает, показывая количество страниц, общее количество записей и первый набор строк, полученных с сервера.При нажатии на страницу 2 (или на страницу 3 и т. Д.) Сетка корректно корректирует URL-адрес и попадает на сервер.Я могу видеть возвращенные строки в событии сетки change (), но сетка не показывает извлеченные строки.Что я делаю неправильно?Нужно ли указывать сетке обновляться после события requestEnd ()?

Эта сетка определяется следующим образом: 

<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">

Вот вычисленные определения "quotes" и "queryString".

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
}

1 Ответ

0 голосов
/ 12 декабря 2018

Нужно только изменить 

pageable: 'true',
pageSize: 10,
serverPaging: 'true',

на 

pageable: true,
pageSize: 10,
serverPaging: true,

работать на мой с вашим кодом

...