DataViewModel Supports Multiple, Settable SortBy and GroupBy Fields

CHANGELOG.md

@@ -7,7 +7,9 @@
 * `GridModel` and `DataViewModel` now support `groupRowHeight`, `groupRowRenderer` and
   `groupRowElementRenderer` configs. Grouping is new in general to `DataViewModel`, which now takes
   a `groupBy` config.
-* `DataViewModel` also now supports additional configs from the underlying `GridModel` that make
+  * `DataViewModel` also allows for settable and multiple groupings and sorters, via `GridModel` methods
+  `setGroupBy()` and `setSortBy()`.
+* `DataViewModel` now supports additional configs from the underlying `GridModel` that make
   sense in a `DataView` context, such as `showHover` and `rowBorders`.
 * `TabContainerModel` now accepts a `track` property (default false) for easily tracking tab views
   via Hoist's built-in activity tracking.

cmp/dataview/DataViewModel.js

@@ -6,11 +6,10 @@
  */
 
 import {GridModel} from '@xh/hoist/cmp/grid';
-import {GridSorter} from '@xh/hoist/cmp/grid/impl/GridSorter';
 import {HoistModel, managed} from '@xh/hoist/core';
 import {bindable} from '@xh/hoist/mobx';
 import {throwIf} from '@xh/hoist/utils/js';
-import {castArray, isNumber} from 'lodash';
+import {isNumber} from 'lodash';
 import {apiRemoved} from '../../utils/js';
 
 /**
@@ -37,7 +36,7 @@ export class DataViewModel {
      * @param {Column~elementRendererFn} c.elementRenderer - function returning a React element for
      *      each data row.
      * @param {number} itemHeight - Row height (in px) for each item displayed in the view.
-     * @param {string} [c.groupBy] - Column ID by which to do full-width row grouping.
+     * @param {(string|string[]} [c.groupBy] - colId(s) by which to do full-width row grouping.
      * @param {number} [c.groupRowHeight] - Height (in px) of a group row.
      * @param {Grid~groupRowRendererFn} [c.groupRowRenderer] - function returning a string used to
      *      render group rows.
@@ -67,7 +66,7 @@ export class DataViewModel {
         groupRowHeight,
         groupRowRenderer,
         groupRowElementRenderer,
-        sortBy = [],
+        sortBy,
         selModel,
         emptyText,
         showHover = false,
@@ -77,8 +76,6 @@ export class DataViewModel {
         rowClassFn,
         ...restArgs
     }) {
-        sortBy = castArray(sortBy);
-        throwIf(sortBy.length > 1, 'DataViewModel does not support multiple sorters.');
         throwIf(!isNumber(itemHeight), 'Must specify DataViewModel.itemHeight as a number to set a fixed pixel height for each item.');
         apiRemoved(restArgs.rowCls, 'rowCls', 'Use \'rowClassFn\' instead.');
         apiRemoved(restArgs.itemRenderer, 'itemRenderer', 'Use \'elementRenderer\' instead.');
@@ -88,26 +85,22 @@ export class DataViewModel {
 
         // We only have a single visible column in our DataView grid and rely on ag-Grid for sorting,
         // initially and through updates via transactions. For this reason, we set the field of our
-        // single column to the desired sort field. (The field setting should not have any other
-        // meaningful impact on the grid, since we use a custom renderer and mark it as complex to
-        // ensure each item re-renders on any record change.)
-        let field = 'id';
-        if (sortBy.length === 1) {
-            let sorter = sortBy[0];
-            if (!(sorter instanceof GridSorter)) sorter = GridSorter.parse(sorter);
-            field = sorter.colId;
-        }
+        // single visible column to the desired sortBy field while other fields are hidden columns to allow
+        // for multiple sorters and groupings or using setGroupBy and setSortBy methods on the model itself.
 
-        const columns = [{
-            field,
+        const columns = store.fields.map(field => {
+            return {
+                field,
+                hidden: true
+            };
+        });
+
+        columns.push({
+            colId: 'xhDisplayColumn',
             flex: true,
             elementRenderer,
             rendererIsComplex: true
-        }];
-
-        if (groupBy) {
-            columns.push({field: groupBy, hidden: true});
-        }
+        });
 
         this.gridModel = new GridModel({
             store,
@@ -135,11 +128,15 @@ export class DataViewModel {
     get hasSelection()          {return this.gridModel.hasSelection}
     get selection()             {return this.gridModel.selection}
     get selectedRecord()        {return this.gridModel.selectedRecord}
+    get groupBy()               {return this.gridModel.groupBy}
+    get sortBy()                {return this.gridModel.sortBy}
 
     selectFirst()               {return this.gridModel.selectFirst()}
     ensureSelectionVisible()    {return this.gridModel.ensureSelectionVisible()}
     doLoadAsync(loadSpec)       {return this.gridModel.doLoadAsync(loadSpec)}
     loadData(...args)           {return this.gridModel.loadData(...args)}
     updateData(...args)         {return this.gridModel.updateData(...args)}
     clear()                     {return this.gridModel.clear()}
+    setGroupBy(colIds)          {return this.gridModel.setGroupBy(colIds)}
+    setSortBy(sorters)          {return this.gridModel.setSortBy(sorters)}
 }

cmp/grid/Grid.js

@@ -201,6 +201,7 @@ class LocalModel {
             },
             popupParent: document.querySelector('body'),
             suppressAggFuncInHeader: true,
+            suppressMakeColumnVisibleAfterUnGroup: true,
             icons: {
                 groupExpanded: convertIconToSvg(
                     Icon.angleDown(),