Skip to content

Commit ce33097

Browse files
committed
feat(rowSort): Added row sorting
Also refactored quite a lot of Grid functionality; added rows processors, menus, etc.
1 parent e85e532 commit ce33097

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

46 files changed

+3297
-625
lines changed

Diff for: Gruntfile.js

+55-7
Original file line numberDiff line numberDiff line change
@@ -110,19 +110,53 @@ module.exports = function(grunt) {
110110
dist: {
111111
// paths: ['/bower_components/bootstrap'],
112112
files: {
113-
'dist/release/<%= pkg.name %>.css': ['src/less/main.less', 'src/features/*/less/**/*.less'],
113+
// 'dist/release/<%= pkg.name %>.css': ['src/less/main.less', 'src/features/*/less/**/*.less', '.tmp/icon/icons.data.svg.css'],
114+
'dist/release/<%= pkg.name %>.css': ['src/less/main.less', 'src/features/*/less/**/*.less', '.tmp/font/ui-grid-codes.css']
114115
}
115116
},
116117
min: {
117118
files: {
118-
'dist/release/<%= pkg.name %>.min.css': ['src/less/main.less', 'src/features/*/less/**/*.less']
119+
// 'dist/release/<%= pkg.name %>.min.css': ['src/less/main.less', 'src/features/*/less/**/*.less', '.tmp/icon/icons.data.svg.css']
120+
'dist/release/<%= pkg.name %>.min.css': ['src/less/main.less', 'src/features/*/less/**/*.less', '.tmp/font/ui-grid-codes.css']
119121
},
120122
options: {
121123
compress: true
122124
}
123125
}
124126
},
125127

128+
// grunticon: {
129+
// icons: {
130+
// files: [{
131+
// expand: true,
132+
// cwd: 'src/img',
133+
// src: ['*.svg'],
134+
// dest: '.tmp/icon'
135+
// }],
136+
// options: {
137+
// cssprefix: '.ui-grid-icon-',
138+
// colors: {
139+
// 'default': '#2c3e50'
140+
// }
141+
// }
142+
// }
143+
// },
144+
145+
fontello: {
146+
options: {
147+
sass: false
148+
},
149+
dist: {
150+
options: {
151+
config : 'src/font/config.json',
152+
fonts : 'dist/release',
153+
styles : '.tmp/font',
154+
scss : false
155+
// force : true
156+
}
157+
}
158+
},
159+
126160
uglify: {
127161
options: {
128162
banner: '<%= banner %>'
@@ -234,6 +268,7 @@ module.exports = function(grunt) {
234268
require: false,
235269

236270
/* Jasmine */
271+
jasmine: false,
237272
after: false,
238273
afterEach: false,
239274
before: false,
@@ -252,7 +287,8 @@ module.exports = function(grunt) {
252287
waits: false,
253288
waitsFor: false,
254289
xit: false,
255-
xdescribe: false
290+
xdescribe: false,
291+
spyOn: false
256292
}
257293
},
258294
gruntfile: {
@@ -296,6 +332,15 @@ module.exports = function(grunt) {
296332
tasks: ['less', 'ngdocs', 'concat:customizer_less']
297333
},
298334

335+
// grunticon: {
336+
// files: 'src/img/**/*.svg',
337+
// tasks: ['grunticon', 'less']
338+
// },
339+
fontello: {
340+
files: 'src/font/config.json',
341+
tasks: ['fontello', 'less']
342+
},
343+
299344
docs: {
300345
files: ['misc/tutorial/**/*.ngdoc', 'misc/doc/**'],
301346
tasks: 'ngdocs'
@@ -373,11 +418,12 @@ module.exports = function(grunt) {
373418
},
374419
scripts: [
375420
'//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js', // TODO(c0bra): REMOVE!
376-
'//ajax.googleapis.com/ajax/libs/angularjs/1.2.11/angular.js',
377-
'//ajax.googleapis.com/ajax/libs/angularjs/1.2.11/angular-touch.js',
421+
'//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.js',
422+
'//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular-touch.js',
423+
'//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular-animate.js',
378424
],
379425
hiddenScripts: [
380-
'//ajax.googleapis.com/ajax/libs/angularjs/1.2.11/angular-animate.js',
426+
'//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular-animate.js',
381427
'bower_components/google-code-prettify/src/prettify.js',
382428
'node_modules/marked/lib/marked.js'
383429
],
@@ -463,6 +509,8 @@ module.exports = function(grunt) {
463509
grunt.loadNpmTasks('grunt-conventional-changelog');
464510
grunt.loadNpmTasks('grunt-gh-pages');
465511
grunt.loadNpmTasks('grunt-shell-spawn');
512+
// grunt.loadNpmTasks('grunt-grunticon');
513+
grunt.loadNpmTasks('grunt-fontello');
466514

467515
// grunt.renameTask('protractor', 'protractor-old');
468516
grunt.registerTask('protractor-watch', function () {
@@ -493,7 +541,7 @@ module.exports = function(grunt) {
493541
grunt.registerTask('default', ['before-test', 'test', 'after-test']);
494542

495543
// Build with no testing
496-
grunt.registerTask('build', ['concat', 'uglify', 'less', 'ngdocs', 'copy']);
544+
grunt.registerTask('build', ['concat', 'uglify', 'fontello', 'less', 'ngdocs', 'copy']);
497545

498546
// Auto-test tasks for development
499547
grunt.registerTask('autotest:unit', ['karmangular:start']);

Diff for: TODO.md

+42-36
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,55 @@
22

33
# CURRENT
44

5+
1. [BUG] - Do we need to validate passed in grid 'id' property to make sure it can be in a CSS rule?
6+
1. [IDEA] - Hook the column menu button into the menu it activates so it can show/hide depending on the number of items it will show. Can we do that?
7+
1. If sorting is enabled or the user / extension has supplied extra menu items, show the menu button. Otherwise don't show it.
8+
1. We'll need a way to separate extension menu items from user menu items so the user doesn't override them.
9+
1. [IDEA] - Add an showColumnMenu option? Maybe you don't want it on mobile?
10+
1. [TODO] - Make HOME and END keys scroll to top/bottom if grid has focus...
11+
1. [IDEA] - Can we deselect any selected text when the grid is scrolled?
12+
1. [TODO] - Make row builders async with $q
13+
1. [TODO] - Make plnkr/jsfiddle ngdocs buttons work
14+
1. [TODO] - Remove IE11 cell selected weird green color...
15+
1. [IDEA] - Add gridOptions.options for all opts, and deep watch it then rebuild
16+
1. [IDEA] - Add version number to uiGrid module.
17+
18+
1. [IDEA] - Might need to make dragging and reordering columns watch for a minimum pixel delta before starting drag, so it doesn't always cancel long-clicks
19+
1. [BUG] - Grid not redrawing properly when switching between tutorials. It still has the grid body height from the previous tutorial.
20+
1. This is due to a combination of grunt-ngdocs and ngAnimate. ngAnimate is leaving two "page" (or whatever) elements on the page at the
21+
same time. Both have a main.css which include styles for the grid. Having the old one on there at the same time as the new one makes
22+
it use the height from the old one when calculating the grid height... *** Can we switch to Dgeni? ***
23+
1. [BUG] - Menu icon overlays menu text when column name is too long...
24+
1. [IDEA] - Can we shrink the size of the header-cell-contents div and make it text-overflow: ellipsis?
25+
1. [TOFIX] - Menu icon vertical alignment off in IE11 (how does it look in FF?)
26+
1. [NOTE] - Use "-webkit-text-stroke: 0.3px" on icon font to fix jaggies in Chrome on Windows
27+
1. [TODO] - Add a failing test for the IE9-11 column sorting hack (columnSorter.js, line 229)
28+
1. [TODO] - Kendo Grid shows the column menu positioned OUTSIDE the grid for the final column, but it doesn't flow outside the window.
29+
<!-- 1. It is positioned by specific pixel amount. We will need to measure the menu size in order to get it right under any menu button we use. -->
30+
531
1. [TODO] - Add row filtering
632
1. [TODO] - Add notes about browser version support and Angular version support to README.md
33+
1. [TODO] - Add handling for sorting null values with columnDef sortingAlgorithm (PR #940)
34+
35+
# Cleanup
36+
37+
1. [TODO] - Rename gridUtil to uiGridUtil
38+
1. [TODO] - Rename GridUtil in uiGridBody to gridUtil or the above
39+
1. [TODO] - Move uiGridCell to its own file
40+
41+
# Extras
42+
43+
1. Add iit and ddescribe checks as commit hooks
744

845
# Native scrolling
946

10-
1. [BUG] - Touch event deceleration goes backwards when scrolling up, but only with small amounts
47+
1. [BUG] - Touch event deceleration goes backwards when scrolling up, but only with small amounts.
48+
1. [BUG] - Horizontal scrolling when emulating a touch device is weird too, scroll between grid canvas and header canvas is offset.
1149
1. [TODO] - Take a look at Hamster.js for normalizing mouse wheel events, test on MacAir.
1250

51+
# Memory Issues
52+
1. [LEAKS] - Make sure stylesheets are being removed on $destroy, and anywhere that we might be doing manual appendChild, or other appending.
53+
1. [LEAKS] - Null out all references to DOM elements in $destroy handler
1354

1455
# MORE
1556

@@ -50,38 +91,3 @@
5091

5192
# Done!
5293

53-
1. [DONE] - [BUG] - When column resizing and you've scrolled to the end of the grid, the scrollbar extends beyond the viewport...
54-
1. [DONE] Figure out how to run e2e tests on docs (look at angularjs source / protractor?)
55-
1. [DONE] Add --browsers option for testing on saucelabs with specific browser(s)
56-
1. [DONE] Make karmangular run in `watch` mode and in singlerun too.
57-
1. [DONE] Make sure failing saucelabs tests don't cause the build to fail. Only if the normal test run fails
58-
1. [DONE] Add grunt task that will use ngdoc to build test specs from docs into .tmp/e2e/doc.spec.js
59-
- It will need to run after ngdocs does. Maybe make a `gendocs` task that runs both serially.
60-
1. [DONE] Docs ref for ui-grid.js is pointing to localhost:9999 on travis.
61-
1. [DONE] Sometimes scrollbar snaps back to the top???
62-
1. I think it's getting mousewheel events when the element doesn't have focus.
63-
1. To reproduce, use mousewheel to scroll to bottom of grid, then move outside grid and scroll page to top. Use window scrollbar to move back down to show grid, then click on scrollbar. It will snap to the top.
64-
1. [DONE] elementHeight() (AND jQuery.height()) isn't working on the .ui-grid element. It's not accounting for the border when figuring out the canvas drawing space.
65-
1. [NOTE] - I just had to subtract "1" from the canvas height. Not sure why. After that, any borders of any size on the grid element are accounted for correctly.
66-
1 [NOTE] - It was because of the top-panel bottom border, which is 1px by default
67-
1. [DONE] Looks like the canvas needs to be the height of all the elements (rowheight * data length) in order for the scroll to work right
68-
1. [DONE] Add 'track by $index' to ng-repeats?
69-
1. [DONE] Add virtual repeat functionality
70-
1. [DONE] Scrollbar should only show up when there's elements to scroll.
71-
1. i.e. add ng-show based on canvasHeight > gridbody height
72-
1. [DONE] Copy angular-animate, prettify.js and marked.js into the docs/js dir separately from grunt-ngdocs. It's causing them to show up in `<script>` tags in the Examples which isn't what we want
73-
1. [DONE] Mouse wheel should work in viewport (almost done)
74-
1. [DONE] - [BUG] - Hidden grid doesn't calculate height of header correctly
75-
1. [DONE] - [BUG] - Viewport is calcuating too small on customizer page on ui-grid.info ONLY.
76-
- Was including wrong ui-grid.css file
77-
1. [DONE] - Make scrollbar look like chrome's?
78-
1. [DONE] - Horizontal scrolling
79-
- [DONE] - [NOTE] - The header will need to be able to scroll as well. It will need to be able to overflow
80-
- [IDEA] - We'll need to iterate through the columnDefs in the style computation, and calculate the minimum number of rows to render.
81-
- Basically find the set of smallest columns, according to their width, that still cover the viewport, and figure out how many are in the set, then set minCols to that
82-
- Starting with the first column, add up the column widths until they are greater than the viewport width, then save that number of columns as the minimum. Continue going through the
83-
column widths, subtracting the previous column's width and adding the next column's width. If at any point the total width is less than the viewport, increment the minimum number of columns.
84-
- [IDEA] - Might need to dynamically set 'excessColumns'. With a 'scrollThreshold' of 4 and 'excessColumns' of 4, it was not rendering enough columns to the left of the viewport
85-
- [TODO] - Figure out how to calculate the margin-left property on the columns when the columns have variable sizes. Might need to calc the widths of the rendered columns in order to get the offset adjustments
86-
1. [DONE] - [IDEA] - Break out GridColumn into its own factory
87-
1. [DONE] - [TODO] - Obey minWidth and maxWidth in colDef, in resizer [TODO] AND in the header width builder

Diff for: misc/tutorial/5.1_sorting.ngdoc

+50
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
@ngdoc overview
2+
@name Tutorial: Sorting
3+
@description
4+
5+
UI-Grid allows you to sort rows. Just set the `enableSorting` flag in your grid options.
6+
7+
<span class="span8 alert alert-warning">
8+
<strong>Note:</strong> You must include ngAnimate in your application if you want the menu to slide up/down, but it's not required.
9+
</span>
10+
11+
Sorting can be disabled at the column level by setting `enableSorting: false` in the column def. See the last column below for an example.
12+
13+
Multiple columns can be sorted by shift-clicking on the 2-n columns. To see it in action, sort Gender then shift-click Name.
14+
15+
@example
16+
<example module="app">
17+
<file name="app.js">
18+
var app = angular.module('app', ['ngAnimate', 'ui.grid']);
19+
20+
app.controller('MainCtrl', ['$scope', '$http', function ($scope, $http) {
21+
$scope.gridOptions = {
22+
enableSorting: true,
23+
columnDefs: [
24+
{ field: 'name' },
25+
{ field: 'gender' },
26+
{ field: 'company',enableSorting: false }
27+
]
28+
};
29+
30+
$http.get('/data/100.json')
31+
.success(function(data) {
32+
$scope.gridOptions.data = data;
33+
});
34+
}]);
35+
</file>
36+
<file name="index.html">
37+
<div ng-controller="MainCtrl">
38+
Click on a column header to sort by that column.
39+
<br>
40+
<br>
41+
<div ui-grid="gridOptions" class="grid"></div>
42+
</div>
43+
</file>
44+
<file name="main.css">
45+
.grid {
46+
width: 500px;
47+
height: 400px;
48+
}
49+
</file>
50+
</example>

Diff for: misc/tutorial/5.2_customizing_column_menu.ngdoc

+84
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
@ngdoc overview
2+
@name Tutorial: Customizing Column Menu
3+
@description
4+
5+
You can customize a column's menu and provide your own functionality.
6+
7+
By default, the `action` and `shown`'s' contexts will have a reference to the grid added as the property `grid` (accessible through `this.grid`.
8+
You can pass in your own context by supplying the `context` property to your menu item. It will be accessible through `this.context`.
9+
10+
The column menu will add the column's `GridColumn` object to the context as `this.context.col`. You can then show/hide the the menu item based
11+
on conditions that use the grid and column. You could also use a custom column builder to add some item to the every column definition.
12+
13+
You can supply an icon class with the `icon` property.
14+
15+
See the example below for usage.
16+
17+
18+
@example
19+
<example module="app">
20+
<file name="app.js">
21+
var app = angular.module('app', ['ngAnimate', 'ui.grid']);
22+
23+
app.controller('MainCtrl', ['$scope', '$http', function ($scope, $http) {
24+
$scope.blargh = function() {
25+
alert("I'm in the outer scope!");
26+
};
27+
28+
$scope.gridOptions = {
29+
enableSorting: true,
30+
columnDefs: [
31+
{ field: 'name' },
32+
{ field: 'gender' },
33+
{
34+
field: 'company',
35+
menuItems: [
36+
{
37+
title: 'Outer Scope Alert',
38+
icon: 'ui-grid-icon-info-circled',
39+
action: function($event) {
40+
this.context.blargh(); // $scope.blargh() would work too, this is just an example
41+
},
42+
context: $scope
43+
},
44+
{
45+
title: 'Grid ID',
46+
action: function() {
47+
alert('Grid ID: ' + this.grid.id);
48+
}
49+
},
50+
{
51+
title: 'Column Title Alert',
52+
shown: function () {
53+
return this.context.col.displayName === 'Company';
54+
},
55+
action: function() {
56+
alert(this.context.col.displayName);
57+
}
58+
}
59+
]
60+
}
61+
]
62+
};
63+
64+
$http.get('/data/100.json')
65+
.success(function(data) {
66+
$scope.gridOptions.data = data;
67+
});
68+
}]);
69+
</file>
70+
<file name="index.html">
71+
<div ng-controller="MainCtrl">
72+
Click on the third column header to test custom menu items.
73+
<br>
74+
<br>
75+
<div ui-grid="gridOptions" class="grid"></div>
76+
</div>
77+
</file>
78+
<file name="main.css">
79+
.grid {
80+
width: 500px;
81+
height: 400px;
82+
}
83+
</file>
84+
</example>

0 commit comments

Comments
 (0)