Skip to content

Commit 145e366

Browse files
cool5785mportuga
cool5785
authored and
mportuga
committed
feat(hidePin): Added option to hide pinLeft or pinRight from pinning menu (#6334)
* Added option to hide pinLeft or pinRight from pinning menu * Updated documentation * Updated ngDoc for PinLeft and PinRight * Updated Unit tests * Possible unit test fix
1 parent 8dd0359 commit 145e366

File tree

4 files changed

+155
-6
lines changed

4 files changed

+155
-6
lines changed

‎misc/tutorial/203_pinning.ngdoc

+47
Original file line numberDiff line numberDiff line change
@@ -57,3 +57,50 @@ It is also possible to disable pinning on column level. Note the 'id' column def
5757
}
5858
</file>
5959
</example>
60+
61+
You can also hide Pin Left or Pin Right individually
62+
Below example will hide Pin Right option from id column [by setting hidePinRight: true]
63+
64+
@example
65+
<example module="app">
66+
<file name="app.js">
67+
var app = angular.module('app', ['ngTouch', 'ui.grid', 'ui.grid.pinning']);
68+
69+
app.controller('MainCtrl', ['$scope', '$http', '$log', function ($scope, $http, $log) {
70+
$scope.gridOptions = {};
71+
72+
$scope.gridOptions.columnDefs = [
73+
{ name:'id', width:50, enablePinning:true, hidePinLeft: false, hidePinRight: true },
74+
{ name:'name', width:100, pinnedLeft:true },
75+
{ name:'age', width:100, pinnedRight:true },
76+
{ name:'address.street', width:150 },
77+
{ name:'address.city', width:150 },
78+
{ name:'address.state', width:50 },
79+
{ name:'address.zip', width:50 },
80+
{ name:'company', width:100 },
81+
{ name:'email', width:100 },
82+
{ name:'phone', width:200 },
83+
{ name:'about', width:300 },
84+
{ name:'friends[0].name', displayName:'1st friend', width:150 },
85+
{ name:'friends[1].name', displayName:'2nd friend', width:150 },
86+
{ name:'friends[2].name', displayName:'3rd friend', width:150 },
87+
];
88+
89+
$http.get('/data/500_complex.json')
90+
.success(function(data) {
91+
$scope.gridOptions.data = data;
92+
});
93+
}]);
94+
</file>
95+
<file name="index.html">
96+
<div ng-controller="MainCtrl">
97+
<div ui-grid="gridOptions" class="grid" ui-grid-pinning></div>
98+
</div>
99+
</file>
100+
<file name="main.css">
101+
.grid {
102+
width: 100%;
103+
height: 400px;
104+
}
105+
</file>
106+
</example>

‎src/features/pinning/js/pinning.js

+35-4
Original file line numberDiff line numberDiff line change
@@ -101,7 +101,22 @@
101101
* <br/>Defaults to true
102102
*/
103103
gridOptions.enablePinning = gridOptions.enablePinning !== false;
104-
104+
/**
105+
* @ngdoc object
106+
* @name hidePinLeft
107+
* @propertyOf ui.grid.pinning.api:GridOptions
108+
* @description Hide Pin Left for the entire grid.
109+
* <br/>Defaults to false
110+
*/
111+
gridOptions.hidePinLeft = gridOptions.enablePinning && gridOptions.hidePinLeft;
112+
/**
113+
* @ngdoc object
114+
* @name hidePinRight
115+
* @propertyOf ui.grid.pinning.api:GridOptions
116+
* @description Hide Pin Right pinning for the entire grid.
117+
* <br/>Defaults to false
118+
*/
119+
gridOptions.hidePinRight = gridOptions.enablePinning && gridOptions.hidePinRight;
105120
},
106121

107122
pinningColumnBuilder: function (colDef, col, gridOptions) {
@@ -123,7 +138,22 @@
123138
* <br/>Defaults to true
124139
*/
125140
colDef.enablePinning = colDef.enablePinning === undefined ? gridOptions.enablePinning : colDef.enablePinning;
126-
141+
/**
142+
* @ngdoc object
143+
* @name hidePinLeft
144+
* @propertyOf ui.grid.pinning.api:ColumnDef
145+
* @description Hide Pin Left for the individual column.
146+
* <br/>Defaults to false
147+
*/
148+
colDef.hidePinLeft = colDef.hidePinLeft === undefined ? gridOptions.hidePinLeft : colDef.hidePinLeft;
149+
/**
150+
* @ngdoc object
151+
* @name hidePinRight
152+
* @propertyOf ui.grid.pinning.api:ColumnDef
153+
* @description Hide Pin Right for the individual column.
154+
* <br/>Defaults to false
155+
*/
156+
colDef.hidePinRight = colDef.hidePinRight === undefined ? gridOptions.hidePinRight : colDef.hidePinRight;
127157

128158
/**
129159
* @ngdoc object
@@ -189,10 +219,11 @@
189219
}
190220
};
191221

192-
if (!gridUtil.arrayContainsObjectWithProperty(col.menuItems, 'name', 'ui.grid.pinning.pinLeft')) {
222+
//// Skip from menu if hidePinLeft or hidePinRight is true
223+
if (!colDef.hidePinLeft && !gridUtil.arrayContainsObjectWithProperty(col.menuItems, 'name', 'ui.grid.pinning.pinLeft')) {
193224
col.menuItems.push(pinColumnLeftAction);
194225
}
195-
if (!gridUtil.arrayContainsObjectWithProperty(col.menuItems, 'name', 'ui.grid.pinning.pinRight')) {
226+
if (!colDef.hidePinRight && !gridUtil.arrayContainsObjectWithProperty(col.menuItems, 'name', 'ui.grid.pinning.pinRight')) {
196227
col.menuItems.push(pinColumnRightAction);
197228
}
198229
if (!gridUtil.arrayContainsObjectWithProperty(col.menuItems, 'name', 'ui.grid.pinning.unpin')) {

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

+5-1
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,8 @@
2020
id: 512,
2121
registerColumnBuilder: jasmine.createSpy('registerColumnBuilder'),
2222
enablePinning: jasmine.createSpy('enablePinning'),
23+
hidePinLeft: jasmine.createSpy('hidePinLeft'),
24+
hidePinRight: jasmine.createSpy('hidePinRight'),
2325
registerStyleComputation: jasmine.createSpy('registerStyleComputation'),
2426
registerViewportAdjusters: jasmine.createSpy('registerViewportAdjusters'),
2527
renderingComplete: jasmine.createSpy('renderingComplete'),
@@ -57,6 +59,8 @@
5759

5860
$scope.gridOpts = {
5961
enablePinning: true,
62+
hidePinLeft: false,
63+
hidePinRight: false,
6064
data: data
6165
};
6266

@@ -201,4 +205,4 @@
201205
});
202206
});
203207
});
204-
})();
208+
})();

‎src/features/pinning/test/uiGridPinningService.spec.js

+68-1
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,14 @@ describe('ui.grid.pinning uiGridPinningService', function () {
3434
expect(grid.options.enablePinning).toBe(true);
3535
});
3636

37+
it('should have hide PinLeft disabled', function () {
38+
expect(grid.options.hidePinLeft).toBeFalsy();
39+
});
40+
41+
it('should have hide PinRight disabled', function () {
42+
expect(grid.options.hidePinRight).toBeFalsy();
43+
});
44+
3745
it('should register a column builder to the grid', function() {
3846
expect(grid.registerColumnBuilder).toHaveBeenCalledWith(uiGridPinningService.pinningColumnBuilder);
3947
});
@@ -50,6 +58,41 @@ describe('ui.grid.pinning uiGridPinningService', function () {
5058
uiGridPinningService.defaultGridOptions(options);
5159
expect(options.enablePinning).toBe(false);
5260
});
61+
62+
it('should default to false for hidePinLeft', function () {
63+
var options = {};
64+
uiGridPinningService.defaultGridOptions(options);
65+
expect(options.hidePinLeft).toBeFalsy();
66+
});
67+
it('should allow true for hidePinLeft when pinning is enabled', function () {
68+
var options = { enablePinning: true, hidePinLeft: true};
69+
uiGridPinningService.defaultGridOptions(options);
70+
expect(options.hidePinLeft).toBe(true);
71+
});
72+
it('should NOT allow true for hidePinLeft when pinning is Disabled', function () {
73+
var options = { enablePinning: false, hidePinLeft: true};
74+
uiGridPinningService.defaultGridOptions(options);
75+
expect(options.hidePinLeft).toBe(false);
76+
});
77+
78+
79+
it('should default to false for hidePinRight', function () {
80+
var options = {};
81+
uiGridPinningService.defaultGridOptions(options);
82+
expect(options.hidePinRight).toBeFalsy();
83+
});
84+
it('should allow true for hidePinRight when pinning is enabled', function () {
85+
var options = { enablePinning: true, hidePinRight: true};
86+
uiGridPinningService.defaultGridOptions(options);
87+
expect(options.hidePinRight).toBe(true);
88+
});
89+
it('should NOT allow true for hidePinRight when pinning is Disabled', function () {
90+
var options = { enablePinning: false, hidePinRight: true};
91+
uiGridPinningService.defaultGridOptions(options);
92+
expect(options.hidePinRight).toBe(false);
93+
});
94+
95+
5396
});
5497

5598
describe('pinningColumnBuilder', function() {
@@ -58,7 +101,7 @@ describe('ui.grid.pinning uiGridPinningService', function () {
58101
beforeEach(function() {
59102
mockCol = {menuItems: [], grid: grid};
60103
colOptions = {};
61-
gridOptions = {enablePinning:true};
104+
gridOptions = {enablePinning:true, hidePinLeft: false, hidePinRight: false};
62105
});
63106

64107
it('should enable column pinning when pinning allowed for the grid', function() {
@@ -84,6 +127,30 @@ describe('ui.grid.pinning uiGridPinningService', function () {
84127
expect(colOptions.enablePinning).toBe(true);
85128
});
86129

130+
it('should be true in columnOptions when hidePinLeft=true for the grid', function() {
131+
gridOptions = {enablePinning: true, hidePinLeft: true};
132+
133+
uiGridPinningService.pinningColumnBuilder(colOptions, mockCol, gridOptions);
134+
135+
expect(colOptions.hidePinLeft).toBe(true);
136+
});
137+
it('should be true when hidePinLeft=true for the column', function() {
138+
colOptions = {enablePinning: true, hidePinLeft: true};
139+
gridOptions = {enablePinning: true, hidePinLeft: false};
140+
141+
uiGridPinningService.pinningColumnBuilder(colOptions, mockCol, gridOptions);
142+
143+
expect(colOptions.hidePinLeft).toBe(true);
144+
});
145+
it('should be true when hidePinRight=true for the column', function() {
146+
colOptions = {enablePinning: true, hidePinRight: true};
147+
gridOptions = {enablePinning: true, hidePinRight: false};
148+
149+
uiGridPinningService.pinningColumnBuilder(colOptions, mockCol, gridOptions);
150+
151+
expect(colOptions.hidePinRight).toBe(true);
152+
});
153+
87154
it('should pin left when pinnedLeft=true', function() {
88155
colOptions = {pinnedLeft: true};
89156
gridOptions = {enablePinning: false};

0 commit comments

Comments
 (0)