Grid directive is part of IntegralUI Studio for Web
a suite of UI Components for development of web apps
a suite of UI Components for development of web apps
Advanced User Interface Controls and Components
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
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.
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 }
];
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;
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.