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 ing from below line...

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

Thanks

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 ing from below line...

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

Thanks

• javascript
• angularjs
• ng-grid

• can you post HTML part? – Maxim Shoustin Commented Oct 28, 2013 at 8:44
• yes sure, <div class="gridStyle" ng-grid="gridOptions"></div> – freedom Commented Oct 28, 2013 at 8:54
• its not your HTML but one row. Edit your post and add Full HTML. Thanks – Maxim Shoustin Commented Oct 28, 2013 at 9:13

4 Answers 4

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  
};  

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

Something like this

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

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;          
    };