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.

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

Selected Column: Is Column Visible

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.

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.

Newsletter

Sign-up to our newsletter and you will receive news on upcoming events, latest articles, samples and special offers.

Name:

Email: *

*By checking this box, I agree to receive a newsletter from Lidor Systems in accordance with the Privacy Policy. I understand that I can unsubscribe from these communications at any time by clicking on the unsubscribe link in all emails.