Skip to content

Commit 1d9f81f

Browse files
committed
feature(edit): add new colDef.editModelField to allow editing to bind to a different property than the display field
1 parent 6997d2b commit 1d9f81f

File tree

4 files changed

+47
-9
lines changed

4 files changed

+47
-9
lines changed

misc/tutorial/201_editable.ngdoc

+6-5
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ and END_CELL_EDIT` events.
3030

3131
__ColumnDef Options__:
3232

33+
- `editModelField` (default: undefined) - a bindable expression to use instead of colDef.field when binding the edit control.
3334
- `editableCellTemplate` (default: `'ui-grid/cellEditor'`) - Valid html, templateCache Id, or url that returns html
3435
content to be compiled when edit mode is invoked.
3536
- `enableCellEdit` (default: `false` for columns of type `'object'`, `true` for all other columns) - `true` will enable
@@ -55,9 +56,9 @@ The following option is available only if using cellNav feature
5556

5657
_Note that the edit functionality uses native html5 edit widgets - the date picker, the dropdown and the input box
5758
itself. If your browser does not implement these widgets, then you won't get them. If your browser implements these
58-
widgets in a way that isn't ideal (for example, some browsers don't allow number fields to start with '.', so you can't
59+
widgets in a way that isn't ideal (for example, some browsers don't allow number fields to start with '.', so you can't
5960
type in '.5'), then you need to provide a custom editor instead. On the medium term roadmap there is intent
60-
to provide a bootstrap feature, which would provide directives that were compatible with angular-bootstrap directives,
61+
to provide a bootstrap feature, which would provide directives that were compatible with angular-bootstrap directives,
6162
allowing use of the bootstrap datepicker and input fields_
6263

6364

@@ -91,7 +92,7 @@ $scope.gridOptions.columnDefs = [
9192
// ignore all but the first file, it can only select one anyway
9293
// set the filename into this column
9394
gridRow.entity.filename = files[0].name;
94-
95+
9596
// read the file and set it into a hidden column, which we may do stuff with later
9697
var setFile = function(fileContent){
9798
gridRow.entity.file = fileContent.currentTarget.result;
@@ -102,7 +103,7 @@ $scope.gridOptions.columnDefs = [
102103
var reader = new FileReader();
103104
reader.onload = setFile;
104105
reader.readAsText( files[0] );
105-
};
106+
};
106107

107108
$scope.gridOptions.columnDefs = [
108109
{ name: 'id', enableCellEdit: false, width: '10%' },
@@ -127,7 +128,7 @@ $scope.gridOptions.columnDefs = [
127128
{ name: 'filename', displayName: 'File', width: '20%', editableCellTemplate: 'ui-grid/fileChooserEditor',
128129
editFileChooserCallback: $scope.storeFile }
129130
];
130-
131+
131132
$scope.msg = {};
132133

133134
$scope.gridOptions.onRegisterApi = function(gridApi){

src/features/edit/js/gridEdit.js

+20-1
Original file line numberDiff line numberDiff line change
@@ -244,6 +244,20 @@
244244
//enableCellEditOnFocus can only be used if cellnav module is used
245245
colDef.enableCellEditOnFocus = colDef.enableCellEditOnFocus === undefined ? gridOptions.enableCellEditOnFocus : colDef.enableCellEditOnFocus;
246246

247+
248+
/**
249+
* @ngdoc string
250+
* @name editModelField
251+
* @propertyOf ui.grid.edit.api:ColumnDef
252+
* @description a bindable string value that is used when binding to edit controls instead of colDef.field
253+
* <br/> example: You have a complex property on and object like state:{abbrev:'MS',name:'Mississippi'}. The
254+
* grid should display state.name in the cell and sort/filter based on the state.name property but the editor
255+
* requires the full state object.
256+
* <br/>colDef.field = 'state.name'
257+
* <br/>colDef.editModelField = 'state'
258+
*/
259+
//colDef.editModelField
260+
247261
return $q.all(promises);
248262
},
249263

@@ -647,7 +661,12 @@
647661
origCellValue = cellModel($scope);
648662

649663
html = $scope.col.editableCellTemplate;
650-
html = html.replace(uiGridConstants.MODEL_COL_FIELD, $scope.row.getQualifiedColField($scope.col));
664+
if ($scope.col.colDef.editModelField) {
665+
html = html.replace(uiGridConstants.MODEL_COL_FIELD, gridUtil.preEval('row.entity.' + $scope.col.colDef.editModelField));
666+
}
667+
else {
668+
html = html.replace(uiGridConstants.MODEL_COL_FIELD, $scope.row.getQualifiedColField($scope.col));
669+
}
651670

652671
var optionFilter = $scope.col.colDef.editDropdownFilter ? '|' + $scope.col.colDef.editDropdownFilter : '';
653672
html = html.replace(uiGridConstants.CUSTOM_FILTERS, optionFilter);

src/features/edit/test/uiGridCell.spec.js

+19-2
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ describe('ui.grid.edit GridCellDirective', function () {
2323
{name: 'col1', enableCellEdit: true}
2424
];
2525
grid.options.data = [
26-
{col1: 'val'}
26+
{col1: 'val', col2:'col2val'}
2727
];
2828
uiGridEditService.initializeGrid(grid);
2929
grid.buildColumns();
@@ -149,4 +149,21 @@ describe('ui.grid.edit GridCellDirective', function () {
149149

150150
});
151151

152-
});
152+
153+
describe('ui.grid.edit should override bound value when using editModelField', function () {
154+
var displayHtml;
155+
beforeEach(function () {
156+
element = angular.element('<div ui-grid-cell/>');
157+
//bind the edit to another column. This could be any property on the entity
158+
scope.grid.options.columnDefs[0].editModelField = 'col2';
159+
recompile();
160+
161+
displayHtml = element.html();
162+
expect(element.text()).toBe('val');
163+
//invoke edit
164+
element.dblclick();
165+
expect(element.find('input')).toBeDefined();
166+
expect(element.find('input').val()).toBe('col2val');
167+
});
168+
});
169+
});

src/features/edit/test/uiGridEditDirective.spec.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,7 @@ describe('uiGridEditDirective', function () {
5454
expect(col).not.toBeNull();
5555
expect(col.colDef.enableCellEdit).toBe(false);
5656
expect(col.colDef.editableCellTemplate).not.toBeDefined();
57+
expect(col.colDef.editModelField).not.toBeDefined();
5758

5859
});
5960

@@ -76,4 +77,4 @@ describe('uiGridEditDirective', function () {
7677
});
7778
});
7879

79-
});
80+
});

0 commit comments

Comments
 (0)