|
2 | 2 | @name Tutorial: 201 Edit Feature |
3 | 3 | @description |
4 | 4 |
|
5 | | -The ui.grid.edit feature allows inline editing of grid data. To enable, you must include the `'ui.grid.edit'` module |
| 5 | +The ui.grid.edit feature allows inline editing of grid data. To enable, you must include the `'ui.grid.edit'` module |
6 | 6 | and you must include the `ui-grid-edit` directive on your grid element. |
7 | 7 |
|
8 | 8 | You can use the `enableCellEdit` options in your column definitions to allow a column to be editable. |
9 | 9 |
|
10 | 10 | Editing is invoked via double-click, f2, or start typing any non-navigable key. Cell editing ends on tab, enter or esc (cancel) |
11 | 11 | on an input editor, and tab, left or right arrows, enter or esc for a dropdown. |
12 | 12 |
|
13 | | -By default an input element is provided, with numeric, date and checkbox editors for fields specified as `'number'`, `'date'` |
| 13 | +By default an input element is provided, with numeric, date and checkbox editors for fields specified as `'number'`, `'date'` |
14 | 14 | and `'boolean'` types, for all other fields a simple text editor is provided. |
15 | 15 |
|
16 | | -A dropdown editor is also available, through setting the `editableCellTemplate` on the `columnDef` to `'ui-grid/dropdownEditor'`. |
| 16 | +A dropdown editor is also available, through setting the `editableCellTemplate` on the `columnDef` to `'ui-grid/dropdownEditor'`. |
17 | 17 | When using a dropdown editor you need to provide an options array through the `editDropDownOptionsArray` property on the `columnDef`. |
18 | | -This array by default should be an array of `{id: xxx, value: xxx}`, although the field tags can be changed through |
19 | | -using the `editDropdownIdLabel` and `editDropdownNameLabel` options. |
| 18 | +This array by default should be an array of `{id: xxx, value: xxx}`, although the field tags can be changed through |
| 19 | +using the `editDropdownIdLabel` and `editDropdownValueLabel` options. |
20 | 20 |
|
21 | 21 | Custom edit templates should be used for any editor other than the default editors, but be aware that you will likely also |
22 | 22 | need to provide a custom directive similar to the uiGridEditor directive so as to provide `BEGIN_CELL_EDIT, CANCEL_CELL_EDIT |
23 | 23 | and END_CELL_EDIT` events. |
24 | 24 |
|
25 | 25 | __ColumnDef Options__: |
26 | 26 |
|
27 | | -- `editableCellTemplate` (default: `'ui-grid/cellEditor'`) - Valid html, templateCache Id, or url that returns html |
| 27 | +- `editableCellTemplate` (default: `'ui-grid/cellEditor'`) - Valid html, templateCache Id, or url that returns html |
28 | 28 | content to be compiled when edit mode is invoked. |
29 | | -- `enableCellEdit` (default: `false` for columns of type `'object'`, `true` for all other columns) - `true` will enable |
| 29 | +- `enableCellEdit` (default: `false` for columns of type `'object'`, `true` for all other columns) - `true` will enable |
30 | 30 | editing and `false` will disable it. |
31 | | -- `cellEditableCondition` (default: `true`) Can be set to a boolean or a function that will be called with the cellScope |
| 31 | +- `cellEditableCondition` (default: `true`) Can be set to a boolean or a function that will be called with the cellScope |
32 | 32 | to determine if the cell should be invoked in edit mode. |
33 | | -- `type` (default: `'string'`) If set to `'number'`, `'boolean'` or `'date'` the default editor provided for editing will be numeric |
34 | | - or boolean or date editor respectively. If set to `'object'` the column will not be editable by default. Be aware that this |
| 33 | +- `type` (default: `'string'`) If set to `'number'`, `'boolean'` or `'date'` the default editor provided for editing will be numeric |
| 34 | + or boolean or date editor respectively. If set to `'object'` the column will not be editable by default. Be aware that this |
35 | 35 | `type` column is also used for other purposes within ui-grid, including the sorting logic. |
36 | 36 | - `editDropdownOptionsArray` If a dropdown, needs to be populated with an array of values, by default those values should be |
37 | 37 | `{id: xxx, value: xxx}`, the labels can be adjusted with the next two options |
38 | 38 | - `editDropdownIdLabel` (default: `'id'`) Controls the id label in the options array - so if your array happens to contain |
39 | 39 | `'code'` instead you can use it without having to reprocess the array |
40 | | -- `editDropdownValueLabel` (default: `'value'`) Controls the value label in the options array - if your array happens to |
| 40 | +- `editDropdownValueLabel` (default: `'value'`) Controls the value label in the options array - if your array happens to |
41 | 41 | contain `'name'` instead you can use it without having to reprocess the array |
42 | 42 | - `editDropdownFilter` (default: `''`) Allows you to apply a filter to the values in the edit dropdown options, for example |
43 | | - if you were using angular-translate you would set this to `'translate'` |
| 43 | + if you were using angular-translate you would set this to `'translate'` |
44 | 44 |
|
45 | 45 | The following option is available only if using cellNav feature |
46 | 46 |
|
@@ -76,11 +76,11 @@ $scope.gridOptions.columnDefs = [ |
76 | 76 | { name: 'id', enableCellEdit: false, width: '10%' }, |
77 | 77 | { name: 'name', displayName: 'Name (editable)', width: '20%' }, |
78 | 78 | { name: 'age', displayName: 'Age' , type: 'number', width: '10%' }, |
79 | | - { name: 'gender', displayName: 'Gender', editableCellTemplate: 'ui-grid/dropdownEditor', width: '20%', |
| 79 | + { name: 'gender', displayName: 'Gender', editableCellTemplate: 'ui-grid/dropdownEditor', width: '20%', |
80 | 80 | cellFilter: 'mapGender', editDropdownValueLabel: 'gender', editDropdownOptionsArray: [ |
81 | | - { id: 1, gender: 'male' }, |
82 | | - { id: 2, gender: 'female' } |
83 | | - ] }, |
| 81 | + { id: 1, gender: 'male' }, |
| 82 | + { id: 2, gender: 'female' } |
| 83 | + ] }, |
84 | 84 | { name: 'registered', displayName: 'Registered' , type: 'date', cellFilter: 'date:"yyyy-MM-dd"', width: '20%' }, |
85 | 85 | { name: 'address', displayName: 'Address', type: 'object', cellFilter: 'address', width: '30%' }, |
86 | 86 | { name: 'address.city', displayName: 'Address (even rows editable)', width: '20%', |
@@ -119,7 +119,7 @@ $scope.gridOptions.columnDefs = [ |
119 | 119 | 1: 'male', |
120 | 120 | 2: 'female' |
121 | 121 | }; |
122 | | - |
| 122 | + |
123 | 123 | return function(input) { |
124 | 124 | if (!input){ |
125 | 125 | return ''; |
|
0 commit comments