Angularjs Dynamic Angular UI Grid Columns

Question

Angularjs ui-grid how to column define dynamically. In my code, I defined columnDefs is null and set columns after button click and set data to grid. But columns not rendering on browser. how to render or reload grid with this situation. Any solution will be helpful to my problem.

I hope this makes sense. any suggestions are welcome.

  //  I defined grid first
 
    $scope.gridOptions = {
    enableColumnResizing: true,
    enableSorting: true,
    enableFiltering: true,
    showGridFooter: true,
    paginationPageSize: 50,
    paginationPageSizes: [50, 100, 150, 200, 250],
    enableHorizontalScrollbar: 1,
    columnDefs: [],
    exporterPdfDefaultStyle: { fontSize: 9 },
    exporterPdfTableStyle: { margin: [30, 30, 30, 30] },
    exporterPdfTableHeaderStyle: { fontSize: 10, bold: true, italics: true, color: 'red' },
    exporterPdfHeader: { text: "Tüm Liste", style: 'headerStyle' },
    exporterPdfFooter: function (currentPage, pageCount) {
        return { text: currentPage.toString() + ' of ' + pageCount.toString(), style: 'footerStyle' };
    },
    exporterPdfCustomFormatter: function (docDefinition) {
        docDefinition.styles.headerStyle = { fontSize: 22, bold: true };
        docDefinition.styles.footerStyle = { fontSize: 10, bold: true };
        return docDefinition;
    },
    onRegisterApi: function (gridApi) {
        $scope.gridApi = gridApi;
    }
}
//and ng-click set column grid and set data to grid
//but grid is not rendering

    $scope.getTable = function () {
    $scope.columns = {'name','surname','id'};
    $scope.gridOptions.columnDefs = new Array();
                $scope.columns.forEach(function (item) {
                    $scope.gridOptions.columnDefs.push({
                        name: item,
                        field: item,
                        headerCellClass: 'tablesorter-header-inner'
                    })
                });

    $http({
        method: 'POST',
        url: '/report/getData',
        data: {
            vars: $scope.vars
        }
    }).success(function (data, status) {
  
        switch (status) {
            case 200:    
                            
               $scope.gridOptions.data = $.parseJSON(data);                        
                break;
            case 204:
                location.replace('/Error/Error?errorMessage=Error!&errorCode=' + status);
                break;
            default:
                console.log("default");
                //  location.replace('/Error/Error?errorMessage=Message!&errorCode=' + status);
                break;
        }
    }).error(function (data, status) {          
        location.replace('/Error/Error?errorMessage=problem!&errorCode=' + status);
    });  }

Answer 1

This is about ng-show ui-grid not rendering after ng-show true beacuse of

First set ng-show visible

And set data

Last step run below code:

 $scope.gridApi.core.handleWindowResize();

                $scope.gridApi.core.refresh();
                $scope.gridApi.core.refreshRows();
                $scope.gridApi.grid.refresh();
                $scope.gridApi.grid.refreshRows();
                $scope.gridApi.grid.updateCanvasHeight();
                $scope.gridApi.core.notifyDataChange(uiGridConstants.dataChange.COLUMN);
                $scope.gridApi.core.notifyDataChange(uiGridConstants.dataChange.OPTIONS);