Indicates whether the column is hidden or not (for example, depending on screen size or other conditions). In addition, the end user can hide/show the column at runtime.
Generators: Angular
Level: Design System Style Class
The behavior of this property is equivalent to the Column Hidden property for Tabular Grid Columns. However, when using the gx-grid-column-hidden property, you have the advantage of being able to show/hide a column based on a certain condition.
So, if you do not have to consider conditions to show/hide a column, configure the Column Hidden property for Tabular Grid Columns. Otherwise, solve it using a Design System Object and the gx-grid-column-hidden property.
This property applies only at design time.
Suppose your Knowledge Base is named "BillingSystem", and therefore a predefined Design System Object is created with the same name.
Below is the default Styles tab of the "BillingSystem" Design System object:
styles BillingSystem {
@import GeneXusUnanimo.UnanimoWeb;
}
There you can define, for example, a class named .GridColumnHidden and set its "gx-grid-column-hidden" property as follows:
styles BillingSystem {
@import GeneXusUnanimo.UnanimoWeb;
.GridColumnHidden {
gx-grid-column-hidden: false;
}
@media (max-width: 960px) {
.GridColumnHidden {
gx-grid-column-hidden: true;
}
}
}
Note that by using the media rule you define that if the screen size is smaller than 960 px the column is hidden.
Finally, you can create a Panel object and include a Tabular Grid control in its Layout.
Click on the CustomerId column. Check that its Column Class property is set to .GridColumnHidden.
Build the Panel and run it. The CustomerId column will be hidden in the Tabular Grid, but the end user will be able to show it from the Tabular Grid configuration using the "Settings" button at runtime.
This property is available since GeneXus 18 Upgrade 7.