Skip to content

Commit 90a51cc

Browse files
PaulL1PaulL1
committed
Merge pull request #3604 from PaulL1/treebase
Treebase
2 parents 3597417 + 679b615 commit 90a51cc

File tree

10 files changed

+199
-34
lines changed

10 files changed

+199
-34
lines changed

‎misc/tutorial/103_filtering.ngdoc

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -72,9 +72,9 @@ In this example we've provided a "toggle filters" button to allow you to turn th
7272
still visually indicate which columns are filtered even when the filters aren't present, we've used the headerCellClass
7373
to make any columns with a filter condition have blue text.
7474

75-
## Single filter box (similar to 2.x)
75+
### Single filter box (similar to 2.x)
7676

77-
Refer the {@link 499_FAQ FAQ}, it is possible to implement this using a rowsProcessor.
77+
Refer {@link 321_singleFilter singleFilter tutorial}, it is possible to implement this using a rowsProcessor.
7878

7979
@example
8080
<example module="app">

‎misc/tutorial/117_tooltips.ngdoc

Lines changed: 19 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,26 @@
55
You can set a tooltip (actually, a title) to pop up when a user hovers over a cell.
66

77
This tooltip can be simply the cell contents, in which case set the columnDef to have
8-
`cellTooltip: true`. Or it can be a function that returns a value derived from the
8+
`cellTooltip: true`.
9+
10+
Or it can be a function that returns a value derived from the
911
current column and row - for example:
12+
1013
```
1114
cellTooltip: function(row, col) {
1215
return 'Name: ' + row.entity.name + ' Company: ' + row.entity.company;
1316
}
1417
```
1518

19+
Or it can be a string, in which case that string will be displayed:
20+
21+
```
22+
cellTooltip: 'Custom tooltip - maybe some help text'
23+
```
24+
25+
26+
You can also set a headerTooltip in a similar manner, it defaults to showing the displayName.
27+
1628
Note that turning on tooltips will create an extra watcher per cell, so it has an impact on overall grid
1729
performance, it is not recommended to turn them on for every column, rather only for the columns likely to have
1830
data that won't be displayable within the grid row (e.g. long description fields).
@@ -27,13 +39,16 @@ Tooltips respect the cellFilter, so if you define a cellFilter it will also be u
2739
$scope.gridOptions = {
2840
enableSorting: true,
2941
columnDefs: [
30-
{ field: 'name', cellTooltip: true },
42+
{ field: 'name', cellTooltip: 'Custom string', headerTooltip: 'Custom header string' },
3143
{ field: 'company', cellTooltip:
3244
function( row, col ) {
3345
return 'Name: ' + row.entity.name + ' Company: ' + row.entity.company;
34-
}
46+
}, headerTooltip:
47+
function( col ) {
48+
return 'Header: ' + col.displayName;
49+
}
3550
},
36-
{ field: 'gender', cellTooltip: true, cellFilter: 'mapGender' },
51+
{ field: 'gender', cellTooltip: true, headerTooltip: true, cellFilter: 'mapGender' },
3752
],
3853
onRegisterApi: function( gridApi ) {
3954
$scope.gridApi = gridApi;

‎misc/tutorial/210_selection.ngdoc

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,9 @@ By default the module will provide a row header with checkboxes that allow selec
1515
the `enableRowHeaderSelection` gridOption to false, then the row header is hidden and a click on the row will
1616
result in selection of that row. You can see that in this tutorial for grid1 by looking at your javascript console.
1717

18+
If you want to allow both clicking on the row, and also clicking on the rowHeader, you can set `enableFullRowSelection` to
19+
true.
20+
1821
Setting the `multiSelect` gridOption to true will allow selecting multiple rows, setting to false will allow selection
1922
of only one row at a time.
2023

@@ -98,7 +101,12 @@ auto-selects the first row once the data is loaded.
98101
$scope.toggleRow1 = function() {
99102
$scope.gridApi.selection.toggleRowSelection($scope.gridOptions.data[0]);
100103
};
101-
104+
105+
$scope.toggleFullRowSelection = function() {
106+
$scope.gridOptions.enableFullRowSelection = !$scope.gridOptions.enableFullRowSelection;
107+
$scope.gridApi.core.notifyDataChange( uiGridConstants.dataChange.OPTIONS);
108+
};
109+
102110
$scope.setSelectable = function() {
103111
$scope.gridApi.selection.clearSelectedRows();
104112

@@ -174,6 +182,7 @@ auto-selects the first row once the data is loaded.
174182
<button type="button" class="btn btn-success" ng-disabled="!gridApi.grid.options.multiSelect" ng-click="selectAll()">Select All</button>
175183
<button type="button" class="btn btn-success" ng-click="clearAll()">Clear All</button>
176184
<button type="button" class="btn btn-success" ng-click="setSelectable()">Set Selectable</button>
185+
<button type="button" class="btn btn-success" ng-click="toggleFullRowSelection()">Toggle full row selection</button>
177186
<br/>
178187

179188
<div ui-grid="gridOptions" ui-grid-selection class="grid"></div>

‎misc/tutorial/321_singleFilter.ngdoc

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
@ngdoc overview
2+
@name Tutorial: 321 Single filter
3+
@description
4+
5+
Provide a single filter box that searches across multiple columns in the grid.
6+
7+
@example
8+
<example module="app">
9+
<file name="app.js">
10+
var app = angular.module('app', ['ngTouch', 'ui.grid']);
11+
12+
app.controller('MainCtrl', ['$scope', '$http', function ($scope, $http) {
13+
var today = new Date();
14+
$scope.gridOptions = {
15+
enableFiltering: false,
16+
onRegisterApi: function(gridApi){
17+
$scope.gridApi = gridApi;
18+
$scope.gridApi.grid.registerRowsProcessor( $scope.singleFilter, 200 );
19+
},
20+
columnDefs: [
21+
{ field: 'name' },
22+
{ field: 'gender', cellFilter: 'mapGender' },
23+
{ field: 'company' },
24+
{ field: 'email' },
25+
{ field: 'phone' },
26+
{ field: 'age' },
27+
{ field: 'mixedDate' }
28+
]
29+
};
30+
31+
$http.get('/data/500_complex.json')
32+
.success(function(data) {
33+
$scope.gridOptions.data = data;
34+
$scope.gridOptions.data[0].age = -5;
35+
36+
data.forEach( function addDates( row, index ){
37+
row.mixedDate = new Date();
38+
row.mixedDate.setDate(today.getDate() + ( index % 14 ) );
39+
row.gender = row.gender==='male' ? '1' : '2';
40+
});
41+
});
42+
43+
$scope.filter = function() {
44+
$scope.gridApi.grid.refresh();
45+
};
46+
47+
$scope.singleFilter = function( renderableRows ){
48+
var matcher = new RegExp($scope.filterValue);
49+
renderableRows.forEach( function( row ) {
50+
var match = false;
51+
[ 'name', 'company', 'email' ].forEach(function( field ){
52+
if ( row.entity[field].match(matcher) ){
53+
match = true;
54+
}
55+
});
56+
if ( !match ){
57+
row.visible = false;
58+
}
59+
});
60+
return renderableRows;
61+
};
62+
}])
63+
.filter('mapGender', function() {
64+
var genderHash = {
65+
1: 'male',
66+
2: 'female'
67+
};
68+
69+
return function(input) {
70+
if (!input){
71+
return '';
72+
} else {
73+
return genderHash[input];
74+
}
75+
};
76+
});
77+
78+
</file>
79+
<file name="index.html">
80+
<div ng-controller="MainCtrl">
81+
<input ng-model='filterValue'/><button ng-click='filter()'>Filter</button>
82+
<div id="grid1" ui-grid="gridOptions" class="grid"></div>
83+
</div>
84+
</file>
85+
<file name="main.css">
86+
.grid {
87+
width: 500px;
88+
height: 450px;
89+
}
90+
</file>
91+
</example>

‎misc/tutorial/499_FAQ.ngdoc

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -84,5 +84,5 @@ There are a number of common gotchas in using the grid, this FAQ aims to cover m
8484
if each row should be visible, and appropriately set the visible flag.
8585

8686
This is a little tricky to build as a generic feature, but for specific use cases would be reasonably
87-
simple.
87+
simple. Refer the {@link 321_singleFilter single filter tutorial}.
8888

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

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -388,6 +388,16 @@
388388
* <br/>Defaults to true
389389
*/
390390
gridOptions.enableRowHeaderSelection = gridOptions.enableRowHeaderSelection !== false;
391+
/**
392+
* @ngdoc object
393+
* @name enableFullRowSelection
394+
* @propertyOf ui.grid.selection.api:GridOptions
395+
* @description Enable selection by clicking anywhere on the row. Defaults to
396+
* false if `enableRowHeaderSelection` is true, otherwise defaults to false.
397+
*/
398+
if ( typeof(gridOptions.enableFullRowSelection) === 'undefined' ){
399+
gridOptions.enableFullRowSelection = !gridOptions.enableRowHeaderSelection;
400+
}
391401
/**
392402
* @ngdoc object
393403
* @name enableSelectAll
@@ -874,7 +884,7 @@
874884
};
875885

876886
function registerRowSelectionEvents() {
877-
if ($scope.grid.options.enableRowSelection && !$scope.grid.options.enableRowHeaderSelection) {
887+
if ($scope.grid.options.enableRowSelection && $scope.grid.options.enableFullRowSelection) {
878888
$elm.addClass('ui-grid-disable-selection');
879889
$elm.on('touchstart', touchStart);
880890
$elm.on('touchend', touchEnd);
@@ -900,10 +910,10 @@
900910
// register a dataChange callback so that we can change the selection configuration dynamically
901911
// if the user changes the options
902912
var dataChangeDereg = $scope.grid.registerDataChangeCallback( function() {
903-
if ( $scope.grid.options.enableRowSelection && !$scope.grid.options.enableRowHeaderSelection &&
913+
if ( $scope.grid.options.enableRowSelection && $scope.grid.options.enableFullRowSelection &&
904914
!$scope.registered ){
905915
registerRowSelectionEvents();
906-
} else if ( ( !$scope.grid.options.enableRowSelection || $scope.grid.options.enableRowHeaderSelection ) &&
916+
} else if ( ( !$scope.grid.options.enableRowSelection || !$scope.grid.options.enableFullRowSelection ) &&
907917
$scope.registered ){
908918
deregisterRowSelectionEvents();
909919
}

‎src/js/core/factories/Grid.js

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -885,27 +885,27 @@ angular.module('ui.grid')
885885
*/
886886
Grid.prototype.preCompileCellTemplates = function() {
887887
var self = this;
888-
this.columns.forEach(function (col) {
888+
889+
var preCompileTemplate = function( col ) {
889890
var html = col.cellTemplate.replace(uiGridConstants.MODEL_COL_FIELD, self.getQualifiedColField(col));
890891
html = html.replace(uiGridConstants.COL_FIELD, 'grid.getCellValue(row, col)');
891892

892-
if (col.cellTooltip === false){
893-
html = html.replace(uiGridConstants.TOOLTIP, '');
894-
} else {
895-
// gridColumn will have made sure that the col either has false or a function for this value
896-
if (col.cellFilter){
897-
html = html.replace(uiGridConstants.TOOLTIP, 'title="{{col.cellTooltip(row, col) | ' + col.cellFilter + '}}"');
898-
} else {
899-
html = html.replace(uiGridConstants.TOOLTIP, 'title="{{col.cellTooltip(row, col)}}"');
900-
}
901-
}
902-
903893
var compiledElementFn = $compile(html);
904894
col.compiledElementFn = compiledElementFn;
905895

906896
if (col.compiledElementFnDefer) {
907897
col.compiledElementFnDefer.resolve(col.compiledElementFn);
908898
}
899+
};
900+
901+
this.columns.forEach(function (col) {
902+
if ( col.cellTemplate ){
903+
preCompileTemplate( col );
904+
} else if ( col.cellTemplatePromise ){
905+
col.cellTemplatePromise.then( function() {
906+
preCompileTemplate( col );
907+
});
908+
}
909909
});
910910
};
911911

‎src/js/core/factories/GridColumn.js

Lines changed: 36 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -487,12 +487,13 @@ angular.module('ui.grid')
487487

488488
/**
489489
* @ngdoc property
490-
* @name tooltip
490+
* @name cellTooltip
491491
* @propertyOf ui.grid.class:GridOptions.columnDef
492492
* @description Whether or not to show a tooltip when a user hovers over the cell.
493493
* If set to false, no tooltip. If true, the cell value is shown in the tooltip (useful
494494
* if you have long values in your cells), if a function then that function is called
495-
* passing in the row and the col `cellTooltip( row, col )`, and the return value is shown in the tooltip.
495+
* passing in the row and the col `cellTooltip( row, col )`, and the return value is shown in the tooltip,
496+
* if it is a static string then displays that static string.
496497
*
497498
* Defaults to false
498499
*
@@ -503,10 +504,42 @@ angular.module('ui.grid')
503504
self.cellTooltip = function(row, col) {
504505
return self.grid.getCellValue( row, col );
505506
};
506-
} else {
507+
} else if (typeof(colDef.cellTooltip) === 'function' ){
507508
self.cellTooltip = colDef.cellTooltip;
509+
} else {
510+
self.cellTooltip = function ( row, col ){
511+
return col.colDef.cellTooltip;
512+
};
513+
}
514+
515+
/**
516+
* @ngdoc property
517+
* @name headerTooltip
518+
* @propertyOf ui.grid.class:GridOptions.columnDef
519+
* @description Whether or not to show a tooltip when a user hovers over the header cell.
520+
* If set to false, no tooltip. If true, the displayName is shown in the tooltip (useful
521+
* if you have long values in your headers), if a function then that function is called
522+
* passing in the row and the col `headerTooltip( col )`, and the return value is shown in the tooltip,
523+
* if a static string then shows that static string.
524+
*
525+
* Defaults to false
526+
*
527+
*/
528+
if ( typeof(colDef.headerTooltip) === 'undefined' || colDef.headerTooltip === false ) {
529+
self.headerTooltip = false;
530+
} else if ( colDef.headerTooltip === true ){
531+
self.headerTooltip = function(col) {
532+
return col.displayName;
533+
};
534+
} else if (typeof(colDef.headerTooltip) === 'function' ){
535+
self.headerTooltip = colDef.headerTooltip;
536+
} else {
537+
self.headerTooltip = function ( col ) {
538+
return col.colDef.headerTooltip;
539+
};
508540
}
509541

542+
510543
/**
511544
* @ngdoc property
512545
* @name footerCellClass

‎src/js/core/services/gridClassFactory.js

Lines changed: 14 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -101,8 +101,8 @@
101101

102102
var templateGetPromises = [];
103103

104-
// Abstracts the standard template processing we do for every template type
105-
var processTemplate = function( templateType, providedType, defaultTemplate, filterType ) {
104+
// Abstracts the standard template processing we do for every template type.
105+
var processTemplate = function( templateType, providedType, defaultTemplate, filterType, tooltipType ) {
106106
if ( !colDef[templateType] ){
107107
col[providedType] = defaultTemplate;
108108
} else {
@@ -112,6 +112,13 @@
112112
templateGetPromises.push(gridUtil.getTemplate(col[providedType])
113113
.then(
114114
function (template) {
115+
var tooltipCall = ( tooltipType === 'cellTooltip' ) ? 'col.cellTooltip(row,col)' : 'col.headerTooltip(col)';
116+
if ( tooltipType && col[tooltipType] === false ){
117+
template = template.replace(uiGridConstants.TOOLTIP, '');
118+
} else if ( tooltipType && col[tooltipType] ){
119+
template = template.replace(uiGridConstants.TOOLTIP, 'title="{{' + tooltipCall + ' CUSTOM_FILTERS }}"');
120+
}
121+
115122
if ( filterType ){
116123
col[templateType] = template.replace(uiGridConstants.CUSTOM_FILTERS, col[filterType] ? "|" + col[filterType] : "");
117124
} else {
@@ -124,8 +131,8 @@
124131
);
125132

126133
};
127-
128-
134+
135+
129136
/**
130137
* @ngdoc property
131138
* @name cellTemplate
@@ -135,9 +142,9 @@
135142
* must contain a div that can receive focus.
136143
*
137144
*/
138-
processTemplate( 'cellTemplate', 'providedCellTemplate', 'ui-grid/uiGridCell', 'cellFilter' );
145+
processTemplate( 'cellTemplate', 'providedCellTemplate', 'ui-grid/uiGridCell', 'cellFilter', 'cellTooltip' );
139146
col.cellTemplatePromise = templateGetPromises[0];
140-
147+
141148
/**
142149
* @ngdoc property
143150
* @name headerCellTemplate
@@ -146,7 +153,7 @@
146153
* is ui-grid/uiGridHeaderCell
147154
*
148155
*/
149-
processTemplate( 'headerCellTemplate', 'providedHeaderCellTemplate', 'ui-grid/uiGridHeaderCell', 'headerCellFilter' );
156+
processTemplate( 'headerCellTemplate', 'providedHeaderCellTemplate', 'ui-grid/uiGridHeaderCell', 'headerCellFilter', 'headerTooltip' );
150157

151158
/**
152159
* @ngdoc property

‎src/templates/ui-grid/uiGridHeaderCell.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<div ng-class="{ 'sortable': sortable }">
22
<!-- <div class="ui-grid-vertical-bar">&nbsp;</div> -->
3-
<div class="ui-grid-cell-contents" col-index="renderIndex">
3+
<div class="ui-grid-cell-contents" col-index="renderIndex" title="TOOLTIP">
44
<span>{{ col.displayName CUSTOM_FILTERS }}</span>
55

66
<span ui-grid-visible="col.sort.direction" ng-class="{ 'ui-grid-icon-up-dir': col.sort.direction == asc, 'ui-grid-icon-down-dir': col.sort.direction == desc, 'ui-grid-icon-blank': !col.sort.direction }">

0 commit comments

Comments
 (0)