setting individual column definitions in angulars ui-grid

Question

Let's say I have the following data:

let data = [
  {name: 'bob', bornOn: 1510174615339},
  {name: 'mary', bornOn: 1510164615339}
]

If I pass this into a ui-grid i'll get 2 columns. In order to parse the epoch time to a human readable format. I need to do something like this:

$scope.gridOptions.columnDefs = [
  {name: 'Name', field: 'name'},
  {name: 'Born On', field: 'bornOn', cellFilter: 'date:"yyyy-MM-dd\"'}
]

I would like to be able to do something like this instead:

$scope.gridOptions.columnDefs = [
  {name: 'Born On', field: 'bornOn', cellFilter: 'date:"yyyy-MM-dd\"'}
]

But then I lose the name field.

If I don't supply any column definitions I get every property back.

This is a bit contrived but in my actual project, I'm having to fetch objects with different properties but I don't want to manually set those different properties in their own column definitions. I just want to assign specific custom fields like the epoch times, but as soon as I set those column definitions the defaults don't get into the grid.

Is there a way to only customize a single column's columnDef but allow ui grid to default the rest of the property columns.

Marco · Accepted Answer · 2017-11-09 16:36:08Z

1

By default, if columnDefs array is empty, ui-grid generate columnDefs from data with this function:

 /**
   * @ngdoc function
   * @name buildColumnDefsFromData
   * @methodOf ui.grid.class:Grid
   * @description Populates columnDefs from the provided data
   * @param {function(colDef, col, gridOptions)} rowBuilder function to be called
   */
  Grid.prototype.buildColumnDefsFromData = function (dataRows){
    this.options.columnDefs =  gridUtil.getColumnsFromData(dataRows, this.options.excludeProperties);
  }

You can use gridUtil.getColumnsFromDataand customize a single column's in the array before you assigne it to gridOptions.columnDefs or you can modify columnDefs in $timeout function

$timeout(function(){
 console.log($scope.gridOptions.columnDefs);
});

answered Nov 9, 2017 at 16:36

Marco

7613 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

setting individual column definitions in angulars ui-grid

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related