Add more complex custom group by sample for wc grid.

samples/grids/grid/groupby-custom/index.html

@@ -17,7 +17,15 @@
     <div id="root">
 
 <div class="container sample">
-
+  <div style="align-self:flex-end">
+  <igc-dropdown>
+    <igc-button slot="target">Group By Options</igc-button>
+    <igc-dropdown-item id="day">Day</igc-dropdown-item>
+    <igc-dropdown-item id="week">Week</igc-dropdown-item>
+    <igc-dropdown-item id="month" selected>Month</igc-dropdown-item>
+    <igc-dropdown-item id="year">Year</igc-dropdown-item>
+  </igc-dropdown>
+  </div>
     <div class="container fill">
         <igc-grid
         auto-generate="false"
@@ -38,6 +46,7 @@
             <igc-column
             name="OrderDate"
             id="OrderDate"
+            data-type="date"
             field="OrderDate"
             header="Order Date">
             </igc-column>

samples/grids/grid/groupby-custom/src/index.ts

@@ -1,11 +1,11 @@
 import { IgcPropertyEditorPanelModule } from 'igniteui-webcomponents-layouts';
 import 'igniteui-webcomponents-grids/grids/combined';
-import { ComponentRenderer, PropertyEditorPanelDescriptionModule, WebGridDescriptionModule } from 'igniteui-webcomponents-core';
-import { IgcGridComponent, IgcColumnComponent } from 'igniteui-webcomponents-grids/grids';
+import { IgcGridComponent, IgcColumnComponent, SortingDirection, IgcGroupByRowTemplateContext } from 'igniteui-webcomponents-grids/grids';
 import { InvoicesDataItem, InvoicesData } from './InvoicesData';
-
+import { defineComponents, IgcButtonComponent, IgcDropdownComponent, IgcBadgeComponent } from 'igniteui-webcomponents';
+defineComponents(IgcButtonComponent, IgcDropdownComponent, IgcBadgeComponent);
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-import { ModuleManager } from 'igniteui-webcomponents-core';
+import { html, ModuleManager } from 'igniteui-webcomponents-core';
 
 import "./index.css";
 
@@ -15,39 +15,64 @@ ModuleManager.register(
 
 export class Sample {
 
-    private grid: IgcGridComponent
-    private orderID: IgcColumnComponent
-    private shipCountry: IgcColumnComponent
-    private orderDate: IgcColumnComponent
-    private postalCode: IgcColumnComponent
-    private discontinued: IgcColumnComponent
-    private shipName: IgcColumnComponent
-    private shipperName: IgcColumnComponent
-    private salesPerson: IgcColumnComponent
-    private unitPrice: IgcColumnComponent
-    private quantity: IgcColumnComponent
+    public groupByMode = "Month";
+    public getParsedDate(date: any) {
+        return {
+            day: date.getDay(),
+            month: date.getMonth() + 1,
+            year: date.getFullYear(),
+        };
+    }
+    public getWeekOfDate(date:any) {
+        const onejan = new Date(date.getFullYear(), 0, 1);
+        const week = Math.ceil((((date.getTime() - onejan.getTime()) / 86400000) + onejan.getDay() + 1) / 7);
+        return week;
+    }
+
+    private grid: IgcGridComponent;
     private _bind: () => void;
+    private groupExpression = [
+        { fieldName: 'OrderDate', dir: SortingDirection.Desc,
+        groupingComparer: (a:any, b: any) => {
+                const dateA = this.getParsedDate(a);
+                const dateB = this.getParsedDate(b);
+                if (this.groupByMode === 'Month') {
+                    return dateA.month === dateB.month ? 0 : -1;
+                } else if (this.groupByMode === "Year") {
+                    return dateA.year === dateB.year ? 0 : -1;
+                } else if (this.groupByMode === 'Week') {
+                    return this.getWeekOfDate(a) === this.getWeekOfDate(b) ? 0 : -1;
+                 }
+                return dateA.day === dateB.day && dateA.month === dateB.month ? 0 : -1;
+            }
+        }
+    ];
 
     constructor() {
         var grid = this.grid = document.getElementById('grid') as IgcGridComponent;
-        var orderID = this.orderID = document.getElementById('OrderID') as IgcColumnComponent;
-        var shipCountry = this.shipCountry = document.getElementById('ShipCountry') as IgcColumnComponent;
-        var orderDate = this.orderDate = document.getElementById('OrderDate') as IgcColumnComponent;
-        var postalCode = this.postalCode = document.getElementById('PostalCode') as IgcColumnComponent;
-        var discontinued = this.discontinued = document.getElementById('Discontinued') as IgcColumnComponent;
-        var shipName = this.shipName = document.getElementById('ShipName') as IgcColumnComponent;
-        var shipperName = this.shipperName = document.getElementById('ShipperName') as IgcColumnComponent;
-        var salesPerson = this.salesPerson = document.getElementById('SalesPerson') as IgcColumnComponent;
-        var unitPrice = this.unitPrice = document.getElementById('UnitPrice') as IgcColumnComponent;
-        var quantity = this.quantity = document.getElementById('Quantity') as IgcColumnComponent;
-
         this._bind = () => {
             grid.data = this.invoicesData;
+            grid.groupingExpressions = this.groupExpression;
+            grid.groupRowTemplate = this.groupByRowTemplate;
         }
         this._bind();
 
+        var day = document.getElementById('day');
+        var week = document.getElementById('week');
+        var month = document.getElementById('month');
+        var year = document.getElementById('year');
+
+        day!.addEventListener('click', this.handleClick);
+        week!.addEventListener('click', this.handleClick);
+        month!.addEventListener('click', this.handleClick);
+        year!.addEventListener('click', this.handleClick);
     }
 
+    private handleClick = (event: MouseEvent) => {
+       this.groupByMode = (event.target as any).value;
+       this.grid.groupingExpressions = this.groupExpression;
+    };
+
     private _invoicesData: InvoicesData = null;
     public get invoicesData(): InvoicesData {
         if (this._invoicesData == null)
@@ -57,15 +82,29 @@ export class Sample {
         return this._invoicesData;
     }
 
-    private _componentRenderer: ComponentRenderer = null;
-    public get renderer(): ComponentRenderer {
-        if (this._componentRenderer == null) {
-            this._componentRenderer = new ComponentRenderer();
-            var context = this._componentRenderer.context;
-            PropertyEditorPanelDescriptionModule.register(context);
-            WebGridDescriptionModule.register(context);
-        }
-        return this._componentRenderer;
+    public groupByRowTemplate = (ctx: IgcGroupByRowTemplateContext) => {
+        const groupRow: any = (ctx as any)["$implicit"];
+
+        const dateTypes = {
+            "Day":  groupRow.value.toLocaleDateString(),
+            "Month": this.getMonthName(groupRow.value),
+            "Year": groupRow.value.getFullYear(),
+            "Week": this.getWeekOfDate(groupRow.value)
+          };
+
+        const value = (dateTypes as any)[this.groupByMode];
+        return html`<div>
+    <span style="color:#09f;">${groupRow.expression.fieldName} :</span>
+    <span>${value}</span>
+    <igc-badge>${groupRow.records.length}</igc-badge>
+    </div>`;
+    }
+
+    private getMonthName(date: Date) {
+        const monthNames = ["January", "February", "March", "April", "May", "June",
+        "July", "August", "September", "October", "November", "December"
+      ];
+       return monthNames[date.getMonth()];
     }
 
 }