is there any way to align the cell text values to centre/right? Thank you.
Here is a plnkr basic example.
Add a comment
|
2 Answers
As per oblivion19's comment, here is an example solution (with a little more context) by setting the cellClass property of a columnDefs object in gridOptions:
HTML:
<div ng-grid="gridOptions"></div>
JS:
$scope.someData = [{ "name": "MB", "age": 20 }, { "name": "KY", "age": 22 }];
$scope.gridOptions = {
data: 'someData',
columnDefs: [{
field: 'name',
displayName: 'Name',
cellClass: 'grid-align'
}, {
field: 'age',
displayName: 'Age'
}]
};
CSS:
.grid-align {
text-align: center;
}
Note that this solution only makes some columns centered (i.e., the ones with cellClass specified). To make all columns centered, simply add class="grid-align" to the ng-grid div instead.
1 Comment
Tejasvi Hegde
Much easier than templating just for alignment and powerful too
Yes there is. You want to use the row or cell template. It is defined on the columnDefs in the controller where you set up the ng-grid.
columnDefs: [{field: 'name', displayName: 'Name'},
{field:'age', displayName:'Age', cellTemplate: '<div ng-class="{green: row.getProperty(col.field) > 30}"><div style="text-align:center;" class="ngCellText">{{row.getProperty(col.field)}}</div></div>'}]
};
I have an update Plunker below that has the columns aligned to the center.
2 Comments
oblivion19
Thanks for your help mate. I found that I could add cellClass to the column, and style that class with text-align. But your method works as well. Cheers!
Trevor de Koekkoek
I really think oblivion's answer is the best solution here. No need to have a template just to set display properties.