We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
|
@Component({
selector: 'control-content',
templateUrl: 'default.html',
styles: [`
.background-green{
background-color: green;
}
.background-yellow {
background-color: yellow;
}
.background-red{
background-color: red;
}
`]
})
export class DefaultComponent implements OnInit {
.....
customiseCell(args: any) {
if (args.column.field === 'Value') {
if (args.data['Status'] === 0) {
args.cell.classList.add('background-green');
} else if (args.data['Status'] === 1) {
args.cell.classList.add('background-yellow');
} else {
args.cell.classList.add('background-red');
}
}
}
}
|
|
App.component.html
<ejs-grid #Grid id='Grid' [dataSource]='parentData' (queryCellInfo)='customiseCell($event)' [childGrid]='childGrid'>
. . .
</ejs-grid>
App.component.css
.background-green{
background-color: green;
}
.background-yellow {
background-color: yellow;
}
.background-red{
background-color: red;
}
App.component.ts
import { Component, OnInit } from '@angular/core';
import { employeeData, orderDatas, customerData } from './data';
import { DetailRowService,QueryCellInfoEventArgs } from '@syncfusion/ej2-angular-grids';
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.css'] ,
providers: [DetailRowService],
})
export class AppComponent {
public parentData: Object[];
public childGrid: any;
public secondChildGrid: any;
ngOnInit(): void {
this.parentData = employeeData;
this.childGrid = {
dataSource: orderDatas,
queryString: 'EmployeeID',
allowPaging: true,
queryCellInfo: this.childGridQuerycell,
pageSettings: {pageSize: 6, pageCount: 5},
columns: [
{ field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 120 },
{ field: 'ShipCity', headerText: 'Ship City', width: 120 },
{ field: 'Freight', headerText: 'Freight', width: 120 },
{ field: 'ShipName', headerText: 'Ship Name', width: 150 }
],
};
}
customiseCell (args: QueryCellInfoEventArgs) {
if (args.column.field === 'FirstName') {
if (args.data['EmployeeID'] % 2 === 0) {
args.cell.classList.add('background-green');
} else {
args.cell.classList.add('background-red');
}
}
}
childGridQuerycell (args: QueryCellInfoEventArgs) {
if (args.column.field === 'Freight') {
if (args.data['OrderID'] % 2 === 0) {
args.cell.classList.add('background-green'); //here you can apply styles for childgrid cells
} else {
args.cell.classList.add('background-red');
}
}
}
}
|
