Skip to content

Commit ec13255

Browse files
cybermerlinmportuga
cybermerlin
authored and
mportuga
committed
feat(expandable): Enhance the expandable grid feature.
* Add ability to expand rows via double click. * Removed the extra loader. * Added $scope.row.element * Add event on expanded render complete.
1 parent c0303b5 commit ec13255

File tree

10 files changed

+126
-50
lines changed

10 files changed

+126
-50
lines changed

‎src/features/expandable/js/expandable.js‎

Lines changed: 89 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -23,15 +23,28 @@
2323
*
2424
* @description Services for the expandable grid
2525
*/
26-
module.service('uiGridExpandableService', ['gridUtil', '$compile', function (gridUtil, $compile) {
26+
module.service('uiGridExpandableService', ['gridUtil', function (gridUtil) {
2727
var service = {
2828
initializeGrid: function (grid) {
2929

3030
grid.expandable = {};
3131
grid.expandable.expandedAll = false;
3232

3333
/**
34-
* @ngdoc object
34+
* @ngdoc boolean
35+
* @name enableOnDblClickExpand
36+
* @propertyOf ui.grid.expandable.api:GridOptions
37+
* @description Defaults to true.
38+
* @example
39+
* <pre>
40+
* $scope.gridOptions = {
41+
* onDblClickExpand: false
42+
* }
43+
* </pre>
44+
*/
45+
grid.options.enableOnDblClickExpand = grid.options.enableOnDblClickExpand !== false;
46+
/**
47+
* @ngdoc boolean
3548
* @name enableExpandable
3649
* @propertyOf ui.grid.expandable.api:GridOptions
3750
* @description Whether or not to use expandable feature, allows you to turn off expandable on specific grids
@@ -134,26 +147,41 @@
134147
* @eventOf ui.grid.expandable.api:PublicApi
135148
* @description raised when row is expanding or collapsing
136149
* <pre>
137-
* gridApi.expandable.on.rowExpandedBeforeStateChanged(scope,function(row){})
150+
* gridApi.expandable.on.rowExpandedBeforeStateChanged(scope,function(row, event){})
138151
* </pre>
139152
* @param {scope} scope the application scope
140153
* @param {GridRow} row the row that was expanded
154+
* @param {Event} evt object if raised from an event
141155
*/
142-
rowExpandedBeforeStateChanged: function(scope, row){
143-
},
156+
rowExpandedBeforeStateChanged: function(scope, row, evt){},
157+
144158
/**
145159
* @ngdoc event
146160
* @name rowExpandedStateChanged
147161
* @eventOf ui.grid.expandable.api:PublicApi
148162
* @description raised when row expanded or collapsed
149163
* <pre>
150-
* gridApi.expandable.on.rowExpandedStateChanged(scope,function(row){})
164+
* gridApi.expandable.on.rowExpandedStateChanged(scope,function(row, event){})
151165
* </pre>
152166
* @param {scope} scope the application scope
153167
* @param {GridRow} row the row that was expanded
168+
* @param {Event} evt object if raised from an event
154169
*/
155-
rowExpandedStateChanged: function (scope, row) {
156-
}
170+
rowExpandedStateChanged: function (scope, row, evt) {},
171+
172+
/**
173+
* @ngdoc event
174+
* @name rowExpandedRendered
175+
* @eventOf ui.grid.expandable.api:PublicApi
176+
* @description raised when expanded row is rendered
177+
* <pre>
178+
* gridApi.expandable.on.rowExpandedRendered(scope,function(row, event){})
179+
* </pre>
180+
* @param {scope} scope the application scope
181+
* @param {GridRow} row the row that was expanded
182+
* @param {Event} evt object if raised from an event
183+
*/
184+
rowExpandedRendered: function (scope, row, evt) {}
157185
}
158186
},
159187

@@ -165,14 +193,15 @@
165193
* @methodOf ui.grid.expandable.api:PublicApi
166194
* @description Toggle a specific row
167195
* <pre>
168-
* gridApi.expandable.toggleRowExpansion(rowEntity);
196+
* gridApi.expandable.toggleRowExpansion(rowEntity, event);
169197
* </pre>
170198
* @param {object} rowEntity the data entity for the row you want to expand
199+
* @param {Event} [e] event (if exist)
171200
*/
172-
toggleRowExpansion: function (rowEntity) {
201+
toggleRowExpansion: function (rowEntity, e) {
173202
var row = grid.getRow(rowEntity);
174203
if (row !== null) {
175-
service.toggleRowExpansion(grid, row);
204+
service.toggleRowExpansion(grid, row, e);
176205
}
177206
},
178207

@@ -258,7 +287,13 @@
258287
grid.api.registerMethodsFromObject(publicApi.methods);
259288
},
260289

261-
toggleRowExpansion: function (grid, row) {
290+
/**
291+
*
292+
* @param grid
293+
* @param row
294+
* @param {Event} [e] event (if exist)
295+
*/
296+
toggleRowExpansion: function (grid, row, e) {
262297
// trigger the "before change" event. Can change row height dynamically this way.
263298
grid.api.expandable.raise.rowExpandedBeforeStateChanged(row);
264299
/**
@@ -287,7 +322,17 @@
287322
row.height = row.grid.options.rowHeight;
288323
grid.expandable.expandedAll = false;
289324
}
290-
grid.api.expandable.raise.rowExpandedStateChanged(row);
325+
grid.api.expandable.raise.rowExpandedStateChanged(row, e);
326+
327+
// fire event on render complete
328+
function _tWatcher(){
329+
if (row.expandedRendered) {
330+
grid.api.expandable.raise.rowExpandedRendered(row, e);
331+
} else {
332+
window.setTimeout(_tWatcher, 1e2);
333+
}
334+
}
335+
_tWatcher();
291336
},
292337

293338
expandAllRows: function(grid) {
@@ -341,6 +386,7 @@
341386
* }
342387
* </pre>
343388
*/
389+
344390
module.directive('uiGridExpandable', ['uiGridExpandableService', '$templateCache',
345391
function (uiGridExpandableService, $templateCache) {
346392
return {
@@ -364,16 +410,14 @@
364410
exporterSuppressExport: true,
365411
enableColumnResizing: false,
366412
enableColumnMenu: false,
367-
width: uiGridCtrl.grid.options.expandableRowHeaderWidth || 40
413+
width: uiGridCtrl.grid.options.expandableRowHeaderWidth || 30
368414
};
369415
expandableRowHeaderColDef.cellTemplate = $templateCache.get('ui-grid/expandableRowHeader');
370416
expandableRowHeaderColDef.headerCellTemplate = $templateCache.get('ui-grid/expandableTopRowHeader');
371417
uiGridCtrl.grid.addRowHeaderColumn(expandableRowHeaderColDef, -90);
372418
}
373-
374419
},
375-
post: function ($scope, $elm, $attrs, uiGridCtrl) {
376-
}
420+
post: function ($scope, $elm, $attrs, uiGridCtrl) {}
377421
};
378422
}
379423
};
@@ -397,7 +441,8 @@
397441

398442
uiGridCtrl.grid.api.core.on.renderingComplete($scope, function() {
399443
//if a parent grid row is on the scope, then add the parentRow property to this childGrid
400-
if ($scope.row && $scope.row.grid && $scope.row.grid.options && $scope.row.grid.options.enableExpandable) {
444+
if ($scope.row && $scope.row.grid && $scope.row.grid.options
445+
&& $scope.row.grid.options.enableExpandable) {
401446

402447
/**
403448
* @ngdoc directive
@@ -418,12 +463,9 @@
418463
// uiGridCtrl.grid.parentRow = newHeight;
419464
// });
420465
}
421-
422466
});
423467
},
424-
post: function ($scope, $elm, $attrs, uiGridCtrl) {
425-
426-
}
468+
post: function ($scope, $elm, $attrs, uiGridCtrl) {}
427469
};
428470
}
429471
};
@@ -432,17 +474,16 @@
432474
/**
433475
* @ngdoc directive
434476
* @name ui.grid.expandable.directive:uiGridExpandableRow
435-
* @description directive to render the expandable row template
477+
* @description directive to render the Row template on Expand
436478
*/
437479
module.directive('uiGridExpandableRow',
438-
['uiGridExpandableService', '$timeout', '$compile', 'uiGridConstants','gridUtil','$interval', '$log',
439-
function (uiGridExpandableService, $timeout, $compile, uiGridConstants, gridUtil, $interval, $log) {
480+
['uiGridExpandableService', '$compile', 'uiGridConstants','gridUtil',
481+
function (uiGridExpandableService, $compile, uiGridConstants, gridUtil) {
440482

441483
return {
442484
replace: false,
443485
priority: 0,
444486
scope: false,
445-
446487
compile: function () {
447488
return {
448489
pre: function ($scope, $elm, $attrs, uiGridCtrl) {
@@ -469,13 +510,16 @@
469510
}
470511
}
471512
var expandedRowElement = angular.element(template);
472-
$elm.append(expandedRowElement);
513+
473514
expandedRowElement = $compile(expandedRowElement)($scope);
515+
$elm.append(expandedRowElement);
516+
$scope.row.element = $elm;
474517
$scope.row.expandedRendered = true;
475518
});
476519
},
477520

478521
post: function ($scope, $elm, $attrs, uiGridCtrl) {
522+
$scope.row.element = $elm;
479523
$scope.$on('$destroy', function() {
480524
$scope.row.expandedRendered = false;
481525
});
@@ -507,15 +551,28 @@
507551
$scope.expandableRow = {};
508552

509553
$scope.expandableRow.shouldRenderExpand = function () {
510-
var ret = $scope.colContainer.name === 'body' && $scope.grid.options.enableExpandable !== false && $scope.row.isExpanded && (!$scope.grid.isScrollingVertically || $scope.row.expandedRendered);
511-
return ret;
554+
return $scope.colContainer.name === 'body'
555+
&& $scope.grid.options.enableExpandable !== false
556+
&& $scope.row.isExpanded
557+
&& (!$scope.grid.isScrollingVertically || $scope.row.expandedRendered);
512558
};
513559

514560
$scope.expandableRow.shouldRenderFiller = function () {
515-
var ret = $scope.row.isExpanded && ( $scope.colContainer.name !== 'body' || ($scope.grid.isScrollingVertically && !$scope.row.expandedRendered));
516-
return ret;
561+
return $scope.row.isExpanded
562+
&& (
563+
$scope.colContainer.name !== 'body'
564+
|| ($scope.grid.isScrollingVertically && !$scope.row.expandedRendered));
517565
};
518566

567+
if ($scope.grid.options.enableOnDblClickExpand) {
568+
$elm.on('dblclick', function (event) {
569+
// if necessary, it is possible for everyone to stop the processing of a single click OR
570+
// Inside the Config in the output agent to enter a line:
571+
// event.stopPropagation()
572+
$scope.grid.api.expandable.toggleRowExpansion($scope.row.entity, event);
573+
});
574+
}
575+
519576
/*
520577
* Commented out @PaulL1. This has no purpose that I can see, and causes #2964. If this code needs to be reinstated for some
521578
* reason it needs to use drawnWidth, not width, and needs to check column visibility. It should really use render container
@@ -542,8 +599,7 @@
542599
}*/
543600

544601
},
545-
post: function ($scope, $elm, $attrs, controllers) {
546-
}
602+
post: function ($scope, $elm, $attrs, controllers) {}
547603
};
548604
}
549605
};

‎src/features/expandable/templates/expandableRowHeader.html‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
1-
<div
2-
class="ui-grid-row-header-cell ui-grid-expandable-buttons-cell">
3-
<div
4-
class="ui-grid-cell-contents">
5-
<i ng-if="!(row.groupHeader==true || row.entity.subGridOptions.disableRowExpandable)"
6-
ng-class="{ 'ui-grid-icon-plus-squared' : !row.isExpanded, 'ui-grid-icon-minus-squared' : row.isExpanded }"
7-
ng-click="grid.api.expandable.toggleRowExpansion(row.entity)">
1+
<div class="ui-grid-row-header-cell ui-grid-expandable-buttons-cell">
2+
<div class="ui-grid-cell-contents">
3+
<i class="clickable"
4+
ng-if="!(row.groupHeader==true || row.entity.subGridOptions.disableRowExpandable)"
5+
ng-class="{ 'ui-grid-icon-plus-squared' : !row.isExpanded, 'ui-grid-icon-minus-squared' : row.isExpanded }"
6+
ng-click="grid.api.expandable.toggleRowExpansion(row.entity, $event)">
87
</i>
98
</div>
109
</div>

‎src/features/expandable/templates/expandableScrollFiller.html‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,5 @@
22
ng-if="expandableRow.shouldRenderFiller()"
33
ng-class="{scrollFiller:true, scrollFillerClass:(colContainer.name === 'body')}"
44
ng-style="{ width: (grid.getViewportWidth()) + 'px', height: row.expandedRowHeight + 2 + 'px', 'margin-left': grid.options.rowHeader.rowHeaderWidth + 'px' }">
5-
<i
6-
class="ui-grid-icon-spin5 ui-grid-animate-spin"
7-
ng-style="{'margin-top': ( row.expandedRowHeight/2 - 5) + 'px', 'margin-left' : ((grid.getViewportWidth() - grid.options.rowHeader.rowHeaderWidth)/2 - 5) + 'px'}">
8-
</i>
5+
&nbsp;
96
</div>

‎src/features/expandable/test/expandable.spec.js‎

Lines changed: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ describe('ui.grid.expandable', function() {
3333
scope.grid = gridApi.grid;
3434
};
3535

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

3939
$compile(element)(scope);
@@ -336,7 +336,28 @@ describe('ui.grid.expandable', function() {
336336
});
337337

338338
describe('toggleAllRows', function() {
339+
beforeEach(function() {
340+
spyOn(uiGridExpandableService, 'collapseAllRows').and.callFake(angular.noop);
341+
spyOn(uiGridExpandableService, 'expandAllRows').and.callFake(angular.noop);
342+
});
343+
afterEach(function() {
344+
uiGridExpandableService.collapseAllRows.calls.reset();
345+
uiGridExpandableService.expandAllRows.calls.reset();
346+
});
347+
it('should call collapseAllRows when all rows are expanded', function() {
348+
grid.expandable = {expandedAll: true};
349+
uiGridExpandableService.toggleAllRows(grid);
339350

351+
expect(uiGridExpandableService.collapseAllRows).toHaveBeenCalledWith(grid);
352+
expect(uiGridExpandableService.expandAllRows).not.toHaveBeenCalled();
353+
});
354+
it('should call expandAllRows when some rows are not expanded', function() {
355+
grid.expandable = {expandedAll: false};
356+
uiGridExpandableService.toggleAllRows(grid);
357+
358+
expect(uiGridExpandableService.expandAllRows).toHaveBeenCalledWith(grid);
359+
expect(uiGridExpandableService.collapseAllRows).not.toHaveBeenCalled();
360+
});
340361
});
341362

342363
describe('getExpandedRows', function() {

‎src/features/selection/js/selection.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@
2323
* @description constants available in selection module
2424
*/
2525
module.constant('uiGridSelectionConstants', {
26-
featureName: "selection",
26+
featureName: 'selection',
2727
selectionRowHeaderColName: 'selectionRowHeaderCol'
2828
});
2929

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

484485
if (row.enableSelection === false) {
485486
return;
486487
}
487488

488-
var selectedRows;
489489
if (!multiSelect && !selected) {
490490
service.clearSelectedRows(grid, evt);
491491
} else if (!multiSelect && selected) {

‎src/font/ui-grid.eot‎

-1 Bytes
Binary file not shown.

‎src/font/ui-grid.ttf‎

-1 Bytes
Binary file not shown.

‎src/js/core/directives/ui-grid-row.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@
6060
});
6161
},
6262
post: function($scope, $elm, $attrs, controllers) {
63-
63+
$scope.row.element = $elm;
6464
}
6565
};
6666
}

‎src/less/grid.less‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -79,6 +79,10 @@
7979
border: 0;
8080
}
8181

82+
.clickable {
83+
cursor: pointer;
84+
}
85+
8286
.ui-grid-icon-button {
8387
background-color: transparent;
8488
border: none;

‎src/less/header.less‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -213,7 +213,6 @@ input[type="text"].ui-grid-filter-input {
213213
box-sizing: border-box;
214214
padding: 0 18px 0 0;
215215
margin: 0;
216-
border: 0;
217216
width: 100%;
218217

219218
border: @gridBorderWidth solid @borderColor;

0 commit comments

Comments
 (0)