Show/Hide the grouping bar

[AJ]

Hi team,

Is there a property for the ejs-grid that I can hide/show the grouping bar on top of the grid? for example if users wants to group columns they click on button to hide/show the grouping bar area on top.

Cheers

Ali 

[Madhu Sudhanan P]

Hi Ali, 

Thanks for contacting Syncfusion support. 

Please refer to the below help to hide group drop area using groupSettings.showDropArea property 

https://ej2.syncfusion.com/angular/documentation/grid/grouping.html#hide-drop-area 

Regards, 

Madhu Sudhanan P 

[AJ]

Hi Madhu,

Thanks for the reply, let share some screenshots to explain what I'm trying to achive here with the grouping row on the grid. 

What my goals are :

• Always hide the groupping bar once the user goes to the page with the grid (default)
• User can show the groupping bar either by clicking a hide/show button or hovering mouse over the top of grid and it will show the groupping bar 

Our dev team would like to achive these goals and the groupSettings.showDropArea didnt show how I can use the proprty to hide/show the grouping bar 

 

Cheers

Ali

Attachment: groupping_50c961ce.zip

[Mohammed Farook J]

Hi Ali, 

 

We have prepared the sample with your requirement. So please refer the below sample for further assistance, 

 

Sample: https://stackblitz.com/edit/angular-fzcc4w?file=grouping.html 

 

Code snippet:                                                                                                                                                                                                                 

 

Html: 

 

<input type="button" id="show" (click)="show()" value="Show" /> 

<input type="button" id="hide" (click)="hide()" value="Hide" /> 

<ejs-grid #grid [allowGrouping]="true" [groupSettings]="groupOptions"> 

 

    ... 

     

</ejs-grid> 

 

---------------------------------------------------------------------------------------------------------------------------------------- 

 

Typescript: 

 

export class GroupComponent implements OnInit { 

    @ViewChild('grid') 

    public grid: GridComponent; 

    ngOnInit(): void { 

        this.groupOptions = { showDropArea: false };  // to hide the drop area at initial rendering 

    } 

 

    hide(){ 

      (this.grid.groupModule as any).groupSettings.showDropArea = false; 

      this.grid.refresh(); 

    } 

 

    show(){ 

      (this.grid.groupModule as any).groupSettings.showDropArea = true; 

      this.grid.refresh(); 

    } 

} 

 

 

 

If you want to hide  group drop area while grouping , we suggest to use ‘actionComplete’ event . Please find the code example 

 

[app.component.html] 

 

  <ejs-grid #grid [dataSource]='data'  (actionComplete)= 'actionComplete($event)' allowPaging='true' allowSorting="true" [allowGrouping]="true" [groupSettings]="groupOptions"> 

        . . .  

        </e-columns> 

    </ejs-grid> 

 

 

 

[app.component.ts] 

 

 . . .  

actionComplete(args) { 

    if (args.requestType === 'grouping' || args.requestType === 'ungrouping') { 

      this.grid.groupSettings.showDropArea = this.grid.groupSettings.columns.length == 0 ? true : false; 

    } 

 

  } 

 

 

 

 

 

If you want to manually ungroup column by using ungroupColumn method. Please find the ug reference. 

 

 

https://ej2.syncfusion.com/angular/documentation/api/grid#ungroupcolumn 

 

 

 

Regards, 

J Mohamemd Farook 

[AJ]

Hi J,

Thank you for the provided examples, really appreciate it.

Cheers

Ali

[Venkatesh Ayothi Raman]

Hi Ali, 

Thanks for the feedback. 

We are very happy to hear that your requirement is achieved. 

Regards, 

Venkatesh Ayothiraman.