angularjs ng-grid rowIndex initial gridfocus
HTML
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="http://code.angularjs.org/1.1.0/angular.js"></script>
<script src="https://raw.github.com/angular-ui/angular-ui/master/build/angular-ui.js"></script>
<link rel="stylesheet" href="https://raw.github.com/angular-ui/angular-ui/master/build/angular-ui.css">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.22/themes/base/jquery-ui.css">
<script src="http://angular-ui.github.com/ng-grid/lib/ng-grid.debug.js"></script>
<link rel="stylesheet" href="http://angular-ui.github.com/ng-grid/css/ng-grid.css">
<div ng-app="app">
<div ng-controller="GridController">
<h3>1. click into black area witch is the gridpane</h3>
<h3>2. press key -down- or -up- to raise error #ng-grid/issues/298</h3>
<div ng-grid="grid.options" class="grid"></div>
<ul ng-repeat="item in data.selected">
<li>{{item}}</li>
</ul>
</div>
</div>
CSS
.grid {
height: 600px;
background-color: #000;
}
JavaScript
var myapp = angular.module('app', ["ui", "ngGrid"]);
myapp.controller('GridController', function($scope) {
$scope.data = [{
id: 1,
name: "Max",
number: 51323.512
}, {
id: 2,
name: "Adam",
number: 7245.2
}, {
id: 3,
name: "Betty",
number: 828
}, {
id: 4,
name: "Sara",
number: 23452.45182
}];
$scope.grid = {
options: {
data: 'data',
multiSelect: false,
columnDefs: [{
field: "id",
displayName: "ID"
}, {
field: "name",
displayName: "Name"
}, {
field: "number",
displayName: "Nummer",
cellFilter: "number:2"
}]
}
};
});