I am currently facing a challenge with my angular UI Grid setup for populating data in reports. With almost 20 reports to handle, I am looking to streamline the process by using one UI Grid for all of them. To achieve this, I am attempting to dynamically configure the columnDefs property at runtime by iterating through the properties of an object.
CrudService.GetData($scope.studyId, reportsTest).then(function (data) {
$scope.getreportsdata = data;
$scope.columns = [];
for (var key in $scope.getreportsdata[0]) {
if ($scope.getreportsdata[0].hasOwnProperty(key)) {
if (!utilityExtensionService.isUndefinedOrNull($scope.getreportsdata[0][key]) && $scope.getreportsdata[0][key] != "")
$scope.columns.push({ field: key, enableSorting: false, headerCellClass: 'ui-grid-header' });
}
}
});
This is how I am trying to set up my UI Grid:
$scope.gridOptions = {
enableHorizontalScrollbar: 0,
enableVerticalScrollbar: 0,
enableSorting: true,
columnDefs: 'columns',
data: 'getreportsdata'}
Unfortunately, I have not been successful in binding using this approach. Any recommendations or alternative solutions would be greatly appreciated.