From 66f3404ade7ead010142ecf047e863f526d960a3 Mon Sep 17 00:00:00 2001 From: Shane Walters Date: Mon, 29 Sep 2014 12:40:21 -0500 Subject: [PATCH] feat(cellTemplates): add MODEL_COL_FIELD to cellTemplate parsing so it can be used in ng-model #1633 Breaking Change: All editable cell templates must be changed to use MODEL_COL_FIELD --- CHANGELOG.md | 9 +++++++ misc/tutorial/106_binding.ngdoc | 8 ++++++ src/features/edit/js/gridEdit.js | 2 +- src/features/edit/templates/cellEditor.html | 2 +- .../edit/templates/dropdownEditor.html | 2 +- src/features/edit/test/uiGridCell.spec.js | 2 +- .../edit/test/uiGridCellWithDropdown.spec.js | 2 +- src/js/core/constants.js | 1 + src/js/core/factories/Grid.js | 24 ++++++++++++++---- test/unit/core/factories/Grid.spec.js | 25 ++++++++++++++++++- 10 files changed, 66 insertions(+), 11 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 4965112ee1..984943463c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,12 @@ + +### v3.0.0-rc.NEXT Current Master + +#### Breaking Changes +* editableCellTemplates should use MODEL_COL_FIELD instead of COL_FIELD. +https://github.com/angular-ui/ng-grid/issues/1633 MODEL_COL_FIELD variable was added to the cellTemplate and editCellTemplate for utilizing the bound field in ng-model. Edit feature +was changed to use MODEL_COL_FIELD instead of COL_FIELD for consistency. + + ### v3.0.0-rc.11 (2014-09-26) diff --git a/misc/tutorial/106_binding.ngdoc b/misc/tutorial/106_binding.ngdoc index 4679370a7d..90ad38f197 100644 --- a/misc/tutorial/106_binding.ngdoc +++ b/misc/tutorial/106_binding.ngdoc @@ -8,6 +8,14 @@ This tutorial shows two-way binding to properties with special characters, array Note that a function can not be edited. +In your custom cellTemplates, you can use: +
+COL\_FIELD which will be replaced with grid.getCellValue(row). This should be used for any cellTemplates that need readonly access to the field value +
+MODEL\_COL\_FIELD which will be replaced with row.entity.field. Use MODEL\_COL\_FIELD anytime you need ng-model='field' + + + @example diff --git a/src/features/edit/js/gridEdit.js b/src/features/edit/js/gridEdit.js index 11fa4695fb..3b45f0b5c3 100644 --- a/src/features/edit/js/gridEdit.js +++ b/src/features/edit/js/gridEdit.js @@ -497,7 +497,7 @@ origCellValue = cellModel($scope); html = $scope.col.editableCellTemplate; - html = html.replace(uiGridConstants.COL_FIELD, $scope.row.getQualifiedColField($scope.col)); + html = html.replace(uiGridConstants.MODEL_COL_FIELD, $scope.row.getQualifiedColField($scope.col)); var optionFilter = $scope.col.colDef.editDropdownFilter ? '|' + $scope.col.colDef.editDropdownFilter : ''; html = html.replace(uiGridConstants.CUSTOM_FILTERS, optionFilter); diff --git a/src/features/edit/templates/cellEditor.html b/src/features/edit/templates/cellEditor.html index 572f58017e..4192f82db1 100644 --- a/src/features/edit/templates/cellEditor.html +++ b/src/features/edit/templates/cellEditor.html @@ -1,5 +1,5 @@
- +
diff --git a/src/features/edit/templates/dropdownEditor.html b/src/features/edit/templates/dropdownEditor.html index 480da7caae..2ab3853cdb 100644 --- a/src/features/edit/templates/dropdownEditor.html +++ b/src/features/edit/templates/dropdownEditor.html @@ -1,5 +1,5 @@
- +
diff --git a/src/features/edit/test/uiGridCell.spec.js b/src/features/edit/test/uiGridCell.spec.js index 9ab4d5ef06..c8048aa7c7 100644 --- a/src/features/edit/test/uiGridCell.spec.js +++ b/src/features/edit/test/uiGridCell.spec.js @@ -15,7 +15,7 @@ describe('ui.grid.edit GridCellDirective', function () { $timeout = _$timeout_; $templateCache.put('ui-grid/uiGridCell', '
{{COL_FIELD CUSTOM_FILTERS}}
'); - $templateCache.put('ui-grid/cellEditor', '
'); + $templateCache.put('ui-grid/cellEditor', '
'); scope = $rootScope.$new(); var grid = gridClassFactory.createGrid(); diff --git a/src/features/edit/test/uiGridCellWithDropdown.spec.js b/src/features/edit/test/uiGridCellWithDropdown.spec.js index 5f45162625..779697d680 100644 --- a/src/features/edit/test/uiGridCellWithDropdown.spec.js +++ b/src/features/edit/test/uiGridCellWithDropdown.spec.js @@ -15,7 +15,7 @@ describe('ui.grid.edit GridCellDirective - with dropdown', function () { $timeout = _$timeout_; $templateCache.put('ui-grid/uiGridCell', '
{{COL_FIELD CUSTOM_FILTERS}}
'); - $templateCache.put('ui-grid/cellEditor', '
'); + $templateCache.put('ui-grid/cellEditor', '
'); scope = $rootScope.$new(); var grid = gridClassFactory.createGrid(); diff --git a/src/js/core/constants.js b/src/js/core/constants.js index b5b02aa055..5870cd1298 100644 --- a/src/js/core/constants.js +++ b/src/js/core/constants.js @@ -3,6 +3,7 @@ angular.module('ui.grid').constant('uiGridConstants', { CUSTOM_FILTERS: /CUSTOM_FILTERS/g, COL_FIELD: /COL_FIELD/g, + MODEL_COL_FIELD: /MODEL_COL_FIELD/g, DISPLAY_CELL_TEMPLATE: /DISPLAY_CELL_TEMPLATE/g, TEMPLATE_REGEXP: /<.+>/, FUNC_REGEXP: /(\([^)]*\))?$/, diff --git a/src/js/core/factories/Grid.js b/src/js/core/factories/Grid.js index 16c7bc580e..564a73e91f 100644 --- a/src/js/core/factories/Grid.js +++ b/src/js/core/factories/Grid.js @@ -386,12 +386,26 @@ angular.module('ui.grid') * @description precompiles all cell templates */ Grid.prototype.preCompileCellTemplates = function() { - this.columns.forEach(function (col) { - var html = col.cellTemplate.replace(uiGridConstants.COL_FIELD, 'grid.getCellValue(row, col)'); + var self = this; + this.columns.forEach(function (col) { + var html = col.cellTemplate.replace(uiGridConstants.MODEL_COL_FIELD, self.getQualifiedColField(col)); + html = html.replace(uiGridConstants.COL_FIELD, 'grid.getCellValue(row, col)'); - var compiledElementFn = $compile(html); - col.compiledElementFn = compiledElementFn; - }); + + var compiledElementFn = $compile(html); + col.compiledElementFn = compiledElementFn; + }); + }; + + /** + * @ngdoc function + * @name getGridQualifiedColField + * @methodOf ui.grid.class:Grid + * @description precompiles all cell templates + * @param {GridColumn} col col object + */ + Grid.prototype.getQualifiedColField = function (col) { + return 'row.entity.' + gridUtil.preEval(col.field); }; /** diff --git a/test/unit/core/factories/Grid.spec.js b/test/unit/core/factories/Grid.spec.js index 67575632cb..96234f79eb 100644 --- a/test/unit/core/factories/Grid.spec.js +++ b/test/unit/core/factories/Grid.spec.js @@ -1,15 +1,17 @@ describe('Grid factory', function () { var $q, $scope, grid, Grid, GridRow, GridColumn, rows, returnedRows, column, uiGridConstants; + var gridClassFactory; beforeEach(module('ui.grid')); - beforeEach(inject(function (_$q_, _$rootScope_, _Grid_, _GridRow_, _GridColumn_, _uiGridConstants_) { + beforeEach(inject(function (_$q_, _$rootScope_, _Grid_, _GridRow_, _GridColumn_, _uiGridConstants_, _gridClassFactory_) { $q = _$q_; $scope = _$rootScope_; Grid = _Grid_; GridRow = _GridRow_; GridColumn = _GridColumn_; uiGridConstants = _uiGridConstants_; + gridClassFactory = _gridClassFactory_; grid = new Grid({ id: 1 }); rows = [ @@ -262,6 +264,27 @@ describe('Grid factory', function () { }); + it('should replace constants in template', inject(function ($timeout) { + + var colDefs = [ + {name:'simpleProp', cellTemplate:'
'} + ]; + var grid = gridClassFactory.createGrid({columnDefs:colDefs }); + var rows = [ + new GridRow(entity,1,grid) + ]; + + $timeout(function () { + grid.buildColumns(); + }); + $timeout.flush(); + grid.modifyRows([entity]); + grid.preCompileCellTemplates(); + + var row = grid.rows[0]; + expect(grid.getColumn('simpleProp').compiledElementFn).toBeDefined(); + + })); it('should bind correctly to simple prop', function() {