-
Notifications
You must be signed in to change notification settings - Fork 2.5k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Also refactored quite a lot of Grid functionality; added rows processors, menus, etc.
- Loading branch information
Showing
46 changed files
with
3,297 additions
and
625 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,50 @@ | ||
| @ngdoc overview | ||
| @name Tutorial: Sorting | ||
| @description | ||
|
|
||
| UI-Grid allows you to sort rows. Just set the `enableSorting` flag in your grid options. | ||
|
|
||
| <span class="span8 alert alert-warning"> | ||
| <strong>Note:</strong> You must include ngAnimate in your application if you want the menu to slide up/down, but it's not required. | ||
| </span> | ||
|
|
||
| Sorting can be disabled at the column level by setting `enableSorting: false` in the column def. See the last column below for an example. | ||
|
|
||
| Multiple columns can be sorted by shift-clicking on the 2-n columns. To see it in action, sort Gender then shift-click Name. | ||
|
|
||
| @example | ||
| <example module="app"> | ||
| <file name="app.js"> | ||
| var app = angular.module('app', ['ngAnimate', 'ui.grid']); | ||
|
|
||
| app.controller('MainCtrl', ['$scope', '$http', function ($scope, $http) { | ||
| $scope.gridOptions = { | ||
| enableSorting: true, | ||
| columnDefs: [ | ||
| { field: 'name' }, | ||
| { field: 'gender' }, | ||
| { field: 'company',enableSorting: false } | ||
| ] | ||
| }; | ||
|
|
||
| $http.get('/data/100.json') | ||
| .success(function(data) { | ||
| $scope.gridOptions.data = data; | ||
| }); | ||
| }]); | ||
| </file> | ||
| <file name="index.html"> | ||
| <div ng-controller="MainCtrl"> | ||
| Click on a column header to sort by that column. | ||
| <br> | ||
| <br> | ||
| <div ui-grid="gridOptions" class="grid"></div> | ||
| </div> | ||
| </file> | ||
| <file name="main.css"> | ||
| .grid { | ||
| width: 500px; | ||
| height: 400px; | ||
| } | ||
| </file> | ||
| </example> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,84 @@ | ||
| @ngdoc overview | ||
| @name Tutorial: Customizing Column Menu | ||
| @description | ||
|
|
||
| You can customize a column's menu and provide your own functionality. | ||
|
|
||
| By default, the `action` and `shown`'s' contexts will have a reference to the grid added as the property `grid` (accessible through `this.grid`. | ||
| You can pass in your own context by supplying the `context` property to your menu item. It will be accessible through `this.context`. | ||
|
|
||
| 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 | ||
| 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. | ||
|
|
||
| You can supply an icon class with the `icon` property. | ||
|
|
||
| See the example below for usage. | ||
|
|
||
|
|
||
| @example | ||
| <example module="app"> | ||
| <file name="app.js"> | ||
| var app = angular.module('app', ['ngAnimate', 'ui.grid']); | ||
|
|
||
| app.controller('MainCtrl', ['$scope', '$http', function ($scope, $http) { | ||
| $scope.blargh = function() { | ||
| alert("I'm in the outer scope!"); | ||
| }; | ||
|
|
||
| $scope.gridOptions = { | ||
| enableSorting: true, | ||
| columnDefs: [ | ||
| { field: 'name' }, | ||
| { field: 'gender' }, | ||
| { | ||
| field: 'company', | ||
| menuItems: [ | ||
| { | ||
| title: 'Outer Scope Alert', | ||
| icon: 'ui-grid-icon-info-circled', | ||
| action: function($event) { | ||
| this.context.blargh(); // $scope.blargh() would work too, this is just an example | ||
| }, | ||
| context: $scope | ||
| }, | ||
| { | ||
| title: 'Grid ID', | ||
| action: function() { | ||
| alert('Grid ID: ' + this.grid.id); | ||
| } | ||
| }, | ||
| { | ||
| title: 'Column Title Alert', | ||
| shown: function () { | ||
| return this.context.col.displayName === 'Company'; | ||
| }, | ||
| action: function() { | ||
| alert(this.context.col.displayName); | ||
| } | ||
| } | ||
| ] | ||
| } | ||
| ] | ||
| }; | ||
|
|
||
| $http.get('/data/100.json') | ||
| .success(function(data) { | ||
| $scope.gridOptions.data = data; | ||
| }); | ||
| }]); | ||
| </file> | ||
| <file name="index.html"> | ||
| <div ng-controller="MainCtrl"> | ||
| Click on the third column header to test custom menu items. | ||
| <br> | ||
| <br> | ||
| <div ui-grid="gridOptions" class="grid"></div> | ||
| </div> | ||
| </file> | ||
| <file name="main.css"> | ||
| .grid { | ||
| width: 500px; | ||
| height: 400px; | ||
| } | ||
| </file> | ||
| </example> |
Oops, something went wrong.