Cell in Angular Grid component
20 Dec 202210 minutes to read
Cell customization
The appearance of cells can be customized by using the queryCellInfo
event.
The queryCellInfo
event triggers for every cell. In that event handler, you can get QueryCellInfoEventArgs
that contains the details of the cell.
import { Component, OnInit } from '@angular/core';
import { data } from './datasource';
import { QueryCellInfoEventArgs } from '@syncfusion/ej2-angular-grids';
@Component({
selector: 'app-root',
template: `<ejs-grid #grid [dataSource]='data' [enableHover]='false' [allowSelection]='false' [height]='315'
(queryCellInfo)='customiseCell($event)'>
<e-columns>
<e-column field='OrderID' headerText='Order ID' textAlign='Right' width=100></e-column>
<e-column field='CustomerID' headerText='Customer ID' width=120></e-column>
<e-column field='Freight' headerText='Freight' textAlign='Right' format='C2' width=80></e-column>
<e-column field='ShipCity' headerText='Ship City' width=130 ></e-column>
</e-columns>
</ejs-grid>`,
styleUrls: ['./app/app.style.css']
})
export class AppComponent implements OnInit {
public data: object[];
ngOnInit(): void {
this.data = data;
}
customiseCell(args: QueryCellInfoEventArgs) {
if (args.column.field === 'Freight') {
if (args.data[args.column.field] < 30) {
args.cell.classList.add('below-30');
} else if (args.data[args.column.field] < 80) {
args.cell.classList.add('below-80');
} else {
args.cell.classList.add('above-80');
}
}
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { GridModule } from '@syncfusion/ej2-angular-grids';
import { DetailRowService } from '@syncfusion/ej2-angular-grids';
import { AppComponent } from './app.component';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
GridModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [DetailRowService]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
Custom attributes
You can customize the grid cells by adding a CSS class to the customAttribute
property of the column.
.e-attr {
background: #d7f0f4;
}
{
field: 'ShipCity', headerText: 'Ship City', customAttributes: {class: 'e-attr'}, width: '120'
}
In the below example, we have customized the cells of OrderID and ShipCity columns.
import { Component, OnInit } from '@angular/core';
import { data } from './datasource';
@Component({
selector: 'app-root',
template: `<ejs-grid #grid [dataSource]='data' [height]='315'>
<e-columns>
<e-column field='OrderID' headerText='Order ID' [customAttributes]="{class: 'e-attr'}"
textAlign='Right' width=100></e-column>
<e-column field='CustomerID' headerText='Customer ID' width=120></e-column>
<e-column field='ShipCity' headerText='Ship City' [customAttributes]="{class: 'e-attr'}" width=130 ></e-column>
<e-column field='ShipName' headerText='Ship Name' textAlign='Right' width=80></e-column>
</e-columns>
</ejs-grid>`,
styleUrls: ['./app/app.style.css']
})
export class AppComponent implements OnInit {
public data: object[];
ngOnInit(): void {
this.data = data;
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { GridModule } from '@syncfusion/ej2-angular-grids';
import { DetailRowService } from '@syncfusion/ej2-angular-grids';
import { AppComponent } from './app.component';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
GridModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [DetailRowService]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
Grid lines
The gridLines
have the option to display cell border and it can be defined by the gridLines
property.
The available modes of grid lines are:
Modes | Actions |
---|---|
Both | Displays both the horizontal and vertical grid lines. |
None | No grid lines are displayed. |
Horizontal | Displays the horizontal grid lines only. |
Vertical | Displays the vertical grid lines only. |
Default | Displays grid lines based on the theme. |
import { Component, OnInit } from '@angular/core';
import { inventoryData } from './datasource';
@Component({
selector: 'app-root',
template: `<ejs-grid [dataSource]='data' height='315' gridLines='Both'>
<e-columns>
<e-column field='Inventor' headerText='Inventor Name' width='180' textAlign="Right"></e-column>
<e-column field='NumberofPatentFamilies' headerText="Number of Patent Families" width='180' textAlign="Right"></e-column>
<e-column field='Country' headerText='Country' width='140'></e-column>
<e-column field='Active' width='120'></e-column>
<e-column field='Mainfieldsofinvention' headerText='Main fields of invention' width='200'></e-column>
</e-columns>
</ejs-grid>`
})
export class AppComponent implements OnInit {
public data: object[];
ngOnInit(): void {
this.data = inventoryData;
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { GridModule } from '@syncfusion/ej2-angular-grids';
import { PageService } from '@syncfusion/ej2-angular-grids';
import { AppComponent } from './app.component';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
GridModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [PageService]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
By default, the grid renders with Default mode.