Change expandable row height according to its expandedRowHeight property

Added "expandedRowHeight" property to the expanded row.
If it is not defined, the grid's default is used.
Changed the template files to use the "expandedRowHeight" instead of the
grid's default.

Added "rowExpandedBeforeStateChanged" event to "expandable" feature

Can now hook to the event before the change. One scenario this can be
helpful is to dynamically change the expandedRowHeight

Author: YonatanKra

src/features/expandable/js/expandable.js

@@ -117,6 +117,8 @@
                * </pre>
                * @param {GridRow} row the row that was expanded
                */
+              rowExpandedBeforeStateChanged: function(scope,row){
+              },
               rowExpandedStateChanged: function (scope, row) {
               }
             }
@@ -187,9 +189,15 @@
       },
 
       toggleRowExpansion: function (grid, row) {
+        // trigger the "before change" event. Can change row height dynamically this way.
+        grid.api.expandable.raise.rowExpandedBeforeStateChanged(row);
         row.isExpanded = !row.isExpanded;
+        if (angular.isUndefined(row.expandedRowHeight)){
+          row.expandedRowHeight = grid.options.expandableRowHeight;
+        }
+              
         if (row.isExpanded) {
-          row.height = row.grid.options.rowHeight + grid.options.expandableRowHeight;
+          row.height = row.grid.options.rowHeight + row.expandedRowHeight;
         }
         else {
           row.height = row.grid.options.rowHeight;

src/features/expandable/less/expandable.less

@@ -12,13 +12,18 @@
     }
 
   }
+}
 
 
+.ui-grid-cell.ui-grid-disable-selection.ui-grid-row-header-cell{
+  pointer-events: none;
+}
+.ui-grid-expandable-buttons-cell i{
+  pointer-events: all;
 }
 
 .scrollFiller {
   float:left;
   border:1px solid @borderColor;
 }
 
-.ui-grid-expandable-buttons-cell { }

src/features/expandable/templates/expandableRow.html

@@ -3,5 +3,5 @@
   ng-if="expandableRow.shouldRenderExpand()"
   class="expandableRow"
   style="float:left; margin-top: 1px; margin-bottom: 1px"
-  ng-style="{width: (grid.renderContainers.body.getCanvasWidth()) + 'px', height: grid.options.expandableRowHeight + 'px'}">
+  ng-style="{width: (grid.renderContainers.body.getCanvasWidth()) + 'px', height: row.expandedRowHeight + 'px'}">
 </div>

src/features/expandable/templates/expandableScrollFiller.html

@@ -1,9 +1,9 @@
 <div
   ng-if="expandableRow.shouldRenderFiller()"
   ng-class="{scrollFiller:true, scrollFillerClass:(colContainer.name === 'body')}"
-  ng-style="{ width: (grid.getViewportWidth()) + 'px', height: grid.options.expandableRowHeight + 2 + 'px', 'margin-left': grid.options.rowHeader.rowHeaderWidth + 'px' }">
+  ng-style="{ width: (grid.getViewportWidth()) + 'px', height: row.expandedRowHeight + 2 + 'px', 'margin-left': grid.options.rowHeader.rowHeaderWidth + 'px' }">
   <i
     class="ui-grid-icon-spin5 ui-grid-animate-spin"
-    ng-style="{'margin-top': ( grid.options.expandableRowHeight/2 - 5) + 'px', 'margin-left' : ((grid.getViewportWidth() - grid.options.rowHeader.rowHeaderWidth)/2 - 5) + 'px'}">
+    ng-style="{'margin-top': ( row.expandedRowHeight/2 - 5) + 'px', 'margin-left' : ((grid.getViewportWidth() - grid.options.rowHeader.rowHeaderWidth)/2 - 5) + 'px'}">
   </i>
 </div>