[英]Ag-grid + Angular 2: Dynamically change cellClass of a column in row node
I have a requirement where I need to update the background color of cells if the value of a column is different two adjacent rows. 如果某列的值与相邻的两行不同,则需要更新单元格的背景色。 Also, I want to be able to do this for some columns only of the grid and not all the columns. 另外,我希望能够仅对网格的某些列而不是对所有列执行此操作。 (Refer Image) (参考图片)
What I did is: 我所做的是:
If the values are different, I update the cellClass property of that particular column in the node. 如果值不同,则更新节点中该特定列的cellClass属性。
this.gridApi.forEachNode(function (node) { if (node.rowIndex + 1 < currDetailGridData.length) { if (node.data['ColumnKey'] != currDetailGridData[node.rowIndex + 1]['ColumnKey']) { var nodeToHighlight = node.columnController.gridColumns.find(x => x.colId = 'ColumnKey'); nodeToHighlight.colDef.cellClass += 'bgColorRed'; } } });
However, this doesn't seem to be working. 但是,这似乎不起作用。 Need your help on identifying, what wrong am I doing here? 需要您的帮助来识别,我在这里做什么错?
Might be you are executing it exactly after rowData
binding inside onGridReady
. 可能是您正好在onGridReady
rowData
绑定之后执行它。 If so, grid
need to finalize the data-rendering process, so you can use the hack for it wrapping method in setTimeout
, but I do not recommend to use this case. 如果是这样, grid
需要完成数据呈现过程,因此可以在setTimeout
使用hack进行包装方法, 但是我不建议使用这种情况。
setTimeout(() => {
this.gridApi.forEachNode(node =>{
...
})
}, 100);
Another way is to prepare columnDef
first, and then use setColumnDefs
API method to inform the grid
, to avoid a loop check. 另一种方法是先准备columnDef
,然后使用setColumnDefs
API方法通setColumnDefs
grid
, 以避免循环检查。
And the last one, I recommend using cellClass
binding as function
in columnDef
最后一个, 我建议使用cellClass
绑定作为columnDef
function
cellClass: this.handleCellClass.bind(this)
...
handleCellClass(params){
if (params.node.rowIndex + 1 < this.rowData.length) {
if (params.node.data['...'] != this.rowData[params.node.rowIndex + 1]['...'])
return 'bgColorRed';
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.