angularjs UI grid - display columns dynamically

Question

I have a stored procedure that returns the first 4 columns(LineNumber, AttributeName, Source, MIC) along with the other columns that are dynamic. Dynamic meaning it can range from 150 to 1. Here in the screenshot example I have columns 40 to 29.

I was able to bring the data from back end to the controller and I was also able to display the the first 4 columns fine. But I need help to loop through the rest of the columns (For example in the screenshot the columns from 40 to 29. These columns are dynamic). THanks in advance.

    $scope.gridOptionsVatMakeRpt = {
    enableFullRowSelection: true,
    enableRowHeaderSelection: false,
    paginationPageSizes: [20, 40, 60],
    paginationPageSize: 40,
    rowHeight: 53,
    enableFiltering: true,
    enableCellEdit: false,
    enableGridMenu: false,
    rowTemplate:
        '<div ng-class="{ \'grey\':grid.appScope.rowFormatter( row ) }">' +
        '  <div ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.colDef.name" class="ui-grid-cell" ng-class="{ \'ui-grid-row-header-cell\': col.isRowHeader }"  ui-grid-cell></div>' +
        '</div>',
    columnDefs:  [
        {
            field: 'LineNumber', grouping: {
                groupPriority: 0
            },
            width: '10%', visible: true
        }
        , {
            field: 'AttributeName', grouping: {
                groupPriority: 1
            },
            width: '10%', visible: true
        }

        , { field: 'Source', width: '10%', visible: true }
        , { field: 'MIC', width: '10%', visible: true }
   }

    $scope.loadgridVatMakeRpt = function () {

    $scope.loading = true;

    console.log('loading grid');


        LRWService.getVatMakeRpt('1', '1221209', '100000028', '2020-05-08', '2020-05-08').success(function (data) {
        if (data === null || data.VatMakeRptList === null || data.VatMakeRptList.length === 0) {

            $scope.error = true;
            $scope.errorDescription = "No data found for selected criteria.";
        } else {
            $scope.gridOptionsVatMakeRpt.paginationPageSizes.push(
                data.VatMakeRptList.length
            );
            var VatMakeRptList = data.VatMakeRptList;
            $scope.gridOptionsVatMakeRpt.data = VatMakeRptList;
            $scope.renderfields();
            console.log(VatMakeRptList);
            $scope.error = false;
        }

    }).finally(function () { $scope.loading = false; });

};

Answer 1

You can create columns dynamically inside the function loadgridVatMakeRpt eg. you as per your information you can iterate through the number of columns, post fixed set of columns and add one dynamic column for each iteration till the last entry.

Also find below documentation link for further dynamic behaviour if needed

Just note that, column should have field to which it should map to.

$scope.gridOptionsVatMakeRpt = {
    enableFullRowSelection: true,
    enableRowHeaderSelection: false,
    paginationPageSizes: [20, 40, 60],
    paginationPageSize: 40,
    rowHeight: 53,
    enableFiltering: true,
    enableCellEdit: false,
    enableGridMenu: false,
    rowTemplate:
        '<div ng-class="{ \'grey\':grid.appScope.rowFormatter( row ) }">' +
        '  <div ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.colDef.name" class="ui-grid-cell" ng-class="{ \'ui-grid-row-header-cell\': col.isRowHeader }"  ui-grid-cell></div>' +
        '</div>',
    columnDefs:  [
        {
            field: 'LineNumber', grouping: {
                groupPriority: 0
            },
            width: '10%', visible: true
        }
        , {
            field: 'AttributeName', grouping: {
                groupPriority: 1
            },
            width: '10%', visible: true
        }

        , { field: 'Source', width: '10%', visible: true }
        , { field: 'MIC', width: '10%', visible: true }
   }

    $scope.loadgridVatMakeRpt = function () {

    $scope.loading = true;

    console.log('loading grid');


        LRWService.getVatMakeRpt('1', '1221209', '100000028', '2020-05-08', '2020-05-08').success(function (data) {
        if (data === null || data.VatMakeRptList === null || data.VatMakeRptList.length === 0) {

            $scope.error = true;
            $scope.errorDescription = "No data found for selected criteria.";
        } else {
            $scope.gridOptionsVatMakeRpt.paginationPageSizes.push(
                data.VatMakeRptList.length
            );
            var VatMakeRptList = data.VatMakeRptList;
            

            var keysArray = [];
            keysArray = Object.keys(VatMakeRptList[0]);
             
            for (var i = 4;i<keysArray.length;i++) {
              $scope.gridOptionsVatMakeRpt.columnDefs.push({ name: keysArray[i], field: keysArray[i],width: <dynamic/fixed width>, visible: true});
            }

            $scope.gridOptionsVatMakeRpt.data = VatMakeRptList;
            $scope.renderfields();
            console.log(VatMakeRptList);
            $scope.error = false;
        }

    }).finally(function () { $scope.loading = false; });
};