Assign data to Pivot Grid asynchronously

[alesParticipant]

Suppose there is a vue application that loads data asynchronously from remote server. The component is created with empty dataAdapter and once the response from the remote server is available I want to assign the data to the pivot grid and refresh. How to do that?

In the demo app (https://www.jqwidgets.com/vue/vue-pivotgrid/#https://www.jqwidgets.com/vue/vue-pivotgrid/vue-pivotgrid-designer.htm) the data are prepared on the client synchronously – this works ok. But when I try to create a new pivotDataSource and call refresh() nothing happens:

First create and empty dataAdapter in the beforeCreate method

beforeCreate () {
    const createPivotDataSource = function () {
    let data = []
    let source =
        {
          localdata: data,
          datatype: 'array',
          datafields:
            [
              { name: 'issueCode', type: 'string' },
              { name: 'customer', type: 'string' },
              { name: 'title', type: 'string' },
              { name: 'duration', type: 'number' }
            ]
        }
      let dataAdapter = new jqx.dataAdapter(source)
      dataAdapter.dataBind()
      // create a pivot data source from the dataAdapter
      let pivotDataSource = new jqx.pivot(dataAdapter, ... )
      return pivotDataSource
    }

    this.pivotDataSource = createPivotDataSource()
  }

Then once the response from the remote server arrives, try to assign the new data to the pivot grid – doesn’t work:

let data = ...
...
let dataAdapter = new jqx.dataAdapter(source)
dataAdapter.dataBind()
// create a new pivot data source from the dataAdapter
let pivotDataSource = new jqx.pivot(dataAdapter, ... )
this.pivotDataSource = pivotDataSource
this.$refs.pivotGrid.refresh()

Another similar scenario could be to refresh the data when something changes at the server side.

So the question is: How to properly refresh the Pivot Grid data in vue application?

Thank you for any hints.
Ales

[alesParticipant]

According to https://www.jqwidgets.com/community/topic/how-to-assign-different-theme-to-a-component/ similar solution could be used here too:

1. Set :autoCreate="false"
2. Run the following code after data from remote server were received:

const settings = {
          theme: 'metro',
          source: this.pivotDataSource,
          treeStyleRows: false,
          autoResize: false,
          multipleSelectionEnabled: true
        }

        this.$refs.pivotGrid.createComponent(settings)

This is reasonable solution, but what if I want to do refresh again with new data from the server? Running this code again results in "TypeError: Cannot read property 'jqxScrollBar' of undefined".

Ales

[MartinParticipant]

Hello Ales,

For updating the jqxPivotGrid data you should update the localdata property of the source, call dataBind on the data adapter and pivotDataSource
and pass the pivotDataSource again to the pivotGrid’s source and finally call the refresh method.

You can check this Example. The code is in Angular but the approach is the same.

Best Regards,
Martin Yotov

jQWidgets team
https://www.jqwidgets.com

[Author]

Posts