Skip to content

Commit

Permalink
feat(expandable): Enhance the expandable grid feature.
Browse files Browse the repository at this point in the history 
* Add ability to expand rows via double click.
* Removed the extra loader.
* Added $scope.row.element
* Add event on expanded render complete.
  • Loading branch information
@cybermerlin @mportuga
cybermerlin authored and mportuga committed Jun 9, 2018
1 parent c0303b5 commit ec13255
Show file tree
Hide file tree
Showing 10 changed files with 126 additions and 50 deletions.
122 changes: 89 additions & 33 deletions src/features/expandable/js/expandable.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,15 +23,28 @@
*
* @description Services for the expandable grid
*/
module.service('uiGridExpandableService', ['gridUtil', '$compile', function (gridUtil, $compile) {
module.service('uiGridExpandableService', ['gridUtil', function (gridUtil) {
var service = {
initializeGrid: function (grid) {

grid.expandable = {};
grid.expandable.expandedAll = false;

/**
* @ngdoc object
* @ngdoc boolean
* @name enableOnDblClickExpand
* @propertyOf ui.grid.expandable.api:GridOptions
* @description Defaults to true.
* @example
* <pre>
* $scope.gridOptions = {
* onDblClickExpand: false
* }
* </pre>
*/
grid.options.enableOnDblClickExpand = grid.options.enableOnDblClickExpand !== false;
/**
* @ngdoc boolean
* @name enableExpandable
* @propertyOf ui.grid.expandable.api:GridOptions
* @description Whether or not to use expandable feature, allows you to turn off expandable on specific grids
Expand Down Expand Up @@ -134,26 +147,41 @@
* @eventOf ui.grid.expandable.api:PublicApi
* @description raised when row is expanding or collapsing
* <pre>
* gridApi.expandable.on.rowExpandedBeforeStateChanged(scope,function(row){})
* gridApi.expandable.on.rowExpandedBeforeStateChanged(scope,function(row, event){})
* </pre>
* @param {scope} scope the application scope
* @param {GridRow} row the row that was expanded
* @param {Event} evt object if raised from an event
*/
rowExpandedBeforeStateChanged: function(scope, row){
},
rowExpandedBeforeStateChanged: function(scope, row, evt){},

/**
* @ngdoc event
* @name rowExpandedStateChanged
* @eventOf ui.grid.expandable.api:PublicApi
* @description raised when row expanded or collapsed
* <pre>
* gridApi.expandable.on.rowExpandedStateChanged(scope,function(row){})
* gridApi.expandable.on.rowExpandedStateChanged(scope,function(row, event){})
* </pre>
* @param {scope} scope the application scope
* @param {GridRow} row the row that was expanded
* @param {Event} evt object if raised from an event
*/
rowExpandedStateChanged: function (scope, row) {
}
rowExpandedStateChanged: function (scope, row, evt) {},

/**
* @ngdoc event
* @name rowExpandedRendered
* @eventOf ui.grid.expandable.api:PublicApi
* @description raised when expanded row is rendered
* <pre>
* gridApi.expandable.on.rowExpandedRendered(scope,function(row, event){})
* </pre>
* @param {scope} scope the application scope
* @param {GridRow} row the row that was expanded
* @param {Event} evt object if raised from an event
*/
rowExpandedRendered: function (scope, row, evt) {}
}
},

Expand All @@ -165,14 +193,15 @@
* @methodOf ui.grid.expandable.api:PublicApi
* @description Toggle a specific row
* <pre>
* gridApi.expandable.toggleRowExpansion(rowEntity);
* gridApi.expandable.toggleRowExpansion(rowEntity, event);
* </pre>
* @param {object} rowEntity the data entity for the row you want to expand
* @param {Event} [e] event (if exist)
*/
toggleRowExpansion: function (rowEntity) {
toggleRowExpansion: function (rowEntity, e) {
var row = grid.getRow(rowEntity);
if (row !== null) {
service.toggleRowExpansion(grid, row);
service.toggleRowExpansion(grid, row, e);
}
},

Expand Down Expand Up @@ -258,7 +287,13 @@
grid.api.registerMethodsFromObject(publicApi.methods);
},

toggleRowExpansion: function (grid, row) {
/**
*
* @param grid
* @param row
* @param {Event} [e] event (if exist)
*/
toggleRowExpansion: function (grid, row, e) {
// trigger the "before change" event. Can change row height dynamically this way.
grid.api.expandable.raise.rowExpandedBeforeStateChanged(row);
/**
Expand Down Expand Up @@ -287,7 +322,17 @@
row.height = row.grid.options.rowHeight;
grid.expandable.expandedAll = false;
}
grid.api.expandable.raise.rowExpandedStateChanged(row);
grid.api.expandable.raise.rowExpandedStateChanged(row, e);

// fire event on render complete
function _tWatcher(){
if (row.expandedRendered) {
grid.api.expandable.raise.rowExpandedRendered(row, e);
} else {
window.setTimeout(_tWatcher, 1e2);
}
}
_tWatcher();
},

expandAllRows: function(grid) {
Expand Down Expand Up @@ -341,6 +386,7 @@
* }
* </pre>
*/

module.directive('uiGridExpandable', ['uiGridExpandableService', '$templateCache',
function (uiGridExpandableService, $templateCache) {
return {
Expand All @@ -364,16 +410,14 @@
exporterSuppressExport: true,
enableColumnResizing: false,
enableColumnMenu: false,
width: uiGridCtrl.grid.options.expandableRowHeaderWidth || 40
width: uiGridCtrl.grid.options.expandableRowHeaderWidth || 30
};
expandableRowHeaderColDef.cellTemplate = $templateCache.get('ui-grid/expandableRowHeader');
expandableRowHeaderColDef.headerCellTemplate = $templateCache.get('ui-grid/expandableTopRowHeader');
uiGridCtrl.grid.addRowHeaderColumn(expandableRowHeaderColDef, -90);
}

},
post: function ($scope, $elm, $attrs, uiGridCtrl) {
}
post: function ($scope, $elm, $attrs, uiGridCtrl) {}
};
}
};
Expand All @@ -397,7 +441,8 @@

uiGridCtrl.grid.api.core.on.renderingComplete($scope, function() {
//if a parent grid row is on the scope, then add the parentRow property to this childGrid
if ($scope.row && $scope.row.grid && $scope.row.grid.options && $scope.row.grid.options.enableExpandable) {
if ($scope.row && $scope.row.grid && $scope.row.grid.options
&& $scope.row.grid.options.enableExpandable) {

/**
* @ngdoc directive
Expand All @@ -418,12 +463,9 @@
// uiGridCtrl.grid.parentRow = newHeight;
// });
}

});
},
post: function ($scope, $elm, $attrs, uiGridCtrl) {

}
post: function ($scope, $elm, $attrs, uiGridCtrl) {}
};
}
};
Expand All @@ -432,17 +474,16 @@
/**
* @ngdoc directive
* @name ui.grid.expandable.directive:uiGridExpandableRow
* @description directive to render the expandable row template
* @description directive to render the Row template on Expand
*/
module.directive('uiGridExpandableRow',
['uiGridExpandableService', '$timeout', '$compile', 'uiGridConstants','gridUtil','$interval', '$log',
function (uiGridExpandableService, $timeout, $compile, uiGridConstants, gridUtil, $interval, $log) {
['uiGridExpandableService', '$compile', 'uiGridConstants','gridUtil',
function (uiGridExpandableService, $compile, uiGridConstants, gridUtil) {

return {
replace: false,
priority: 0,
scope: false,

compile: function () {
return {
pre: function ($scope, $elm, $attrs, uiGridCtrl) {
Expand All @@ -469,13 +510,16 @@
}
}
var expandedRowElement = angular.element(template);
$elm.append(expandedRowElement);

expandedRowElement = $compile(expandedRowElement)($scope);
$elm.append(expandedRowElement);
$scope.row.element = $elm;
$scope.row.expandedRendered = true;
});
},

post: function ($scope, $elm, $attrs, uiGridCtrl) {
$scope.row.element = $elm;
$scope.$on('$destroy', function() {
$scope.row.expandedRendered = false;
});
Expand Down Expand Up @@ -507,15 +551,28 @@
$scope.expandableRow = {};

$scope.expandableRow.shouldRenderExpand = function () {
var ret = $scope.colContainer.name === 'body' && $scope.grid.options.enableExpandable !== false && $scope.row.isExpanded && (!$scope.grid.isScrollingVertically || $scope.row.expandedRendered);
return ret;
return $scope.colContainer.name === 'body'
&& $scope.grid.options.enableExpandable !== false
&& $scope.row.isExpanded
&& (!$scope.grid.isScrollingVertically || $scope.row.expandedRendered);
};

$scope.expandableRow.shouldRenderFiller = function () {
var ret = $scope.row.isExpanded && ( $scope.colContainer.name !== 'body' || ($scope.grid.isScrollingVertically && !$scope.row.expandedRendered));
return ret;
return $scope.row.isExpanded
&& (
$scope.colContainer.name !== 'body'
|| ($scope.grid.isScrollingVertically && !$scope.row.expandedRendered));
};

if ($scope.grid.options.enableOnDblClickExpand) {
$elm.on('dblclick', function (event) {
// if necessary, it is possible for everyone to stop the processing of a single click OR
// Inside the Config in the output agent to enter a line:
// event.stopPropagation()
$scope.grid.api.expandable.toggleRowExpansion($scope.row.entity, event);
});
}

/*
* Commented out @PaulL1. This has no purpose that I can see, and causes #2964. If this code needs to be reinstated for some
* reason it needs to use drawnWidth, not width, and needs to check column visibility. It should really use render container
Expand All @@ -542,8 +599,7 @@
}*/

},
post: function ($scope, $elm, $attrs, controllers) {
}
post: function ($scope, $elm, $attrs, controllers) {}
};
}
};
Expand Down
13 changes: 6 additions & 7 deletions src/features/expandable/templates/expandableRowHeader.html
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,9 @@
<div
class="ui-grid-row-header-cell ui-grid-expandable-buttons-cell">
<div
class="ui-grid-cell-contents">
<i ng-if="!(row.groupHeader==true || row.entity.subGridOptions.disableRowExpandable)"
ng-class="{ 'ui-grid-icon-plus-squared' : !row.isExpanded, 'ui-grid-icon-minus-squared' : row.isExpanded }"
ng-click="grid.api.expandable.toggleRowExpansion(row.entity)">
<div class="ui-grid-row-header-cell ui-grid-expandable-buttons-cell">
<div class="ui-grid-cell-contents">
<i class="clickable"
ng-if="!(row.groupHeader==true || row.entity.subGridOptions.disableRowExpandable)"
ng-class="{ 'ui-grid-icon-plus-squared' : !row.isExpanded, 'ui-grid-icon-minus-squared' : row.isExpanded }"
ng-click="grid.api.expandable.toggleRowExpansion(row.entity, $event)">
</i>
</div>
</div>
5 changes: 1 addition & 4 deletions src/features/expandable/templates/expandableScrollFiller.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,5 @@
ng-if="expandableRow.shouldRenderFiller()"
ng-class="{scrollFiller:true, scrollFillerClass:(colContainer.name === 'body')}"
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': ( row.expandedRowHeight/2 - 5) + 'px', 'margin-left' : ((grid.getViewportWidth() - grid.options.rowHeader.rowHeaderWidth)/2 - 5) + 'px'}">
</i>
&nbsp;
</div>
23 changes: 22 additions & 1 deletion src/features/expandable/test/expandable.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ describe('ui.grid.expandable', function() {
scope.grid = gridApi.grid;
};

$httpBackend.when('GET', 'expandableRowTemplate.html').respond("<div class='test'></div>");
$httpBackend.when('GET', 'expandableRowTemplate.html').respond('<div class="test"></div>');
element = angular.element('<div class="col-md-5" ui-grid="gridOptions" ui-grid-expandable></div>');

$compile(element)(scope);
Expand Down Expand Up @@ -336,7 +336,28 @@ describe('ui.grid.expandable', function() {
});

describe('toggleAllRows', function() {
beforeEach(function() {
spyOn(uiGridExpandableService, 'collapseAllRows').and.callFake(angular.noop);
spyOn(uiGridExpandableService, 'expandAllRows').and.callFake(angular.noop);
});
afterEach(function() {
uiGridExpandableService.collapseAllRows.calls.reset();
uiGridExpandableService.expandAllRows.calls.reset();
});
it('should call collapseAllRows when all rows are expanded', function() {
grid.expandable = {expandedAll: true};
uiGridExpandableService.toggleAllRows(grid);

expect(uiGridExpandableService.collapseAllRows).toHaveBeenCalledWith(grid);
expect(uiGridExpandableService.expandAllRows).not.toHaveBeenCalled();
});
it('should call expandAllRows when some rows are not expanded', function() {
grid.expandable = {expandedAll: false};
uiGridExpandableService.toggleAllRows(grid);

expect(uiGridExpandableService.expandAllRows).toHaveBeenCalledWith(grid);
expect(uiGridExpandableService.collapseAllRows).not.toHaveBeenCalled();
});
});

describe('getExpandedRows', function() {
Expand Down
6 changes: 3 additions & 3 deletions src/features/selection/js/selection.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
* @description constants available in selection module
*/
module.constant('uiGridSelectionConstants', {
featureName: "selection",
featureName: 'selection',
selectionRowHeaderColName: 'selectionRowHeaderCol'
});

Expand Down Expand Up @@ -479,13 +479,13 @@
* @param {bool} noUnselect if true then rows cannot be unselected
*/
toggleRowSelection: function (grid, row, evt, multiSelect, noUnselect) {
var selected = row.isSelected;
var selected = row.isSelected,
selectedRows;

if (row.enableSelection === false) {
return;
}

var selectedRows;
if (!multiSelect && !selected) {
service.clearSelectedRows(grid, evt);
} else if (!multiSelect && selected) {
Expand Down
Binary file modified src/font/ui-grid.eot
View file
Binary file not shown.
Binary file modified src/font/ui-grid.ttf
View file
Binary file not shown.
2 changes: 1 addition & 1 deletion src/js/core/directives/ui-grid-row.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@
});
},
post: function($scope, $elm, $attrs, controllers) {

$scope.row.element = $elm;
}
};
}
Expand Down
4 changes: 4 additions & 0 deletions src/less/grid.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -79,6 +79,10 @@
border: 0;
}

.clickable {
cursor: pointer;
}

.ui-grid-icon-button {
background-color: transparent;
border: none;
Expand Down
1 change: 0 additions & 1 deletion src/less/header.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -213,7 +213,6 @@ input[type="text"].ui-grid-filter-input {
box-sizing: border-box;
padding: 0 18px 0 0;
margin: 0;
border: 0;
width: 100%;

border: @gridBorderWidth solid @borderColor;
Expand Down

0 comments on commit ec13255

Please sign in to comment.