Skip to content

Commit

Permalink
fix(cellnav): Replace with .
Browse files Browse the repository at this point in the history 
fix #6302
  • Loading branch information
@mportuga
Portugal, Marcelo authored and mportuga committed Jan 15, 2018
1 parent 804fce7 commit be18d09
Show file tree
Hide file tree
Showing 2 changed files with 58 additions and 48 deletions.
104 changes: 57 additions & 47 deletions misc/tutorial/202_cellnav.ngdoc
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,13 +35,15 @@ while still allowing the right arrow to be handled by the grid.
<file name="app.js">
var app = angular.module('app', ['ngTouch', 'ui.grid', 'ui.grid.cellNav', 'ui.grid.pinning']);

app.controller('MainCtrl', ['$scope', '$http', '$log', function ($scope, $http, $log) {
$scope.gridOptions = {
app.controller('MainCtrl', function ($scope, $http, $log) {
var vm = this;

vm.gridOptions = {
modifierKeysToMultiSelectCells: true,
keyDownOverrides: [ { keyCode: 39, ctrlKey: true }],
keyDownOverrides: [{ keyCode: 39, ctrlKey: true }],
showGridFooter: true
};
$scope.gridOptions.columnDefs = [
vm.gridOptions.columnDefs = [
{ name: 'id', width:'150' },
{ name: 'name', width:'200' },
{ name: 'age', displayName: 'Age (not focusable)', allowCellFocus : false, width:'100' },
Expand All @@ -55,70 +57,78 @@ while still allowing the right arrow to be handled by the grid.

$http.get('/data/500_complex.json')
.then(function(response) {
$scope.gridOptions.data = response.data;
vm.gridOptions.data = response.data;
});

$scope.info = {};
vm.info = {};

vm.currentFocused = '';

$scope.currentFocused = "";
vm.getCurrentFocus = function(){
var rowCol = vm.gridApi.cellNav.getFocusedCell();

$scope.getCurrentFocus = function(){
var rowCol = $scope.gridApi.cellNav.getFocusedCell();
if(rowCol !== null) {
$scope.currentFocused = 'Row Id:' + rowCol.row.entity.id + ' col:' + rowCol.col.colDef.name;
vm.currentFocused = 'Row Id:' + rowCol.row.entity.id + ' col:' + rowCol.col.colDef.name;
}
};

$scope.getCurrentSelection = function() {
var values = [];
var currentSelection = $scope.gridApi.cellNav.getCurrentSelection();
vm.getCurrentSelection = function() {
var values = [],
currentSelection = vm.gridApi.cellNav.getCurrentSelection();

for (var i = 0; i < currentSelection.length; i++) {
values.push(currentSelection[i].row.entity[currentSelection[i].col.name])
}
$scope.printSelection = values.toString();
vm.printSelection = values.toString();
};

$scope.scrollTo = function( rowIndex, colIndex ) {
$scope.gridApi.core.scrollTo( $scope.gridOptions.data[rowIndex], $scope.gridOptions.columnDefs[colIndex]);
vm.scrollTo = function( rowIndex, colIndex ) {
vm.gridApi.core.scrollTo( vm.gridOptions.data[rowIndex], vm.gridOptions.columnDefs[colIndex]);
};

$scope.scrollToFocus = function( rowIndex, colIndex ) {
$scope.gridApi.cellNav.scrollToFocus( $scope.gridOptions.data[rowIndex], $scope.gridOptions.columnDefs[colIndex]);
vm.scrollToFocus = function( rowIndex, colIndex ) {
vm.gridApi.cellNav.scrollToFocus( vm.gridOptions.data[rowIndex], vm.gridOptions.columnDefs[colIndex]);
};

$scope.gridOptions.onRegisterApi = function(gridApi){
$scope.gridApi = gridApi;
gridApi.cellNav.on.navigate($scope,function(newRowCol, oldRowCol){
// var rowCol = {row: newRowCol.row.index, col:newRowCol.col.colDef.name};
// var msg = 'New RowCol is ' + angular.toJson(rowCol);
// if(oldRowCol){
// rowCol = {row: oldRowCol.row.index, col:oldRowCol.col.colDef.name};
// msg += ' Old RowCol is ' + angular.toJson(rowCol);
// }
$log.log('navigation event');
});
gridApi.cellNav.on.viewPortKeyDown($scope,function(event, newRowCol){
var row = newRowCol.row;
var col = newRowCol.col
if (event.keyCode === 39) {
$scope.gridApi.cellNav.scrollToFocus(row.entity, $scope.gridApi.grid.columns[$scope.gridApi.grid.columns.length - 1]);
}
});
vm.gridOptions.onRegisterApi = function(gridApi){
vm.gridApi = gridApi;
gridApi.cellNav.on.navigate($scope, function(newRowCol, oldRowCol) {
// var rowCol = {row: newRowCol.row.index, col:newRowCol.col.colDef.name};
// var msg = 'New RowCol is ' + angular.toJson(rowCol);
// if(oldRowCol){
// rowCol = {row: oldRowCol.row.index, col:oldRowCol.col.colDef.name};
// msg += ' Old RowCol is ' + angular.toJson(rowCol);
// }
$log.log('navigation event');
});
gridApi.cellNav.on.viewPortKeyDown($scope, function(event, newRowCol) {
var row = newRowCol.row,
col = newRowCol.col;

if (event.keyCode === 39) {
vm.gridApi.cellNav.scrollToFocus(row.entity, vm.gridApi.grid.columns[vm.gridApi.grid.columns.length - 1]);
}
});
};
}]);
});
</file>
<file name="index.html">
<div ng-controller="MainCtrl">
<button type="button" class="btn btn-success" ng-click="scrollTo(20,0)">Scroll To Row 20</button>
<button type="button" class="btn btn-success" ng-click="scrollTo(0,7)">Scroll To Balance</button>
<button type="button" class="btn btn-success" ng-click="scrollTo(50,7)">Scroll To Row 50, Balance</button>
<button type="button" class="btn btn-success" ng-click="scrollToFocus(50,7)">Focus Row 50, Balance</button>
<button type="button" class="btn btn-success" ng-click="getCurrentFocus()">Get Current focused cell</button> <span ng-bind="currentFocused"></span>
<button type="button" class="btn btn-success" ng-click="getCurrentSelection()">Get Current focused cell values</button>
<input type="text" ng-model="printSelection" placeholder="Click the 'Get current focused cell values' button to print cell values of selection here" class="printSelection">
<div ng-controller="MainCtrl as $ctrl">
<button type="button" class="btn btn-success" ng-click="$ctrl.scrollTo(20,0)">Scroll To Row 20</button>
<button type="button" class="btn btn-success" ng-click="$ctrl.scrollTo(0,7)">Scroll To Balance</button>
<button type="button" class="btn btn-success" ng-click="$ctrl.scrollTo(50,7)">Scroll To Row 50, Balance</button>
<button type="button" class="btn btn-success" ng-click="$ctrl.scrollToFocus(50,7)">Focus Row 50, Balance</button>
<br>
<br>
<button type="button" class="btn btn-success" ng-click="$ctrl.getCurrentFocus()">Get Current focused cell</button> <span ng-bind="$ctrl.currentFocused"></span>
<br>
<br>
<button type="button" class="btn btn-success" ng-click="$ctrl.getCurrentSelection()">Get Current focused cell values</button>
<br>
<input type="text" ng-model="$ctrl.printSelection" placeholder="Click the 'Get current focused cell values' button to print cell values of selection here" class="printSelection">
<br>
<br>
<div ui-grid="gridOptions" ui-grid-cellNav ui-grid-pinning class="grid"></div>
<div ui-grid="$ctrl.gridOptions" ui-grid-cellNav ui-grid-pinning class="grid"></div>
</div>
</file>
<file name="main.css">
Expand All @@ -127,7 +137,7 @@ while still allowing the right arrow to be handled by the grid.
height: 400px;
}
.printSelection {
width: 600px;
width: 500px;
margin-top: 10px;
}
</file>
Expand Down
2 changes: 1 addition & 1 deletion src/features/cellnav/js/cellnav.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1141,7 +1141,7 @@
// a short period of time (from now until $timeout function executed)
clearFocus();

$timeout(refreshCellFocus);
$scope.$applyAsync(refreshCellFocus);
}, [uiGridConstants.dataChange.ROW]);

function refreshCellFocus() {
Expand Down

0 comments on commit be18d09

Please sign in to comment.