how to display with parentheses in ui-grid headers?

Question

I have an array of object to display in ui-grid like this.

JS

var arr = [{
    'Reference': 1,
    'Nominal load (daN)': 'xx',
    'Nominal static deflection (mm)': 'yy'
}, {
    'Reference': 2,
    'Nominal load (daN)': 'xx1',
    'Nominal static deflection (mm)': 'yy1'
}, {
    'Reference': 3,
    'Nominal load (daN)': 'xx2',
    'Nominal static deflection (mm)': 'yy2'
}];

$scope.gridOptions= arr;

HTML

 <div ui-grid=" {data: gridOptions}" class="grid"> </div>

but my ui-grid does not display second and third columns because of parentheses ( 'Nominal load (daN)' and 'Nominal static deflection (mm)' ) in headers

score 1 · Accepted Answer · answered Jul 22 '16 at 20:53

You could do something like this so that the "field" property maps to the property from the object that is to be mapped, and "displayName" can be used to provide custom name :

javascript:

 $scope.gridOptions = {
      columnDefs: [
        { field: 'Reference'
        },
        { field: 'Nominal load (daN)',
          displayName: 'Nominal load (daN)'
        },
        { field: 'Nominal static deflection (mm)',
          displayName: 'Nominal static deflection (mm)'
        }
       ],
      data: arr
   };

HTML:

<div ui-grid="gridOptions" class="grid"></div>

I tried this before but it doesn't work. But I did it finally. i'll post my solution below. — Imoum, Jul 27 '16 at 08:38

score 0 · Answer 2 · answered Jul 27 '16 at 08:43

I just called 'columnDefs' and 'data' in HTML and then i tried to fill it in JS.

HTML

<div ui-grid=" {data: gridOptions, columnDefs: gridColumns, enableColumnMenus: false}" ui-grid-pagination class="grid"> </div>

JS

$scope.setColumnDefs = function() {

      var columnDefs = [{
        field: 'ref',
        displayName: 'Référence'
      }, {
        field: 'charge',
        displayName: 'Charge nominale (daN)'
      }, {
        field: 'fleche',
        displayName: 'Flèche sous charge nominale (mm)'
      }];

    $scope.gridColumns = columnDefs;
  };
$scope.setColumnDefs();
$scope.gridOptions = data;

how to display with parentheses in ui-grid headers?

2 Answers2