LIDOR SYSTEMS

Advanced User Interface Controls and Components

Show/Hide Columns in Angular Grid

Created: 17 November 2017

When you have too many columns in the Angular Grid, you may require to show only those that are most frequently used. For this purpose, some of the columns will remain hidden and should appear only when required.

Grid component is part of IntegralUI Web
a suite of UI Components for development of web apps

If you have any questions, don't hesitate to contact us at support@lidorsystems.com

As above demo presents, to show or hide a specific column one way is to use a context menu. Whenever you right-click on a grid header a context menu will appear displaying the name of each column and a check mark stating whether the column is visible or hidden. By selecting the column from the menu option, you can change its visibility.

How to Hide Grid Column

You can hide columns from code by setting the visible field of each column object to true or false. You can set this initially in your data source, or change it after the grid is populated. In either case, columns that are marked as hidden will not be displayed in the grid view.

this.columns = [
            { id: 1, headerText: "Header1", width: 150 },
            { id: 2, headerText: "Header2", width: 200 },
            { id: 3, headerText: "Header3", width: 120, visible: false },
            { id: 4, headerText: "Header4", width: 90 },
            { id: 5, headerText: "Header5", width: 180, visible: false }
        ];
                            

Use of ContextMenu to Show or Hide Grid Columns

One way to change column visibility is to use a context menu. In this example, the context menu displays a list of all columns and a check mark that states whether the column is currently visible or hidden.

To create the context menu is simple, you just need to create an array of objects with following data:

  • cid - equal to the column id value
  • text - will hold the column name
  • checked - determines whether the column is visible or hidden
  • icon - a visual representation of column visibility, in this case a check mark
// Get a reference to app root component, used to dynamically append the content menu window
@ViewChild('application', {read: ViewContainerRef}) applicationRef: ViewContainerRef;

// Column Menu settings
public columnMenu: any = {
    items: []
}

ngAfterViewInit(){
    // This is required in order for Context Menu component to appear
    // The menu is added as a child of specified app component
    this.contextMenuReference = this.applicationRef;

    this.updateColumnMenu();
}

updateColumnMenu(){
    this.columnMenu.items.length = 0;

    for (let j = 0; j < this.columns.length; j++){
        let menuItem: any = {
            cid: this.columns[j].id,
            checked: this.columns[j].visible != false ? true : false,
            icon: '',
            text: this.columns[j].headerText
        }

        menuItem.icon = menuItem.checked ? 'grid-shcol-icons grid-shcol-icons-check-mark' : 'grid-shcol-icons';

        this.columnMenu.items.push(menuItem);
    }
}                            

Next, you need to apply the IntegralUI ContextMenu directive to each column template in Grid component. In order for the context menu to popup, the contextMenuRef property needs to be set to point to the application root component. This makes sure that when you right-click on grid header the context menu is dynamically created and added as child of app root component. In this way, the menu will appear on top of the grid.

<div #application>
    <iui-grid [controlStyle]="gridStyle" [columns]="columns" [rows]="rows" [showFooter]="false" #grid>
        <ng-template let-column [iuiTemplate]="{ type: 'header' }">
            <div style="width:100%" [iuiContextMenu]="columnMenu" [contextMenuRef]="contextMenuReference" >
                {{column.headerText}}
            </div>
        </ng-template>
        <ng-template let-cell [iuiTemplate]="{ type: 'cell' }">
            <div class="grid-shcol-cell">
                <span>{{cell.text}}</span>
            </div>
        </ng-template>
    </iui-grid>
</div>
                            

Finally, you need to handle the menu click event and process selection of menu options. This event carries the item object that is clicked. And because previously the item object is set to have the cid value equal to the column id value, we can quickly locate the specific column and make it visible or hidden.

// General ---------------------------------------------------------------------------

findColumnFromMenuId(id: any){
    let foundColumn: any = null;

    for (let j = 0; j < this.columns.length; j++){
        if (this.columns[j].id == id){
            foundColumn = this.columns[j]; 
            break;
        }
    }

    return foundColumn;
}

// ContextMenu events ----------------------------------------------------------------

columnMenuOpening(e: any){
    this.updateColumnMenu();
}

columnMenuItemClick(e: any){
    if (e.item){
        e.item.checked = !e.item.checked;

        let column = this.findColumnFromMenuId(e.item.cid);
        if (column)
            column.visible = e.item.checked;

        this.grid.updateLayout();
   }
}
                            
<div #application>
    <iui-grid [controlStyle]="gridStyle" [columns]="columns" [rows]="rows" [showFooter]="false" #grid>
        <ng-template let-column [iuiTemplate]="{ type: 'header' }">
            <div style="width:100%" (menuOpening)="columnMenuOpening($event)" (menuClick)="columnMenuItemClick($event)" [iuiContextMenu]="columnMenu" [contextMenuRef]="contextMenuReference" >
                {{column.headerText}}
            </div>
        </ng-template>
        <ng-template let-cell [iuiTemplate]="{ type: 'cell' }">
            <div class="grid-shcol-cell">
                <span>{{cell.text}}</span>
            </div>
        </ng-template>
    </iui-grid>
</div>
                            

You can use the menuOpening event to update the menu options prior the menu is shown. In this case, the menu list is recreated and the check mark is updated depending on which column is visible.

Note The check mark in the context menu appears only for columns that are visible.

Conclusion

Having option to hide columns is most useful when you have large data set with many columns. In Angular Grid component this process is simple. Each column object has a visible field that allows you to change the column visibility during run-time. By setting this field to true or false, you can show or hide specific column on demand.

The Grid component is part of IntegralUI Web.

Did you Like this Article?


Enter your e-mail address below and you will receive latest articles as well as news on upcoming events and special offers.