Grid not updating with page 2, 3, 4, etc.

[Brad]

I am using the Grid, but manipulating the URL with search parameters.  The first page works great, showing the total rows, number of pages, etc.  When navigating to other pages, I can see that the grid is successfully generating and hitting the URL.  Within the change() event, I can see the correct rows returned.  However, the grid is not updating with the new content.  Is there something else I need to do?

Here is the grid definition

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

computed: {
  quotes: function () {
    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()
      },
      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
  }
}

[Ianko]

Hello Brad,

The code used is mixing up both DataSource and Vue utilities and this is why you are experiencing such side effects with the Grid. Dynamically changing the URL of the DataSource is not required in this case. You can use the data option of the transport.read operation in order to add additional query strings. Having a static URL with the data option should fix that, but that depends on the data that is fetched back and how queries are processed. 

If that option does not solve things, I suggest you to prepare a simple, locally runnable example so that I could examine it and have a better idea of what is going on with the setup here. 


Regards,
Ianko
Progress Telerik

[Brad]

Ianko,

Sadly, your recommendation yields the exact same behavior.  The first page displays correctly; subsequent pages receive the data but do not refresh the grid.  I have a project file I can share with you, but don't want to post it publicly.   Can you send me an email at the email in my profile? I'll reply with the project file.

 

Thanks,
Schulz

[Brad]

I opened support ticket 1362184 and attached the project file there.

[Ianko]

Hi Brad,

We are going to look at this in the opened ticket. Thanks.

Regards,
Ianko
Progress Telerik

[Aleksei]

Hello,

I have the same issue. Have the problem been resolved?

Thank you in advance!

[Ianko]

Hi Aleksei,

The problem was the serverPaging setup. It was set to string value instead of a boolean one. If this is not the case on your end, you can open a support ticket with some more details about the setup of the Grid and the difficulties you encounter.

Regards,
Ianko
Progress Telerik

[Aleksei]

Hi Ianko,

Thank you, that's exactly what was wrong.

Regards,

Aleksei.