Row height in Angular Grid component
4 Apr 20236 minutes to read
You can customize the row height of grid rows through the rowHeight
property. The rowHeight
property is used to change the row height of entire grid rows.
In the below example, the rowHeight
is set as ‘60px’.
import { Component, OnInit } from '@angular/core';
import { data } from './datasource';
@Component({
selector: 'app-root',
template: `<ejs-grid #grid [dataSource]='data' [enableHover]='false' [allowSelection]='false' [height]='315' [rowHeight]='60'>
<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>`
})
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);
Customize row height for particular row
Grid row height for particular row can be customized using the rowDataBound
event by setting the rowHeight
in arguments for each row based on the requirement.
In the below example, the row height for the row with OrderID as ‘10249’ is set as ‘90px’ using the rowDataBound
event.
import { Component, OnInit } from '@angular/core';
import { data } from './datasource';
import { Query, DataManager } from '@syncfusion/ej2-data';
import { RowDataBoundEventArgs } from '@syncfusion/ej2-angular-grids';
@Component({
selector: 'app-root',
template: `<ejs-grid #grid [dataSource]='data' [height]='315' (rowDataBound)='rowDataBound($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>`
})
export class AppComponent implements OnInit {
public data: object[];
ngOnInit(): void {
this.data = new DataManager(data as JSON[]).executeLocal(new Query().take(8));
}
public rowDataBound(args: RowDataBoundEventArgs) {
const OrderID = 'OrderID';
if (args.data[OrderID] === 10249) {
args.rowHeight = 90;
}
}
}
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);
In virtual scrolling mode, it is not applicable to set the
rowHeight
using therowDataBound
event.