Group Grid Records by Category
Grid Control 2.0
Group Grid Records by Category
You can define a grid panel that groups records by category and displays each group of records under a category subheader. Users can expand or collapse each category. Category headers display the number of items in the category, such as, Closed (24).
This topic contains the following sections:
- Selecting Multiple Rows with Categories . If multiple selection is enabled in the category grid panel, there are check boxes to select multiple rows.
- Setting the Maximum Records Displayed for each category. Set this limit with the category control.
- Grouping in the Building Operations Console. The Building Operations Console uses application parameters to control such factors as whether or not the category bands are expanded when the console is opened.
- Loading Category Values from the Database and Specifying Category Values Explicitly . The grid can load category values from a database field, or you can specify them explicitly. Whether you specify category values using a data source or explicitly, standard XLS export and DOCX reports also display records grouped by category.
- Custom Styles . You can also add JavaScript code to change text color for selected rows. See the example JavaScript code in the Custom Styles section below.
Selecting Multiple Rows with Categories
If you enable multiple selection in the category grid panel, each category header displays a check box that selects or unselects all rows inside the category. This check box appears in addition to the top-level check box that selects or unselects all rows in the panel.
Example view: http://localhost:8080/archibus/schema/ab-products/solutions/ab-ex-report-group-by-categories-multiselect.axvw
Setting the Maximum Records Displayed
To set the maximum number of records displayed under each category, use the
categoryDisplayedLimit
setting in category control:
//max displayed records under each category
categoryDisplayedLimit: 100,
If the number of records in a category exceeds the display limit, the total number appears at the bottom of the category, along with a button to show remaining records.
Grouping in the Maintenance Console
If the application parameter named "
BldgOpsConsoleExpandOnOpen
" is set to "1", then the Building Operations Console is opened with all category bands expanded. If the application parameter is "0", then the Console opens with all of the category bands collapsed .
For both settings, the application shows the total count of records within each category band in parentheses next to the category band title.
If the user expands a category band where the total number of records is greater than 200, then the application implements a progress bar while the band expands.
The maximum displayed records under category is configurable: by default it is 100, variable
categoryDisplayedLimit=100
;
If a category has more than 100 records, a “View more” button is presented.
Your open-collapse status is restored after a refresh occurs, such as when you click the console’s Filter button, or when when you work on a row action like “Estimate”.
See the topic
Building Operations / Develop Background Data / Setting the Application Parameters for using the Building Operations Console
in the User Help. This topic has a section on the application parameters that control performance. This topic describes the
BldgOpsConsoleMaxRequestsPerBand
and the
BldgOpsConsoleExpandOnOpen
application parameters.
Loading Category Values from the Database
To load category values from the database, define the category.
<dataSource id="buildingsDS">
<table name="bl"/>
<field name="bl_id"/>
<sortField table="bl" name="bl_id"/>
</dataSource>
Set the grid's
controlType
to category and reference this data source from the grid:
<panel type="grid" id="wrList" ... controlType="category"
dataSource="workRequestsDS" categoryDataSource="buildingsDS">
The grid will use the first field of the category data source to group records. The regular grid data source must contain a field with the same name:
<dataSource id="workRequestsDS">
<table name="wr"/>
<field name="wr_id"/>
<field name="wo_id"/>
<field name="status"/>
...
<field name="bl_id"/>
</dataSource>
You must include the
setCategoryConfiguration()
method – and therefore,
update()
. At the very minimum, you must specify the
fieldname
in which to group the categories by:
this.workRequestsByBuildingGrid.setCategoryConfiguration({
fieldName: 'wr.status'
});
// update
this.workRequestsByBuildingGrid.update();
You can change both grouping sources after the view is loaded using the JavaScript API:
this.wrList.setDataSource('workOrdersDS');
this.wrList.setCategoryDataSource('statusDS');
this.wrList.update();
Specifying Category Values Explicitly
You may want to specify a sub-set of category values, or set a custom order of category values. For instance, display work requests grouped by status, beginning with Requested and ending with Closed.
Use the JavaScript API to specify category values and order:
this.wrList.setCategoryConfiguration({
fieldName: 'wr.status',
order: ['R', 'A', 'HA', 'HL', 'I', 'Com']
});
this.wrList.update();
The
fieldName
property specifies the category field in the main data source. The
order
property specifies the category values in the displayed order.
By default, each category displays all its items. You can set a limit on the number of displayed items. For example, you might want to sort work requests by most recent requested date, and display up to 10 most recent requests.
this.wrList.setCategoryConfiguration({
fieldName: 'wr.status',
order: ['R', 'A', 'HA', 'HL', 'I', 'Com'],
recordLimit: 10
});
this.wrList.update();
Custom Styles
In category grids you can also override style per category value. For example, specify unique and meaningful color for each work request status:
<panel id="wrGrid" ... getStyleForCategory="getStyleForCategory">
// @param {panel} The grid panel.
// @param {row} The Ab.grid.Row object containing the current record.
function getStyleForColumn(panel, row) {
var style = {};
var status = row.getFieldValue('wr.status');
if (status = 'R ') {
style.color = '#A01F57';
} else if (...) {
...
}
return style;
}
Example view : http://localhost:8080/archibus/schema/ab-products/solutions/parts/grid/ab-ex-report-group-by-categories-multiselect.axvw