<!DOCTYPE html>
<html ng-app="app">
<head>
<script data-require="jquery@*" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-touch.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-animate.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
<script src="http://ui-grid.info/release/ui-grid.js"></script>
<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css" />
<link rel="stylesheet" href="main.css" type="text/css" />
</head>
<body>
<div ng-controller="MainCtrl">
<div ui-grid="gridOptions" ui-grid-cellnav="" ui-grid-pinning="" class="grid"></div>
</div>
<script>
var app = angular.module('app', ['ngTouch', 'ui.grid', 'ui.grid.cellNav', 'ui.grid.pinning']);
app.controller('MainCtrl', ['$scope', '$http', '$log', 'uiGridConstants', function($scope, $http, $log, uiGridConstants) {
$scope.gridOptions = {
modifierKeysToMultiSelectCells: true,
showGridFooter: true,
};
$scope.gridOptions.columnDefs = [
{ field: 'ID', displayName: 'Item ID', width: 100, enableFiltering: false },
{ field: 'bodyType', displayName: 'Body Type', width: 100, height: 35, enableFiltering: false },
{ field: 'autoMake', displayName: 'Make', width: 150, height: 35 },
{ field: 'autoModel', displayName: 'Model', width: 150, height: 35 },
{ field: 'autoYear', displayName: 'Year', width: 60, height: 35 },
{ field: 'autoDoor', displayName: 'Doors', width: 60, height: 35, enableFiltering: false },
{ field: 'exteriorColor', displayName: 'Ext Color', width: 100, height: 35, enableFiltering: false },
{ field: 'interiorColor', displayName: 'Int Color', width: 100, height: 35, enableFiltering: false },
// { field: 'autoMileage', displayName: 'Mileage', width: 100, height: 35, cellClass: 'grid-align-center', enableFiltering: false },
{ field: 'autoStatus', displayName: 'Status', width: 100, height: 35, cellClass: 'grid-align-center', enableFiltering: false },
{ field: 'salePrice', displayName: 'Price', width: 100, height: 35, cellFilter: 'currency', cellClass: 'grid-align-right', enableFiltering: false },
//{ field: 'picture', displayName: 'Picture', width: 80, height: 35, cellTemplate: "<img width=\"60px\" ng-src=\"{{grid.getCellValue(row, col)}}\" lazy-src>", enableFiltering: false },
{ field: 'picture', displayName: 'Picture', width: 70, cellTemplate: "<img width=\"60px\" ng-src=\"{{grid.getCellValue(row, col)}}\" lazy-src>", enableFiltering: false },
{ field: 'Edit', width: 70, height: 35, cellTemplate: '<button class="btn primary" ng-click="grid.appScope.showDetail(row)">Edit</button>', enableFiltering: false }
];
function getCellClass(grid, row) {
return row.uid === selectedRow ? 'highlight' : '';
}
$http.get('http://localhost:90/Service1.svc/AutoUsedMaint/kc-1')
.success(function(data) {
$scope.gridOptions.data = data;
});
var selectedRow = null;
$scope.gridOptions.onRegisterApi = function(gridApi) {
$scope.gridApi = gridApi;
gridApi.cellNav.on.navigate($scope, function(selected) {
if ('.ui-grid-cell-focus ') {
selectedRow = selected.row.uid;
gridApi.core.notifyDataChange(uiGridConstants.dataChange.COLUMN);
}
});
};
}]);
</script>
</body>
</html>