My task involves allowing the user to click on a table name which will then render the corresponding data in ag-grid.
I am currently using AngularJS 1.x and have tried various methods to achieve this.
$scope.gridOptions = {};
$scope.loadTableInGrid = function (tablename) {
$http.post($scope.url + "/getPagingRecordImportedTable", { 'dbname': $stateParams.dbname, 'tableName': tablename, 'pageNumber': 1 }).success(
function (response) {
$scope.names = response.records;
$scope.mdata = response.metadata;
console.log(response.records);
console.log(response.metadata);
var columnsize = 0;
for (var obj in $scope.mdata) {
if ($scope.mdata[obj]['columnsize'] > 20) {
columnsize = 20;
} else {
columnsize = $scope.mdata[obj]['columnsize'];
}
$scope.columnDefs.push({
"headerName": $scope.mdata[obj]['columnname'],
"field": $scope.mdata[obj]['columnname']
});
}
var gridDiv = document.querySelector('#myGrid');
alert(gridDiv);
new agGrid.Grid(gridDiv, $scope.gridOptions);
$scope.gridOptions.api.setColumnDefs( $scope.columnDefs);
$scope.gridOptions.api.setRowData(response.records);
$scope.gridOptions.api.refreshView();
console.log("-----------Data received");
}).error(function (data) {
alert(data);
});
} else {
$scope.reset();
$scope.resetGridTableName();
}
console.log(tablename);
};
Based on the table name provided, I need to dynamically load both columns and records in the grid. However, it consistently displays "loading" without rendering any data.
If you have any examples or suggestions for improving my code, please share them with me.