Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://www.ag-grid.com/javascript-data-grid/server-side-model-grouping/ below:

JavaScript Grid: SSRM Row Grouping

This section covers Row Grouping in the Server-Side Row Model (SSRM).

Row Grouping is enabled in the grid via the rowGroup column definition attribute. The example below shows how to group rows by 'country':

const gridOptions = {
    columnDefs: [
        { field: 'country', rowGroup: true },
        { field: 'sport' },
        { field: 'year' },
    ],

    
}

For more configuration details see the section on Row Grouping.

The actual grouping of rows is performed on the server when using the SSRM. When the grid needs more rows it makes a request via getRows(params) on the Server-Side Datasource with metadata containing grouping details.

The properties relevant to Row Grouping in the request are shown below:

{
    
    rowGroupCols: ColumnVO[];

    
    groupKeys: string[];

    ... 
}

Note in the snippet above the property rowGroupCols contains all the columns (dimensions) the grid is grouping on, e.g. 'Country', 'Year'. The property groupKeys contains the list of group keys selected, e.g. ['Argentina', '2012'].

The example below demonstrates server-side Row Grouping. Note the following:

• Country and Sport columns have rowGroup=true defined on their column definitions. This tells the grid there are two levels of grouping, one for Country and one for Sport.
• The rowGroupCols and groupKeys properties in the request are used by the server to perform grouping.
• Open the browser's dev console to view the request supplied to the datasource.

It is possible to have rows open as soon as they are loaded. To do this implement the grid callback isServerSideGroupOpenByDefault.

function isServerSideGroupOpenByDefault(params) {
    var rowNode = params.rowNode;
    var isZimbabwe = rowNode.field == 'country' && rowNode.key == 'Zimbabwe';
    return isZimbabwe;
}

It may also be helpful to use the Row Node API getRoute() to inspect the route of a row node.

Function

Returns the route of the row node. If the Row Node does not have a key (i.e it's a group) returns undefined

Below shows isServerSideGroupOpenByDefault() and getRoute in action. Note the following:

• The callback opens the following routes as soon as those routes are loaded:
  • [Zimbabwe]
  • [Zimbabwe, Swimming]
  • [United States, Swimming]
• Note [Zimbabwe] and [Zimbabwe, Swimming] are visibly open by default.
• Note [United States, Swimming] is not visibly open by default, as the parent group 'United States' is not open. However when 'United States' is opened, it's 'Swimming' group is opened by default.
• Selecting a group row and clicking 'Route of Selected' will print the route to the selected node to the developer console.

To enable Group Total Rows, set the groupTotalRow property to 'top' or 'bottom'. Note that the grand total row is not supported by the SSRM.

Group total rows can also be used with groupDisplayType='multipleColumns', as demonstrated in the example below.

In some configurations it may be desired for the group row to be hidden when expanded, this can be achieved by setting the groupHideOpenParents property to true.

The example below has been styled in a way that demonstrates the behaviour of the groups. Note how upon expanding a group, the group row is replaced by the first of its children, and only when collapsed is the group row is shown again.

To enable unbalanced groups in the SSRM, set the groupAllowUnbalanced property to true. This causes any group with a key of '' to behave as if it is always expanded, and the group row to always be hidden.

When using groupAllowUnbalanced=true it is important to remember that a row group still exists to contain the unbalanced nodes, this can be an important consideration when working with selection state, refreshing, or group paths. This also means that there will be additional requests and delays in loading these unbalanced rows, as they do not belong to the parent row.

It is possible to expand and collapse all group rows using the expandAll() and collapseAll() grid API's.

api.expandAll();


api.collapseAll();

Calling expandAll() and collapseAll() will impact all loaded group nodes, including those not visible due to their containing group been closed. This means there could potentially be a huge number of groups expanded, so this method should be used very wisely to not create massive amount of server requests and loading a large amount of data.

Calling expandAll() and collapseAll() will have no impact on rows yet to be loaded.

To open only specific groups, e.g. only groups at the top level, then use the forEachNode() callback and open / close the row using setExpanded() as follows:

api.forEachNode(node => {
    if (node.group && node.level == 0) {
        node.setExpanded(true);
    }
});

The example below demonstrates these techniques. Note the following:

• Clicking 'Expand All' will expand all loaded group rows. Doing this when the grid initially loads will expand all Year groups. Clicking it a second time (after Year groups have loaded) will cause all Year groups as well as their children Country groups to be expanded - this is a heavier operation with 100's of rows to expand.

• Clicking 'Collapse All' will collapse all rows.

• Clicking 'Expand Top Level Only' will expand Years only, even if more group rows are loaded..

By default, the grid will not show row counts beside the group names. If you do want row counts, you need to implement the getChildCount(dataItem) callback for the grid. The callback provides you with the row data; it is your application's responsibility to know what the child row count is. The suggestion is you set this information into the row data item you provide to the grid.

const gridOptions = {
    getChildCount: data => {
        
        return data.childCount;
    },

    
}

It is possible the data provided has composite objects, in which case it's more difficult for the grid to extract group names. This can be worked with using value getters or embedded fields (i.e. the field attribute has dot notation).

In the example below, all rows are modified so that the rows look something like this:

{
    
    country: {
        name: 'Ireland',
        code: 'IRE'
    },

    
    year: {
        name: '2012',
        shortName: "'12"
    },

    
    ...
}

Then the columns are set up so that country uses a valueGetter that uses the field with dot notation, i.e. data.country.name

By default the grid will fully purge the grid when impacted by the change in filters. The grid can be configured to only refresh when the group has been directly impacted by enabling serverSideOnlyRefreshFilteredGroups. Be aware, this can mean your grid may have empty group rows. This is because the grid will not refresh the groups above the groups it deems impacted by the filter.

In the example below, note the following:

• Filtering by Gold, Silver or Bronze fully purges the grid, this is because they have aggregations applied.
• Applying a filter to the Year column does not purge the entire grid, and instead only refreshes the Year group rows.
• The example enables serverSideOnlyRefreshFilteredGroups, note that if you apply a filter to Year with the value 1900, no leaf rows exist in any group.

Continue to the next section to learn about SSRM Pivoting.

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4