CODEWITHSUNDEEP
javascriptangularjsng-grid
freedom
freedom

Reputation: 225

dynamic columnDef in ng-Grid

I want to assign ng-grid columns name dynamically after value returned from database, but issue is that it get initialized before data return from ajax, and i am not able to recall gridOption so it showing balnk, so please help me that how can we construct a column name by ajax return value. 

$scope.gridOptions =
        {
            data: 'data.Values',
            columnDefs:
            [
                    { field: "ID", displayName: "Record Id" },
                    { field: "Value", displayName: $scope.ColumnName, cellFilter: cellfilterType },                       
        ],

        };

where $scope.ColumnName coming from below line...

 RecordService.getRecords().then(function (data) {  
  $scope.ColumnName=  data.something;
 }

Thanks

Upvotes: 3

Views: 18276

Answers (4)

freedom
freedom

Reputation: 225

Thanks Max for your help, I have done this with of help columnDef as below:

Step 1: 

$scope.colDef = [];

Step 2: 

RecordService.getRecords().then(function (data){      
    $scope.colDef=["ColumnName":data.something]    
}

Step 3: 

$scope.gridOptions = {   
    data: 'data.UdiValues',  
    columnDefs:'colDef',            
    filterOptions: $scope.filterOptions  
};

Upvotes: 9

Eassa Nassar
Eassa Nassar

Reputation: 1210

i have done something like this :- 

self.gridOptions.columnDefs = columnDefs(colDef,displayNames);

columnDef is :- 

var columnDefs = function(data,cd){
        var colDef= [];
        var mi = null;
        var colByOrder = sortedByOrder(data); 
        for(var i=0 ; i < colByOrder.length ; i++){
            colDef.push({
                width: width,
                field: String(colByOrder[i][1].position),
                menuItems: menuItems(this),
                displayName: cd[colByOrder[i][1].position],
                enableSorting: false,
                type: 'string',

            });
        }
        return colDef;          
    };

Upvotes: 0

chaity
chaity

Reputation: 155

Something like this

Return json, play around, use GET mapping to strings etc?

Upvotes: 0

Maxim Shoustin
Maxim Shoustin

Reputation: 77904

Try to set first "default" value and after change it with promise

$scope.gridOptions =
        {
            data: 'data.Values',
            columnDefs:
            [
                    {  
                     field: "ID",
                     displayName: "Record Id"
                    },
                    { field: "Value",
                      displayName: "default",
                      cellFilter: cellfilterType
                    },                       
        ]    
        };

And now:

RecordService.getRecords().then(function (data) {  
  $scope.gridOptions.columnDefs[1].displayName =  data.something;
 }

The Service RecordService returns promise therefore we create promise factory like:

.factory('RecordService', ['$resource','$q',  function($resource, $q) {
    var data =   {  something: "from service" } ; 

       var factory = {
            getRecords: function (selectedSubject) {
                var deferred = $q.defer();            
               deferred.resolve(data);
                return deferred.promise;
            }
        }
        return factory;
}]);

Demo Fiddle

Upvotes: 1

Related Questions