Style a single cell using ng-grid with Angular 6

Question

I am trying to access a single cell on an ag-grid using Angular 6. The html looks like this:

 <ag-grid-angular 
 style="width: 700px; height: 200px;" 
 class="ag-theme-balham"
 [rowData]="rowData" 
 [columnDefs]="columnDefs"
 rowSelection="single"
 colDef.editable=true
 (gridReady)="onGridReady($event)"
 >
 </ag-grid-angular>

the typescript class is:

 ngOnInit( ) {

  }
  onGridReady(params){
    this.gridApi = params.api
    this.columnApi =  params.columnApi
  }
  updateRow(){
    var rowNode = this.gridApi.getRowNode(0);
    rowNode.setData(
      { make: 'changed', model: 'changed', price: 10 },
    )

  }
  updateCell(){
    var rowNode = this.gridApi.getRowNode(0);
    this.gridApi.getRowNode(0)
    rowNode.setDataValue("model","mobile")
  }
  addColumn(){
    var rowNode = this.gridApi.getRowNode(0);
    var x = parseInt(rowNode.data.price)
    var rowNode = this.gridApi.getRowNode(1);
    var y = parseInt(rowNode.data.price)
    var rowNode = this.gridApi.getRowNode(2);
    var z = parseInt(rowNode.data.price)
   console.log("price", x ,y, z)
   this.total = x+y+z


  }

  columnDefs = [
   // use this for the whole column   {headerName: 'Make', field: 'make',cellStyle: {  'border-bottom': '3px double'} },
   {headerName: 'Make', field: 'make',cellStyle: {
    // you can use either came case or dashes, the grid converts to whats needed
    backgroundColor: '#aaffaa' // light green
}},
    {headerName: 'Model', field: 'model'},
    {headerName: 'Price', field: 'price', editable: true},
    {headerName: '', field: '', editable: true}
];

rowData = [
    { make: 'Toyota', model: 'Celica', price: 35000, cellClass: "col-1" },
    { make: 'Ford', model: 'Mondeo', price: 32000 },
    { make: 'Porsche', model: 'Boxter', price: 72000 }
];

i can target a column using cellstyle but i only want to add borders to each cell. Is it possible to target a cell like i have done using:

var rowNode = this.gridApi.getRowNode(1);

and add a style to the rowNode or is there another way to achieve this?

score 1 · Answer 1 · answered Oct 10 '18 at 13:05

1

According to the documentation you should be able to apply styles to an individual cell by passing the param as below or you can use cellClassRules.

  columnDefs = [
   // use this for the whole column   {headerName: 'Make', field: 'make',cellStyle: {  'border-bottom': '3px double'} },
   {headerName: 'Make', field: 'make',cellStyle:function(params) {
    // you can use either came case or dashes, the grid converts to whats needed
//Style the specific cell with one class and the whole column with another
return (params.colDef===1?'my-class-1':'my-class-2');
}},
    {headerName: 'Model', field: 'model'},
    {headerName: 'Price', field: 'price', editable: true},
    {headerName: '', field: '', editable: true}
];

answered Oct 10 '18 at 13:05

Ronald91

1,736
1
15
23

I have tried the function but there is no change. does the function need the params to be passed? – Dwayne Patel Oct 10 '18 at 14:18
when i print the params.colDef i get params colDef {headerName: "Model", field: "model", cellStyle: ƒ} cellStyle: ƒ (params) field: "model" headerName: "Model" __proto__: Object – Dwayne Patel Oct 10 '18 at 14:34
1

Any of these methods should be helpful https://www.ag-grid.com/javascript-grid-cell-styles/ – Alberto Gutierrez Oct 12 '18 at 14:04

score 1 · Answer 2 · answered Oct 10 '18 at 15:53

1

i found that if i use this

{headerName: 'Model', field: 'model',cellClass:function(params) {
  console.log("params ", params);
  console.log("params value", params.value);
  console.log("params colDef", params.node.rowIndex);
  // you can use either came case or dashes, the grid converts to whats needed
//Style the specific cell with one class and the whole column with another
return (params.node.rowIndex===1?'my-class-1':'my-class-2')}},

and you need to place the css in styles.css as its not working in the components css file. I can target the individual cell.

answered Oct 10 '18 at 15:53

Dwayne Patel

315
2
13

it will work in `component.css` once you will add the [encapsulation](https://stackoverflow.com/questions/52665616/grid-styling-overwrite-style-of-ag-grid) – un.spike Oct 10 '18 at 18:09
Any of these methods should be helpful ag-grid.com/javascript-grid-cell-styles – Alberto Gutierrez Oct 12 '18 at 14:05

score 0 · Answer 3 · answered Oct 10 '18 at 12:57

0

If you just want to add the border on each cell then you can just simple css solution for this -

.ag-cell {
    border: solid 1px blue !important;
}

If you want to add the border for selected cell only then you can use -

 .ag-cell-focus {
        border: solid 1px blue !important;
    }

answered Oct 10 '18 at 12:57

Sunil Singh

11,001
2
27
48

I would suggest to better use ag-grid built-in mecahnisms, have a look at this Any of these methods should be helpful ag-grid.com/javascript-grid-cell-styles – Alberto Gutierrez Oct 12 '18 at 14:05

Style a single cell using ng-grid with Angular 6

3 Answers3