Why is angulargrid not working?

Q

Quintis2021-03-01 17:56:55

Angular

Quintis, 2021-03-01 17:56:55

Created index.html and app.js files :

<!doctype html>
<html ng-app="app">
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular-touch.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular-animate.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular-aria.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/docs/grunt-scripts/lodash.min.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/jszip.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/excel-builder.dist.js"></script>
    <script src="/release/ui-grid.js"></script>
    <link rel="stylesheet" href="/release/ui-grid.css" type="text/css">
    <script src="./app.js"></script>
    <link rel="stylesheet" type="text/css" href="node_modules/angular-ui-grid/ui-grid.min.css">
    <script src="node_modules/angular-ui-grid/ui-grid.min.js"></script>
  </head>
  <body>
    <div ng-controller="MainCtrl">
      <button type="button" class="btn btn-success" ng-click="getCurrentFocus()">Get Current focused cell</button>  <span ng-bind="currentFocused"></span>
      <br>
      <br>
      <div ui-grid="gridOptions" ui-grid-edit ui-grid-cellnav class="grid"></div>
    </div>
  </body>
  
</html>

var app = angular.module('app', ['ngTouch', 'ui.grid', 'ui.grid.edit', 'ui.grid.cellNav']);
 
app.controller('MainCtrl', ['$scope', '$http', function ($scope, $http) {
  $scope.gridOptions = {  };
  $scope.gridOptions.enableCellEditOnFocus = true;
 
  $scope.gridOptions.columnDefs = [
    { name: 'id', enableCellEdit: false },
    { name: 'age', enableCellEditOnFocus:false, displayName:'age (f2/dblClick edit)', width: 200  },
    { name: 'address.city', enableCellEdit: true, width: 300 },
    { name: 'name', displayName: 'Name (editOnFocus)', width: 200}
  ];
 
  $http.get('/data/500_complex.json')
    .then(function(response) {
      $scope.gridOptions.data = response.data;
    });
 
    $scope.currentFocused = "";
 
    $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;
      }
    }
 
    $scope.gridOptions.onRegisterApi = function(gridApi){
       $scope.gridApi = gridApi;
    };
}]);

But still there are errors in console :

index.html:15 GET file:///release/ui-grid.js net::ERR_FILE_NOT_FOUND
index.html:16 GET file:///release/ui-grid.css net::ERR_FILE_NOT_FOUND
angular.js:36440 WARNING: Tried to load AngularJS more than once.
index.html:1 Access to XMLHttpRequest at 'file:///data/500_complex.json' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.
angular.js:15635 Possibly unhandled rejection: {"data":null,"status":-1,"config":{"method":"GET","transformRequest":[null],"transformResponse":[null],"jsonpCallbackParam":"callback","url":"/data/500_complex.json","headers":{"Accept":"application/json, text/plain, */*"}},"statusText":"","xhrStatus":"error"}
(anonymous) @ angular.js:15635
(anonymous) @ angular.js:11914
processChecks @ angular.js:18045
$digest @ angular.js:19180
$apply @ angular.js:19568
done @ angular.js:13411
completeRequest @ angular.js:13668
requestError @ angular.js:13584
error (async)
(anonymous) @ angular.js:13597
sendReq @ angular.js:13356
serverRequest @ angular.js:13097
processQueue @ angular.js:18013
(anonymous) @ angular.js:18061
$digest @ angular.js:19180
$apply @ angular.js:19568
bootstrapApply @ angular.js:1966
invoke @ angular.js:5208
doBootstrap @ angular.js:1964
bootstrap @ angular.js:1984
angularInit @ angular.js:1869
(anonymous) @ angular.js:36491
trigger @ angular.js:3587
angular.js:13630 GET file:///data/500_complex.json net::ERR_FAILED
(anonymous) @ angular.js:13630
sendReq @ angular.js:13356
serverRequest @ angular.js:13097
processQueue @ angular.js:18013
(anonymous) @ angular.js:18061
$digest @ angular.js:19180
$apply @ angular.js:19568
bootstrapApply @ angular.js:1966
invoke @ angular.js:5208
doBootstrap @ angular.js:1964
bootstrap @ angular.js:1984
angularInit @ angular.js:1869
(anonymous) @ angular.js:36491
trigger @ angular.js:3587
DevTools failed to load SourceMap: Could not load content for http://ui-grid.info/docs/grunt-scripts/pdfmake.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE

angular js connected via cdn, angular-ui-grid via npm install angular-ui-grid , there is a table frame but no data, how to fix

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

V

Vladimir, 2021-03-01
@Quintis

It is sharpened for angular js, not for angular
https://angularjs.org/

UI-Grid is currently compatible with Angular versions ranging from 1.4.x to 1.8.x.

https://github.com/angular-ui/ui-grid