LIDOR SYSTEMS

Advanced User Interface Controls and Components

Change Column Visibility in AngularJS Grid

Created: 04 January 2016

By default, columns in Grid directive for AngularJS are visible. When the number of columns is low, it is ok to have all columns visible. However, in cases where we have many columns, it is more convenient to have some columns hidden, usually those that are with low priority.

Similar: Show/Hide Columns in Grid for Angular 4

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




In our example we have five columns, three visible and two hidden. By using control panel on the right, you can change visibility of columns one by one, or for all columns.

How to Hide Column

The column object represents columns in Angular Grid directive. This object has the visible field that determines whether a specific column is visible or hidden. By setting the value of this field to false, the column is hidden, in other cases when the value is not set or is set to true, the column is visible.

// Create columns where some are hidden

$scope.columns = [

{ name: 'Column1', headerText: 'Header1', footerText: 'Footer1', width: 200 },

{ name: 'Column2', headerText: 'Header2', footerText: 'Footer2', width: 120 },

{ name: 'Column3', headerText: 'Header3', footerText: 'Footer3', width: 90, visible: false },

{ name: 'Column4', headerText: 'Header4', footerText: 'Footer4', width: 150 },

{ name: 'Column5', headerText: 'Header5', footerText: 'Footer5', width: 120, visible: false }

];

Change Visibility of All Columns

There is no built-in method, which changes the visibility of all columns in the grid directive. In order to make all grid columns visible or hidden, we need to cycle through the column collection and change the visible field for each column to true or false.

// A variable which determines whether all columns are visibile or hidden

$scope.columnVisibility = !$scope.columnVisibility;

// Change the button text (in this example)

$scope.btnText = $scope.columnVisibility ? "Hide All Columns" : "Show All Columns";

 

// Cycle through all columns and change their visibility

for (var j = 0; j < $scope.columns.length; j++)

$scope.columns[j].visible = $scope.columnVisibility;

Conclusion

Changing the visibility of columns in the Angular Grid directive is possible. By setting the value of visible field for a specific column object, the column can become either visible or hidden.

The complete sample code is available as part of the IntegralUI Studio for Web product package.

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.