Ungrouping grid column makes that column visible

[Bill Naples]

When removing a grouping column, whether showGroupedColumn is true or false, it will make the column visible as a regular column. That seems to be caused by the function Group.prototype.onPropertyChanged. How can one configure the grid to neither hide/show a column when it is grouped, nor hide/show it when it's ungrouped? That is, how does one configure the grid to just leave the column visibility alone when grouping and ungrouping it?

If you need a demo, please let me know.

Thanks.

[Mohammed Farook J]

Hi Bill, 

 

Thanks for contacting Syncfusion support. 

 

We have validated your requirement and we would like to share the default behavior of Grid grouping feature.  By default, when we are grouping, then grouped column will be hide from the Grid columns. If we ungroup the Grid column, then automatically ungrouped column will be displayed in Grid view . Please find the screenshot for your reference. 

 

Initial Grid : 

 

 

 

 

Apply grouping for CustomerID column: 

 

 

 

 

Now CustomerID column hide when its grouped. 

 

Ungrouped : 

 

 

 

Now the CustomerID is visible when ungrouped. Please find the sample for your reference. 

 

Sample : https://codesandbox.io/s/vue-forked-u1lp5?file=/src/App.vue 

 

 

If you want to show the grouped column in the Grid view, then you can enable ‘groupSettings.showGroupedColumn’ as true. Please find the screenshot and sample for your reference. 

 

[code example] 

 

<ejs-grid 

      :dataSource="data" 

      :allowPaging="true" 

      :allowGrouping="true" 

      :pageSettings="pageSettings" 

      :groupSettings="groupOptions" 

      ref="gridObj" 

    > 

      <e-columns> 

        <e-column 

          field="OrderID" 

          headerText="Order ID" 

          width="120" 

          textAlign="Right" 

        ></e-column> 

. . . 

    </ejs-grid> 

  </div> 

</template> 

<script> 

import Vue from "vue"; 

import { GridPlugin, Page, Group } from "@syncfusion/ej2-vue-grids"; 

import { data } from "./datasource.js"; 

 

Vue.use(GridPlugin); 

 

export default { 

  data() { 

    return { 

      data: data, 

      pageSettings: { pageCount: 3 }, 

      groupOptions:{showGroupedColumn:true} 

    }; 

  }, 

  methods: {}, 

  provide: { 

    grid: [Page, Group], 

  }, 

}; 

</script> 

<style> 

@import https://cdn.syncfusion.com/ej2/material.css; 

</style> 

 

 

 

Initial Grid: 

 

 

 

 

Displayed with Grouped column: 

 

 

 

Ungrouped : 

 

 

 

 

Sample : https://codesandbox.io/s/vue-forked-ib23t?file=/src/App.vue 

 

If this is not meet your requirements, could you please explain more details about your requirements. 

 

 

Please let us know if you have any concerns. 

 

Regards,  

J Mohammed Farook 

 

[Bill Naples]

Hi Mohammed,

Thank you for the reply.

What I'm needing is to not change anything with column visibility when grouping is changed. I don't use Sync Fusion's group area tool. I have my own UI for controlling columns and groupings. When Sync Fusion changes columns visibility outside of my UI model, it creates a lot of issues. Can Sync Fusion add an option to completely ignore group column visibility when grouping and ungrouping? It seems showGroupedColumn should really be a tri-state configuration: true, false, or do nothing.

Be well.

[Bill Naples]

For perspective, these are the overrides I have to do to prevent Sync Fusion from changing the visibility of grouped columns. I wish there was just a simple setting for this:

const gridProcessModel = Grid.prototype.processModel

Grid.prototype.processModel = function () {

// This function is being called during printing and hiding grouped columns.

// We don't want that, so override it.

const visibleGroupedColumns = this.groupSettings.columns

.filter(field => this.getColumnByField(field).visible)

gridProcessModel.call(this)

for (const field of visibleGroupedColumns) {

const column = this.getColumnByField(field)

if (!column.visible) {

column.visible = true

console.warn(`Grid.prototype.processModel overidden to restore column ${field} visibility back to true`)

}

}

}

const groupOnPropertyChanged = Group.prototype.onPropertyChanged

Group.prototype.onPropertyChanged = function (e) {

let visibleGroupColumns = []

let hiddenRemovedGroupColumns = []

if (e.module === 'group') {

visibleGroupColumns = e.properties.columns

.filter(field => this.parent.getColumnByField(field).visible)

hiddenRemovedGroupColumns = _.difference(e.oldProperties.columns, e.properties.columns)

.filter(field => !this.parent.getColumnByField(field).visible)

}

groupOnPropertyChanged.call(this, e)

visibleGroupColumns.forEach(field => {

const column = this.parent.getColumnByField(field)

if (!column.visible) {

console.warn(`Group.prototype.onPropertyChanged overidden to restore column ${field} visibility back to true`)

column.visible = true

}

})

hiddenRemovedGroupColumns.forEach(field => {

const column = this.parent.getColumnByField(field)

if (column.visible) {

console.warn(`Group.prototype.onPropertyChanged overidden to restore column ${field} visibility back to false`)

column.visible = false

}

})

}

const groupGroupColumn = Group.prototype.groupColumn

Group.prototype.groupColumn = function (columnName) {

const column = this.parent.getColumnByField(columnName)

const visible = column.visible

groupGroupColumn.call(this, columnName)

if (column.visible !== visible) {

column.visible = visible

console.warn(`Group.prototype.groupColumn overidden to restore column ${columnName} visibility back to ${visible} `)

}

}

const groupUngroupColumn = Group.prototype.ungroupColumn

Group.prototype.ungroupColumn = function (columnName) {

const column = this.parent.getColumnByField(columnName)

const visible = column.visible

groupUngroupColumn.call(this, columnName)

if (column.visible !== visible) {

column.visible = visible

console.warn(`Group.prototype.ungroupColumn overidden to restore column ${columnName} visibility back to ${visible} `)

}

}

[Mohammed Farook J]

Hi Bill,  

 

Thanks for your update. 

We have validated your requirement and provide code example and suspected that you want to control the column visible while grouping/ungrouping action. If this your requirement , we suggested to use ‘actionBegin’ event and its requestType ‘grouping’ and ‘ungrouping’. Please find the code example and sample for your reference. 

 

  <ejs-grid 

      :dataSource="data" 

      :allowPaging="true" 

      :allowGrouping="true" 

      :pageSettings="pageSettings" 

      :actionBegin="actionBegin" 

      :actionComplete="actionComplete" 

      ref="gridObj" 

    > 

 

. . .  

 

import Vue from "vue"; 

import { GridPlugin, Page, Group } from "@syncfusion/ej2-vue-grids"; 

import { data } from "./datasource.js"; 

 

Vue.use(GridPlugin); 

Vue.prototype.$gcol = []; // declare global variable 

export default { 

  data() { 

    return { 

      data: data, 

      pageSettings: { pageCount: 3 }, 

    }; 

  }, 

  methods: { 

    actionBegin(args) { 

      // access the column visibility while grouping 

      if (args.requestType === "grouping") { 

        this.$gcol = this.$refs.gridObj.ej2Instances.groupSettings.columns; // store the grouped columns 

        // get the current column of grouping 

        this.$refs.gridObj.ej2Instances.getColumnByField(args.columnName).visible = true; // change the column visibility while grouping      } 

      // access the column visibility while ungrouping 

      if (args.requestType === "ungrouping") { 

        for (let i = 0; i < this.$gcol.length; i++) { 

          if ( 

            this.$refs.gridObj.ej2Instances.groupSettings.columns.indexOf(this.$gcol[i]) === -1) { 

            this.$refs.gridObj.ej2Instances.getColumnByField(this.$gcol[i]).visible = false; // change the column visibility while ungrouping 

            let idx = this.$gcol.indexOf(this.$gcol[i]); 

            this.$gcol.splice(idx, 1); 

          } 

        } 

      } 

    }, 

  }, 

  provide: { 

    grid: [Page, Group], 

  }, 

 

 

 

Sample : https://codesandbox.io/s/vue-forked-2kgox?file=/src/App.vue 

 

API-doc : https://ej2.syncfusion.com/vue/documentation/api/grid/#actionbegin 

https://ej2.syncfusion.com/vue/documentation/api/grid/#getcolumnbyfield 

 

Still if you are facing the issue , could you please share your video demonstration about your issue. 

 

 

Please get back to us, if you have any queries. 

 

Regards, 

J Mohammed Farook 

[Bill Naples]

Thank you Mohammed for the reply and the workaround. We'll plan to take a look at using actionBegin. Take care.

[Balaji Sekar]

Hi Bill,  

  

Thanks for your update,   

We will wait to hear from you.  

Regards,  

Balaji Sekar