Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

AngularJS ngGrid text alignment

is there any way to align the cell text values to centre/right? Thank you.

Here is a plnkr basic example.

like image 734
oblivion19 Avatar asked Jul 23 '13 08:07

oblivion19


People also ask

How do you right align in Ag grid?

If any cell in ag-grid has numeric value like decimal, int or numeric i want that cell to be right aligned. this. defaultColumnDefs = { width: 75, exportColumn: true, type: 'numericColumn', cellClass(params) { return params. colDef.

How do I center my header on Ag grid?

Assign a class to the cell as below: gridOptions = { ... columnDefs: [ ... { headerName: "field1", field: "field1", cellClass: "grid-cell-centered"} ... ] }

How do you change the column width on Ag grid?

Just like Excel, each column can be 'auto resized' by double clicking the right side of the header rather than dragging it. When you do this, the grid will work out the best width to fit the contents of the cells in the column.

How do I add a checkbox to Ag grid?

To configure the column to have a checkbox, set colDef. headerCheckboxSelection=true . headerCheckboxSelection can also be a function, if you want the checkbox to appear sometimes (e.g. if the column is ordered first in the grid).


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.

like image 63
bunting Avatar answered Sep 16 '22 22:09

bunting


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.

Plunker

like image 39
Aaron Hickman Avatar answered Sep 16 '22 22:09

Aaron Hickman