iteration of master / slave grids

docs/angular-grid-lock/exampleLocking.js

@@ -10,10 +10,11 @@ module.controller("exampleCtrl", function($scope, $http) {
         {headerName: "Year", field: "year", width: 90},
         {headerName: "Date", field: "date", width: 110},
         {headerName: "Sport", field: "sport", width: 110},
-        {headerName: "Gold", field: "gold", width: 100},
-        {headerName: "Silver", field: "silver", width: 100},
-        {headerName: "Bronze", field: "bronze", width: 100},
-        {headerName: "Total", field: "total", width: 100}
+        {headerName: "Total", headerGroup: "Medals", headerGroupShow: 'closed', field: "total", valueGetter: "data.gold + data.silver + data.bronze", width: 100},
+        {headerName: "Gold", headerGroup: "Medals", headerGroupShow: 'open', field: "gold", width: 100},
+        {headerName: "Silver", headerGroup: "Medals", headerGroupShow: 'open', field: "silver", width: 100},
+        {headerName: "Bronze", headerGroup: "Medals", headerGroupShow: 'open', field: "bronze", width: 100},
+        {headerName: "Total", headerGroup: "Medals", headerGroupShow: 'open', field: "total", width: 100}
     ];
 
     var gridOptionsTop = {

src/ts/columnChangeEvent.ts

@@ -5,6 +5,7 @@ module awk.grid {
 
         private type: string;
         private column: Column;
+        private columnGroup: ColumnGroup;
 
         /** A new set of columns has been entered, everything has potentially changed. */
         public static TYPE_EVERYTHING = 'everything';
@@ -27,9 +28,10 @@ module awk.grid {
         /** One or more columns was resized. If just one, the column in the event is set. */
         public static TYPE_COLUMN_RESIZED = 'columnResized';
 
-        constructor(type: string, column: Column) {
+        constructor(type: string, column: Column, columnGroup: ColumnGroup) {
             this.type = type;
             this.column = column;
+            this.columnGroup = columnGroup;
         }
         
         public getType(): string {
@@ -40,6 +42,10 @@ module awk.grid {
             return this.column;
         }
 
+        public getColumnGroup(): ColumnGroup {
+            return this.columnGroup;
+        }
+
         public isPivotChanged(): boolean {
             return this.type === ColumnChangeEvent.TYPE_PIVOT_CHANGE || this.type === ColumnChangeEvent.TYPE_EVERYTHING;
         }

src/ts/columnController.ts

@@ -356,8 +356,18 @@ module awk.grid {
             this.changedListeners.push(listener);
         }
 
-        public fireColumnChanged(type: string, column?: Column): void {
-            var event = new ColumnChangeEvent(type, column);
+        public getColumnGroup(name: string): ColumnGroup {
+            if (this.columnGroups) {
+                for (var i = 0; i<this.columnGroups.length; i++) {
+                    if (this.columnGroups[i].name === name) {
+                        return this.columnGroups[i];
+                    }
+                }
+            }
+        }
+
+        public fireColumnChanged(type: string, column?: Column, columnGroup?: ColumnGroup): void {
+            var event = new ColumnChangeEvent(type, column, columnGroup);
             for (var i = 0; i < this.changedListeners.length; i++) {
                 this.changedListeners[i](event);
             }
@@ -392,11 +402,11 @@ module awk.grid {
         }
 
         // called by headerRenderer - when a header is opened or closed
-        public headerGroupOpened(group: any): void {
-            group.expanded = !group.expanded;
+        public columnGroupOpened(group: ColumnGroup, newValue: boolean): void {
+            group.expanded = newValue;
             this.updateGroups();
             this.updateDisplayedColumns();
-            this.fireColumnChanged(ColumnChangeEvent.TYPE_COLUMN_GROUP_OPENED);
+            this.fireColumnChanged(ColumnChangeEvent.TYPE_COLUMN_GROUP_OPENED, null, group);
         }
 
         // called from API

src/ts/headerRendering/renderedHeaderGroupCell.ts

@@ -144,7 +144,8 @@ module awk.grid {
 
             var that = this;
             eGroupIcon.onclick = function() {
-                that.columnController.headerGroupOpened(that.columnGroup);
+                var newExpandedValue = !that.columnGroup.expanded;
+                that.columnController.columnGroupOpened(that.columnGroup, newExpandedValue);
             };
         }
 

src/ts/masterSlaveService.ts

@@ -51,6 +51,7 @@ module awk.grid {
                 });
             }
         }
+
         public onScrollEvent(horizontalScroll: number): void {
             this.consuming = true;
             this.gridPanel.setHorizontalScrollPosition(horizontalScroll);
@@ -68,13 +69,23 @@ module awk.grid {
                 slaveColumn = this.columnController.getColumn(masterColumn.colId);
             }
 
+            var masterColumnGroup = event.getColumnGroup();
+            var slaveColumnGroup: ColumnGroup;
+            if (masterColumnGroup) {
+                slaveColumnGroup = this.columnController.getColumnGroup(masterColumnGroup.name);
+            }
+
             switch (event.getType()) {
-                case ColumnChangeEvent.TYPE_EVERYTHING: break;
-                case ColumnChangeEvent.TYPE_PIVOT_CHANGE: break;
-                case ColumnChangeEvent.TYPE_VALUE_CHANGE: break;
-                case ColumnChangeEvent.TYPE_COLUMN_MOVED: break;
-                case ColumnChangeEvent.TYPE_COLUMN_VISIBLE: break;
-                case ColumnChangeEvent.TYPE_COLUMN_GROUP_OPENED: break;
+                //case ColumnChangeEvent.TYPE_EVERYTHING:
+                //case ColumnChangeEvent.TYPE_PIVOT_CHANGE:
+                //case ColumnChangeEvent.TYPE_VALUE_CHANGE:
+                //case ColumnChangeEvent.TYPE_COLUMN_MOVED:
+                //case ColumnChangeEvent.TYPE_COLUMN_VISIBLE:
+                case ColumnChangeEvent.TYPE_COLUMN_GROUP_OPENED:
+                    if (masterColumnGroup && slaveColumnGroup) {
+                        this.columnController.columnGroupOpened(slaveColumnGroup, masterColumnGroup.expanded);
+                    }
+                    break;
                 case ColumnChangeEvent.TYPE_COLUMN_RESIZED:
                     this.columnController.setColumnWidth(slaveColumn, masterColumn.actualWidth);
                     break;