Reports - Show, Hide, and Sort Grid Columns
Reports - Show, Hide, and Sort Grid Columns
Technologies >Software Engineering > Software Engineer Views > Miniconsole with columns that can be shown, hidden, or sorted
You can create grid reports that allow the user to choose displayed columns, or to rearrange the column order. This is useful for grid reports with many columns that do not fit the user display width.
The standard grid panel does not have UI controls for these features, so you need to provide the UI buttons and program them using the grid Java Script API. You can:
- Show or hide grid columns.
- Set column display order.
- Get the list of grid columns.
Usage
In the AXVW file, you can hide panel fields that should not be displayed by default.
<field name=”count_occup” hidden=”true”/>
From a JS event handler, you can show or hide grid columns:
grid.showColumn('bl.count_occup');
grid.hideColumn('bl.value_book');
You can modify the column display order:
// in a grid with 10 columns, sort the last 3 columns by title
grid.sortColumns(7,9);
After modifying the column visibility, you must update the grid:
grid.update();
Note that this method itself calls
afterRefresh()
, so you cannot show or hide columns inside afterRefresh().
You can also get the list of grid columns::
grid.getColumns(); // returns JS array of Ab.grid.Column objects for all columns
The
Smart Search console
is displayed by default. To disable the
Smart Search console, set the panel’s optional attribute
controlType
to
reportGrid
:
Showing or hiding grid columns does not change the current grid or the Smart Search console restriction. For example, the user might set a filter restriction for a column, and then hide that column; the system will retain the restriction.
See also:
- Add, remove, and reorder grid rows topic
- Example view: http://localhost:8080/archibus/schema/ab-products/solutions/programming/grid/ab-ex-prg-grid-show-hide-sort-columns.axvw .
- archibus\schema\ab-products\solutions\programming\grid\ab-ex-prg-grid-show-hide-sort-columns.js