I am using the ag-grid plugin in a project. I get json data using the $ http service. But the grid does not appear on the web page. But when json data is applied directly, the grid works. I think this is probably due to the delay in receiving data with $ http. But according to the angular concept, the grid should be updated when data arrives. Is there any solution to display an html page only when the data comes from the server.
Below is my javascript file 'fileBrowser.js':
var fileBrowserModule = angular.module('fileBrowser', ['agGrid']); fileBrowserModule.controller('fileBrowserController', function($scope, $http) { $scope.rowData=[ ]; $http.get("http://localhost:8080/KKR/flow/sin/allSins.json") .success(function(data) { $scope.rowData=JSON.parse("["+JSON.stringify(data)+"]"); console.log($scope.rowData); }); /* $scope.rowData=[ {"group":true,"data":{"name":"joe"}, "children":[ {"group":true,"data":{"name":"pat"}, "children":[{"group":true, "data":{"name":"maya"}, "children":[{"group":false, "data":{"name":"brook"}, "children":[]},{"group":true, "data":{"name":"kery"}, "children":[{"group":false, "data":{"name":"santosh"}, "children":[]}]}]}]}, {"group":false, "data":{"name":"aravind"},"children":[]}]} ] */ var columnDefs = [ {headerName: "Name", field: "name", width: 250, cellRenderer: { renderer: 'group', innerRenderer: innerCellRenderer }}, {headerName: "Size", field: "size", width: 70, cellStyle: sizeCellStyle}, {headerName: "Type", field: "type", width: 150}, {headerName: "Date Modified", field: "dateModified", width: 150} ]; $scope.gridOptions = { columnDefs: columnDefs, rowData: $scope.rowData, rowSelection: 'multiple', rowsAlreadyGrouped: true, enableColResize: true, enableSorting: true, rowHeight: 20, icons: { groupExpanded: '<i class="fa fa-minus-square-o"/>', groupContracted: '<i class="fa fa-plus-square-o"/>' }, onRowClicked: rowClicked }; $scope.selectedFile = 'Select a file below...'; function rowClicked(params) { var node = params.node; var path = node.data.name; while (node.parent) { node = node.parent; path = node.data.name + '\\' + path; } $scope.selectedFile = path; } function sizeCellStyle() { return {'text-align': 'right'}; } function innerCellRenderer(params) { var image; if (params.node.group) { image = params.node.level === 0 ? 'disk' : 'folder'; } else { image = 'file'; } var imageFullUrl = '/example-file-browser/' + image + '.png'; return '<img src="'+imageFullUrl+'" style="padding-left: 4px;" /> ' + params.data.name; } });
Below is my html file:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css"> <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"> <link href="styles/angular/fileBrowser.css" rel="stylesheet"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script> <script src=" https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script> <script src="scripts/angular/ag-grid.js?ignore=notused10"></script> <link rel="stylesheet" type="text/css" href="styles/angular/ag-grid.css?ignore=notused10"> <link rel="stylesheet" type="text/css" href="styles/angular/theme-fresh.css?ignore=notused10"> <script src="scripts/angular/fileBrowser.js"></script> </head> <body ng-app="fileBrowser"> <div ng-controller="fileBrowserController" style="border: 1px solid darkgrey; width: 600px; background-color: lightgrey; border-radius: 5px; padding: 3px;"> <div style="border: 1px solid darkgrey; margin-bottom: 2px; background-color: white;"> {{selectedFile}}</div> <div style="width: 100%; height: 400px;" ag-grid="gridOptions" class="ag-file-browser"> </div> </div> </body> </html>