我对我的Angular
application...namely有一个简单的要求,在展开或折叠一行时添加一个css类,以便突出显示所述行。我试过根据文档https://www.ag-grid.com/javascript-grid-row-styles/#gsc.tab=0使用gridOptions.getRowClass
,但似乎没有效果。
我的html
我添加了一个事件处理程序,它将在行展开/折叠时触发一个方法。我的html
如下所示:
<ag-grid-angular #agGrid style="width: 100%; height:85vh" class="ag-material grid-Holdings"
[gridOptions]="gridOptions"
[rowData]="rowData"
...
(rowGroupOpened)="addRowClass($event)">
</ag-grid-angular>
...and在我的grid.component.ts中,我有一个添加/删除css类的方法:
addRowClass(params) {
this.gridOptions.getRowClass = (params) => {
if (params.node.expanded) {
return 'my-css-class';
}
}
}
有趣的是,当我在Chrome dev控制台中添加断点时,我发现它永远不会执行return 'my-css-class'
,但我在官方文档中找不到任何关于原因的信息。总的来说,我真的在为ag-Grid
而苦苦挣扎,尤其是Angular
与ag-Grid
的集成。如果这不起作用,最好用普通的JS来做这件事……如果是这样的话,没有ag-Grid
应用程序接口,我该怎么做呢?
发布于 2017-11-15 06:25:22
ag-grid
已经为你切换了一些css类:ag-row-group-expanded
(展开时)和ag-row-group-contracted
(未展开时)。您应该能够通过将必要的样式应用于这些类来实现您的目标。
https://stackoverflow.com/questions/47296092
复制相似问题