Loading data into a grid from a RESTful server

[JNapolitanoITParticipant]

Good afternoon members and moderators. I wanted to start off by making sure that I thank you all for your amazing plugins and products. I recently stumbled upon them and am impressed with their quality. I do have some minor nitpicks where it pertains to a severe lack of API documentation, but I digress due to the quality of the components that are provided. I also must mention that I posted this thread yesterday and after editing the thread to add images, the threads content was deleted. I do not know why, but it was very strange.

In any event, I wanted to ask about loading data sent from my REST server. I have screenshots and code to share what I am doing, where I am in my app, and what is going wrong using jqxPivotGrid in a VueJS frontend build. To start off, I am using the documentation for VueJS, as seen here.

Okay, so basically, I have a server sending me data in JSON format (a REST server). I want to pivot the data using jqxPivotGrid. The complication is very strange, and I almost feel as if I am using/utilizing the rendering portion of the API incorrectly in some form. I will also say, that more verbose documentation on this would be greatly appreciated, as there is very little in the way of loading dynamic data because virtually every example in the docs only use the same, static arrays (firstName, lastName, etc) to pivot data from which is rarely the case in the real world. Maybe there is a bit of the docs I am missing? This is always possible a well, of course.

With my issue, the data is present, it has been loaded, the JqxPivotGrid recognizes that it’s there, and the grid itself is not rendering. I cannot for the life of me figure out why. Any help would be most appreciated.

Anyhow, The data is presented in the manner that you see in this screenshot (using Insomnia REST client):

I am mainly confused because jqxPivotGrid for VueJS is recognizing the data. The following screenshot will show, that when using the PivotGrid’s filters, the data is present. So, here you can see this screenshot of the GUI and the filters representing the data itself.

Also in this screenshot, the data is present in JqxPivotGrid components loadedData, as seen while analyzing my code using Vue Devtools. This tells me that the data has been loaded (alongside no console errors, etc) and that the Vue component recognizes it.

So, my question is, what am I doing wrong? Why is the data loading into the component itself, but not being loaded into the grid? Is it something wrong with the code I’ve written, or improper usage of the jqxPivotGrid component?

Below you will find my code for the VueJS component I am testing the Grid on. It may not be the neatest, but it is only conceptual:

<template>
  <main class="app-container">
    <el-row>
      <el-col :span="8">
        <div class="space">
          <jqxPivotDesigner
            ref="pivotDesigner"
            style="height: calc(100vh - 8.0rem)"
            :type="'pivotGrid'"
          />
        </div>
      </el-col>
      <el-col :span="16">
        <div class="space">
          <JqxPivotGrid
            ref="pivotGrid"
            style="height: calc(100vh - 8.0rem)"
            :source="pivotDataSource"
          />
        </div>
      </el-col>
    </el-row>
  </main>
</template>
<script>
import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue'
import JqxPivotDesigner from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotdesigner.vue'

// 'defaults' refers to the casting of the default response data as an array of objects, as seen in the docs.
// I will share this code block if required.
//
// Basically, the entire script looks like this:
// const defaults = [
//  { name: 'DIVISION', type: 'string' },
//  { name: 'STYLEDESC', type: 'string' },
//  ...
//  ...
// }
// export default defaults
//
import defaults from './defaults/allocations'

export default {
  components: {
    JqxPivotGrid,
    JqxPivotDesigner
  },
  data: function() {
    return {
      pivotDataSource: this.pivotDataSource
    }
  },
  beforeCreate: function() {
    const createPivotDataSource = function() {
      // create a data source and data adapter
      const source =
        {
          datatype: 'json',
          url: 'http://localhost:3000/allocations',
          datafields: defaults
        }
      const dataAdapter = new jqx.dataAdapter(source)
      dataAdapter.dataBind()
      // create a pivot data source from the dataAdapter
      const pivotDataSource = new jqx.pivot(
        dataAdapter,
        {
          pivotValuesOnRows: true,
          rows: [{ dataField: 'Division' }],
          columns: [{ dataField: 'Shipping Year' }],
          values: [
            // { dataField: 'price', 'function': 'sum', text: 'Sum', align: 'left', formatSettings: { prefix: '$', decimalPlaces: 2, align: 'center' }, cellsClassName: 'myItemStyle', cellsClassNameSelected: 'myItemStyleSelected' },
            // { dataField: 'price', 'function': 'count', text: 'Count', className: 'myItemStyle', classNameSelected: 'myItemStyleSelected' }
          ]
        }
      )
      return pivotDataSource
    }
    this.pivotDataSource = createPivotDataSource()
  },
  mounted: function() {
    const pivotGridComponent = this.$refs.pivotGrid
    this.$refs.pivotDesigner.target = pivotGridComponent.getInstance()
    this.$refs.pivotDesigner.refresh()
  }
}
</script>

<style>
.space {
  margin: 10px !important
}
</style>

I thank anyone and everyone for any bit of help that they can provide. And once again, thank the developers for such amazing tools. YTour hard work does not go unappreciated.

[JNapolitanoITParticipant]

I wanted to post a reply to this thread, as I’ve figured out what the issue was. It all boiled down to the async property. That was it. I am unsure how this is possible, but now, we have our data being presented in a satisfactory way.

To those wondering why your server-side data is not rendering, check that async is disabled, like below:

    const createPivotDataSource = function() {
      // create a data source and data adapter
      const source = {
        // cache: false,
        datatype: 'json',
        url: 'http://your.api/demo-data',
        datafields: defaults,
        root: 'USE_IF_REQUIRED_TO_TARGET_THE_JSON_ROOT',
        async: false // This little sucker caused all the problems, haha
      }
      const dataAdapter = new jqx.dataAdapter(source)

Thank you to the team of amazing developers for bringing these plugins to life. the jqxPivotGrid alone has saved me from rolling my own pivot component which would’ve been absolute hell. Thank you all.

[Yavor DashevParticipant]

Hi JNapolitanoIT,

I have a clue from where this behavior could be coming from and from the code that you have shared its most probably of the ‘beforeCreate’ lifecycle hook of Vue.
By default, all requests are sent asynchronously (i.e. this is set to true by default). If you need synchronous requests, you must set this option to false.
When the binding is “asynchronous”, the data binding operation occurs in parallel and the order of completion is not guaranteed.

Please, do not hesitate to contact us if you have any additional questions.

Best Regards,
Yavor Dashev
jQWidgets team
https://www.jqwidgets.com

[JNapolitanoITParticipant]

Thank you for the reply, Yavor. That makes sense. Unfortunately, when using frontend frameworks like Vue, I often forget about the importance of lifecycle hooks (EG: using this in a beforeCreate(), before the Vue object is created). So, this does make sense. Is there any particular reason why the documentation doesn’t just hook in on created()? It works all the same, of course.

In either event, thank you for the reply and your time.

[Yavor DashevParticipant]

Hi JNapolitanoIT,

One of the main reasons to use beforeCreate() hook is the fact that this is the best option for making API requests/calls and etc.

And created() hook is during creating the reactive data and events which is why is not the best choice for your use case even thought it is working.

I hope my explanation is useful for you.

Please, do not hesitate to contact us if you have any additional questions.

Best Regards,
Yavor Dashev
jQWidgets team
https://www.jqwidgets.com

[JNapolitanoITParticipant]

It is very useful, thank you Yavor. I appreciate all of your assistance. Thank you very much!

[Author]

Posts