Merge pull request #4343 from Namek/expandable_row_height---author-yccteam

Dynamically expanded row height

Author: swalters

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>