jQWidgets Forums

This topic contains 3 replies, has 2 voices, and was last updated by Yavor Dashev 4 years, 1 month ago.

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

Author

Expanding all rows and columns in jqxPivotGrid Posts

June 3, 2021 at 2:45 pm Expanding all rows and columns in jqxPivotGrid #120308

Participant

Good afternoon or morning, community members and moderators! I have a (presumably) very basic question, regarding jqxPivotGrid. This seems to be rather poorly documented so I wonder if any members of the team or community may be able to assist, or point me to a reference within the documentation for this feature.

I am using VueJS alongside jqxPivotGrid and so far all is working quite well. However, I would like to expand all rows and columns, based on a button click. Unfortunately, all of the examples I’ve read on the forums or elsewhere, have always used jQuery’s $('#jqxPivotGrid').jqxPivotGrid('expandAll') syntax, which is currently not available in VueJS since I am not directly using jQuery.

I have yet to try anything official, since I actually don’t know where to start. Do I tap into a lifecycle hook for jqxPivotGrid? At what point in the jqxPivotGrid lifecycle timeline does the population of data occur? Should I use native VueJS @click on a button? Should I go against the grain and put jQuery in the <head> of the public/index.html file and call the Grid using the $('#jqxPivotGrid').jqxPivotGrid('expandAll') syntax?

Below is the component. Please don’t worry too much about the defaults, rows, columns, etc. They’re formatted and generated in a separate script file, and can be shard if for any reason the code is required.


<template>
  <main class="app-container">
    <el-row class="text-right">
      <el-col :span="24">
        <el-button-group class="btn-group">

          <!-- The button I'd like to use to activate the click event -->
          <button type="default" @click="expandAll">
            <i :class="el-icon-${expandCollapseIcon}" /> {{ expandCollapseText }}
          </button>

        </el-button-group>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="6">

        <!-- jqxPivotDesigner -->
        <jqxPivotDesigner ref="pivotDesigner" class="pivotTable" :type="'pivotGrid'" />

      </el-col>
      <el-col :span="18">

        <!-- JqxPivotGrid -->
        <JqxPivotGrid ref="pivotGrid" class="pivotTable" :source="pivotDataSource" />

      </el-col>
    </el-row>
  </main>
</template>
<script>
import JqxPivotDesigner from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotdesigner.vue'
import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue'
import { columns, defaults, filters, rows, values } from './defaults/allocations'

export default {
  components: {
    JqxPivotDesigner,
    JqxPivotGrid
  },
  data: function() {
    return {
      pivotDataSource: this.pivotDataSource,
      isExpanded: true
    }
  },
  computed: {
    expandCollapseText: function() {
      return this.isExpanded ? 'Collapse All' : 'Expand All'
    },
    expandCollapseIcon: function() {
      return this.isExpanded ? 'minus' : 'plus'
    }
  },
  created: function() {
    const createPivotDataSource = function() {
      // create a data source and data adapter
      const source = {
        cache: false,
        datatype: 'json',
        url: 'http://localhost:3000/allocations',
        datafields: defaults,
        root: 'allocations_GETALL_R',
        async: false
      }
      // eslint-disable-next-line new-cap,no-undef
      const dataAdapter = new jqx.dataAdapter(source)
      dataAdapter.dataBind()
      // create a pivot data source from the dataAdapter
      // eslint-disable-next-line new-cap,no-undef
      return new jqx.pivot(
        dataAdapter,
        {
          sortable: true,
          filters,
          rows,
          columns,
          values
        }
      )
    }
    this.pivotDataSource = createPivotDataSource()
  },
  mounted: function() {
    const pivotGridComponent = this.$refs.pivotGrid
    this.$refs.pivotDesigner.target = pivotGridComponent.getInstance()
    this.$refs.pivotDesigner.refresh()
  },
  methods: {
    expandAll: function() {
      this.isExpanded = !this.isExpanded
    }
  }
}
</script>

<style scoped>
.pivotTable {
  height: calc(100vh - 9rem)
}

.btn-group {
  margin-bottom: 15px;
}
</style>

Thank you all!

June 3, 2021 at 3:50 pm Expanding all rows and columns in jqxPivotGrid #120311

Yavor Dashev

Participant

Hi JNapolitanoIT,

Thank you for your detail use case explanation!

I have prepared a code snippet for you which we achieve the same functionality as $('#jqxPivotGrid').jqxPivotGrid('expandAll') but doing it in the ‘Vue’ way.



<template>
   <div>
            
                <JqxPivotDesigner style="width: 250px; height: 400px;"
                                  ref="pivotDesigner" 
                                  :type="'pivotGrid'">
                </JqxPivotDesigner>
         
                <JqxPivotGrid style="width: 550px; height: 400px;"
                              ref="pivotGrid" 
                              :source="pivotDataSource"
                              :treeStyleRows="false"
                              :autoResize="false"
                              :multipleSelectionEnabled="true">
                </JqxPivotGrid>

             <button @click="expandAll">Expand All</button>

    </div>
</template>
<script>
    import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
    import JqxPivotDesigner from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotdesigner.vue';
    export default {
        components: {
            JqxPivotGrid,
            JqxPivotDesigner
        },
        data: function () {
            return {
                pivotDataSource: this.pivotDataSource
            }
        },
        beforeCreate: function () {
            const createPivotDataSource = function () {

              //  your code here
            }
   
        },
        mounted: function() {
            let pivotGridComponent = this.$refs.pivotGrid;
            let pivotGridInstance = pivotGridComponent.getInstance();
            this.$refs.pivotDesigner.target = pivotGridInstance;
            this.$refs.pivotDesigner.refresh();
        },
         methods: {
            expandAll:function(){
             
                let allRowItems =  this.$refs.pivotGrid.getPivotRows().items,
                    cols = this.$refs.pivotGrid.getPivotColumns().items;
             
                for(let i = 0; i < allRowItems.length; i ++){
                  allRowItems[i].expand();
                }  
                for(let i = 0; i < cols.length; i ++){
                  cols[i].expand();
                }

                this.$refs.pivotGrid.refresh();
            }
        }
    }
</script>
<style>
</style>

Let me know if that works 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

June 3, 2021 at 4:29 pm Expanding all rows and columns in jqxPivotGrid #120314

JNapolitanoIT

Participant

Yavor, you are amazing! Thank you very much for your continued support for these amazing products. That worked like a charm. I now see that in order to use this in Vue, the best way is to use this.$refs.pivotGrid and I believe that this was something I was missing. Can you please point me to the location within the documentation where this would or could be found?

Thank you again!

June 4, 2021 at 7:15 am Expanding all rows and columns in jqxPivotGrid #120317

Yavor Dashev

Participant

Hi JNapolitanoIT,

I will try explain my self as best as I can- this.$refs.pivotGrid is used when you want to access the components properties and not only props/events and the refs is needed to access the complete instance of the jqxPivotGrid.

Sometimes the documentation can be a bit hard to comprehend but we don’t have specific docs for using this.$refs.jqxComponent but I will still share the documentation page for the jqxPivotGrid: https://www.jqwidgets.com/vue-components-documentation/documentation/jqxpivotgrid/vue-pivotgrid-api.htm?search=

You can find this references in the methods section of the documentation.

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

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

Author

Posts

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

You must be logged in to reply to this topic.