From 9e2df5f3e8909125922b32d7c7b71516378a2c8f Mon Sep 17 00:00:00 2001
From: yccteam <kra.yonatan@gmail.com>
Date: Thu, 2 Apr 2015 23:16:22 +0300
Subject: [PATCH] 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
---
 src/features/expandable/js/expandable.js               | 10 +++++++++-
 src/features/expandable/less/expandable.less           |  7 ++++++-
 src/features/expandable/templates/expandableRow.html   |  2 +-
 .../expandable/templates/expandableScrollFiller.html   |  4 ++--
 4 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/src/features/expandable/js/expandable.js b/src/features/expandable/js/expandable.js
index e1321c58a2..3b97ed08fc 100644
--- a/src/features/expandable/js/expandable.js
+++ b/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;
diff --git a/src/features/expandable/less/expandable.less b/src/features/expandable/less/expandable.less
index 389e85b66f..291a964042 100644
--- a/src/features/expandable/less/expandable.less
+++ b/src/features/expandable/less/expandable.less
@@ -12,8 +12,14 @@
     }
 
   }
+}
 
 
+.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 {
@@ -21,4 +27,3 @@
   border:1px solid @borderColor;
 }
 
-.ui-grid-expandable-buttons-cell { }
diff --git a/src/features/expandable/templates/expandableRow.html b/src/features/expandable/templates/expandableRow.html
index 827f057d1e..91d3d218aa 100644
--- a/src/features/expandable/templates/expandableRow.html
+++ b/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>
diff --git a/src/features/expandable/templates/expandableScrollFiller.html b/src/features/expandable/templates/expandableScrollFiller.html
index 3fbd65a634..31088fd1f3 100644
--- a/src/features/expandable/templates/expandableScrollFiller.html
+++ b/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>