fix(grouping): Grouping with Filter should work together, closes #57

Author: Ghislain Beaulac

ISSUE_TEMPLATE.md

@@ -0,0 +1,40 @@
+<!--
+BUGS: Please use this template.
+
+The HTML comments below are for your reference, and are not displayed
+when your issue is submitted, feel free to leave them.
+
+CHOOSE the relevant headings, DELETE the other(s).
+-->
+**I'm submitting a bug report**
+**I'm submitting a feature request**
+
+* **Library Version:**
+major.minor.patch
+
+<!--
+If you think the environment might have an influence then please provide
+else you can omit.
+-->
+**Please tell us about your environment:**
+* **Operating System:**
+OSX 10.x|Linux (distro)|Windows [7|8|8.1|10]
+
+
+* **Browser:**
+all | Chrome XX | Firefox XX | Edge XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView
+
+* **Language:**
+TypeScript X.X
+
+
+**Current behavior:**
+
+
+**Expected/desired behavior:**
+
+
+* **What is the expected behavior?**
+
+
+* **What is the motivation / use case for changing the behavior?**

src/app/examples/grid-grouping.component.ts

@@ -4,6 +4,7 @@ import {
   Aggregators,
   Column,
   FieldType,
+  Filters,
   Formatters,
   GridOption,
   GroupTotalFormatters,
@@ -51,6 +52,7 @@ export class GridGroupingComponent implements OnInit, OnDestroy {
         id: 'sel', name: '#', field: 'num', width: 40,
         maxWidth: 70,
         resizable: true,
+        filterable: true,
         selectable: false,
         focusable: false
       },
@@ -59,11 +61,14 @@ export class GridGroupingComponent implements OnInit, OnDestroy {
         width: 50,
         minWidth: 50,
         cssClass: 'cell-title',
+        filterable: true,
         sortable: true
       },
       {
         id: 'duration', name: 'Duration', field: 'duration',
         minWidth: 50, width: 60,
+        filterable: true,
+        filter: { model: Filters.slider, operator: '>=' },
         sortable: true,
         type: FieldType.number,
         groupTotalsFormatter: GroupTotalFormatters.sumTotals,
@@ -73,40 +78,62 @@ export class GridGroupingComponent implements OnInit, OnDestroy {
         id: '%', name: '% Complete', field: 'percentComplete',
         minWidth: 70, width: 90,
         formatter: Formatters.percentCompleteBar,
+        filterable: true,
+        filter: { model: Filters.compoundSlider },
         sortable: true,
         groupTotalsFormatter: GroupTotalFormatters.avgTotalsPercentage,
         params: { groupFormatterPrefix: '<i>Avg</i>: ' }
       },
       {
         id: 'start', name: 'Start', field: 'start',
         minWidth: 60,
+        filterable: true,
+        filter: { model: Filters.compoundDate },
         sortable: true,
+        type: FieldType.dateIso,
         formatter: Formatters.dateIso,
         exportWithFormatter: true
       },
       {
         id: 'finish', name: 'Finish', field: 'finish',
         minWidth: 60,
+        filterable: true,
+        filter: { model: Filters.compoundDate },
         sortable: true,
+        type: FieldType.dateIso,
         formatter: Formatters.dateIso,
         exportWithFormatter: true
       },
       {
         id: 'cost', name: 'Cost', field: 'cost',
         minWidth: 70,
         width: 100,
+        filterable: true,
+        filter: { model: Filters.compoundInput },
+        type: FieldType.number,
         sortable: true,
         exportWithFormatter: true,
         formatter: Formatters.dollar,
-        groupTotalsFormatter: GroupTotalFormatters.sumTotals,
-        params: { groupFormatterPrefix: '<b>Total</b>: $' /*, groupFormatterSuffix: ' USD'*/ }
+        groupTotalsFormatter: GroupTotalFormatters.sumTotalsDollar,
+        params: { groupFormatterPrefix: '<b>Total</b>: ' /*, groupFormatterSuffix: ' USD'*/ }
       },
       {
         id: 'effort-driven', name: 'Effort Driven',
         minWidth: 20, width: 80, maxWidth: 80,
         cssClass: 'cell-effort-driven',
         field: 'effortDriven',
-        formatter: Formatters.checkmark, sortable: true
+        formatter: Formatters.checkmark,
+        sortable: true,
+        filterable: true,
+        filter: {
+          collection: [{ value: '', label: '' }, { value: true, label: 'True' }, { value: false, label: 'False' }],
+          model: Filters.singleSelect,
+
+          // we could add certain option(s) to the "multiple-select" plugin
+          filterOptions: {
+            autoDropWidth: true
+          },
+        }
       }
     ];
 
@@ -115,6 +142,7 @@ export class GridGroupingComponent implements OnInit, OnDestroy {
         containerId: 'demo-container',
         sidePadding: 15
       },
+      enableFiltering: true,
       enableGrouping: true,
       exportOptions: {
         sanitizeDataExport: true

src/app/modules/angular-slickgrid/components/angular-slickgrid.component.ts

@@ -2,7 +2,6 @@
 import 'jquery-ui-dist/jquery-ui';
 import 'slickgrid/lib/jquery.event.drag-2.3.0';
 import 'slickgrid/slick.core';
-import 'slickgrid/slick.dataview';
 import 'slickgrid/slick.grid';
 import 'slickgrid/slick.dataview';
 import 'slickgrid/slick.groupitemmetadataprovider';
@@ -184,10 +183,7 @@ export class AngularSlickgridComponent implements AfterViewInit, OnDestroy, OnIn
 
     if (this.gridOptions.enableGrouping) {
       this.groupItemMetadataProvider = new Slick.Data.GroupItemMetadataProvider();
-      this._dataView = new Slick.Data.DataView({
-        groupItemMetadataProvider: this.groupItemMetadataProvider,
-        inlineFilters: true
-      });
+      this._dataView = new Slick.Data.DataView({ groupItemMetadataProvider: this.groupItemMetadataProvider });
     } else {
       this._dataView = new Slick.Data.DataView();
     }
@@ -278,7 +274,7 @@ export class AngularSlickgridComponent implements AfterViewInit, OnDestroy, OnIn
 
   /**
    * Define what our internal Post Process callback, it will execute internally after we get back result from the Process backend call
-   * For now, this is GraphQL Service only feautre and it will basically refresh the Dataset & Pagination without having the user to create his own PostProcess every time
+   * For now, this is GraphQL Service only feature and it will basically refresh the Dataset & Pagination without having the user to create his own PostProcess every time
    */
   createBackendApiInternalPostProcessCallback(gridOptions: GridOption) {
     if (gridOptions && gridOptions.backendServiceApi) {