|
App.component.html
<ejs-grid #grid [dataSource]='data' [allowPaging]='true' [allowGrouping]='true'
[groupSettings]='groupOptions' (dataBound)="dataBound($event)">
<e-columns>
------------
</e-columns>
</ejs-grid>
<style>
// level 1 grouped row
.customclass_0{
background : lightgreen;
}
// level 2 grouped row
.customclass_1{
background : yellow;
}
// level 3 grouped row
.customclass_2{
background : lightblue;
}
// add the custom class as you need
.customclass_3{
----
}
------
</style>
App.component.ts
export class AppComponent implements OnInit {
@ViewChild('grid',{static:true}) public grid: GridComponent;
public data: object[];
public groupOptions: GroupSettingsModel;
ngOnInit(): void {
this.data = hierarchyOrderdata;
this.groupOptions = { columns: ['OrderID','CustomerID', 'ShipCity'] };
}
dataBound(args) {
var grid = document.getElementsByClassName('e-grid')[0].ej2_instances[0];
// get the grouped columns
var groupcol = grid.groupModule.groupSettings.columns;
//get the rows
var rows = grid.getRows();
var grouprows = grid.element.getElementsByClassName("e-recordplusexpand ")
for (var i = 0; i < rows.length; i++) {
for (var j = 0; j < groupcol.length; j++) {
// dynamically adding a custom class up to the grouped columns length
rows[i].getElementsByClassName("e-indentcell")[j].classList.add("customclass" + "_" + j);
// j refers the grouped columns length
}
}
for (var i = 0; i < grouprows.length; i++) {
for (var j = 0; j < groupcol.length; j++) {
if (grouprows[i].closest('tr').getElementsByClassName("e-indentcell").length == j) {
// dynamically adding a custom class up to the grouped columns length
grouprows[i].classList.add("customclass" + "_" + j);
var cells = grouprows[i].closest('tr').children
for (var k = 0; k < cells.length; k++) {
if (!cells[k].classList.contains('e-indentcell')) {
// dynamically adding a custom class up to the grouped columns length
cells[k].classList.add("customclass" + "_" + j)
}
}
var groupindent = grouprows[i].closest('tr').getElementsByClassName("e-indentcell");
for (var k = 0; k < groupindent.length; k++) {
// dynamically adding a custom class up to the grouped columns length
groupindent[k].classList.add("customclass" + "_" + k)
}
}
}
}
}
}
| 
