jQuery UI Widgets Forums Vue(New) Assign data to Pivot Grid asynchronously

This topic contains 2 replies, has 2 voices, and was last updated by  Martin 3 weeks ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author

  • ales
    Participant

    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


    ales
    Participant

    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

    Assign data to Pivot Grid asynchronously #113561

    Martin
    Participant

    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

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.