How to load dynamic column and rows by Using ag-grid?

Question

Html Code :

 <div class="panel-body" style="padding-bottom:0px">
     <div id="myGrid" ag-grid="gridOptions" class="ag-fresh" style="height: 100%;"></div>
</div>

Angular Code :

var sqdtApp = angular.module("sqdtApp", ['ngTouch',
        'ui.grid', 'ui.grid.pagination', 'ui.grid.resizeColumns',
        'angularUtils.directives.dirPagination', 'ngAnimate', 'ui.bootstrap', 'agGrid']);
sqdtApp.controller(
                    'importedtableCtrl',
                    function ($http, $scope, $stateParams,$rootScope, $httpParamSerializer, uiGridConstants) {
                        $scope.dbtype = $stateParams.dbname;
                    $scope.columns = [];


                    $scope.gridOptions = {
                        columnDefs: [],
                        enableFilter: true,
                        rowData: [],
                        rowSelection: 'multiple',
                        rowDeselection: true
                    };
                    $scope.customColumns = [];

                    $http.post($scope.url + "/importedtablesCount", { 'dbname': $stateParams.dbname })
                                .success(
                                        function (result) {
                                            $scope.importedTableCount = result;
                                        });


                    var gridtablename = "";
                    $scope.currentImportedTableName = '';


                    $scope.loadTableInGrid = function (tablename) {
                        $scope.currentImportedTableName = tablename;
                        if (gridtablename != tablename) {
                            $scope.reset();
                            gridpageno = 1;
                            $http.post($scope.url + "/getPagingRecordImportedTable", { 'dbname': $stateParams.dbname, 'tableName': tablename, 'pageNumber': 1 }).success(
                                function (response) {
                                    $scope.names = response.records;
                                    $scope.mdata = response.metadata;
                                    //  $scope.gridOptions.data = response.records;
                                    var columnsize = 0;

                                    console.log($scope.customColumns);
                                    for (var obj in $scope.mdata) {
                                        if ($scope.mdata[obj]['columnsize'] > 20) {
                                            columnsize = 20;
                                        } else {
                                            columnsize = $scope.mdata[obj]['columnsize'];
                                        }
                                        $scope.customColumns.push({
                                            headerName: $scope.mdata[obj]['columnname'],
                                            field: $scope.mdata[obj]['columnname'],
                                            headerClass: 'grid-halign-left'

                                        });

                                        }

                                    $scope.gridOptions.columnDefs = $scope.customColumns;
                                    $scope.gridOptions.rowData = $scope.names;





                                    gridtablename = tablename;
                                    gridpageno = 1;



                                    $scope.getTotalNoOfRecordCountForGrid(tablename);
                                }).error(function (data) {
                                    alert(data);
                                });
                        } else {
                            $scope.reset();
                            $scope.resetGridTableName();
                            }
                        };
});

Output No Rows to Show
no rows to show is output

but if i check in $scope.gridoptions object all the rows and column are there.

$scope.gridOptions object in console with data

but it not rendering in page. help me out.

Answer 1

$scope.gridOptions.columnDefs = $scope.customColumns;
$scope.gridOptions.rowData = $scope.names;

Those are very likely the culprits : columnsDefs and rowData are only for grid initialisation before the ready event.

Use gridOptions.api.setColumnDefs and gridOptions.api.setRowData to interact with the grid once it's initialized

Documentation : https://www.ag-grid.com/angular-grid-api/index.php