Frozen rows and columns provides an option to make rows and columns always visible in the top and left side of the grid while scrolling.
To use frozen rows and columns support, inject the FreezeService in the provider section of AppModule.
In this demo, the frozenColumns is set as 2 and the frozenRows
is set as 3. Hence, the left two columns and top three rows are frozen.
import { Component, OnInit } from '@angular/core';
import { data } from './datasource';
@Component({
selector: 'app-root',
template: `<ejs-grid [dataSource]='data' height=315 [frozenColumns]='2' [frozenRows]='3' [allowSelection]='false' [enableHover]='false'>
<e-columns>
<e-column field='OrderID' headerText='Order ID' textAlign='Right' width=120></e-column>
<e-column field='CustomerID' headerText='Customer ID' width=150></e-column>
<e-column field='OrderDate' headerText='Order Date' width=130 format='yMd' textAlign='Right'></e-column>
<e-column field='EmployeeID' headerText='Employee ID' textAlign='Right' width=120></e-column>
<e-column field='ShipName' headerText='Ship Name' width=150></e-column>
<e-column field='ShipAddress' headerText='Ship Address' width=170></e-column>
<e-column field='ShipCity' headerText='Ship City' width=150></e-column>
<e-column field='ShipCountry' headerText='Ship Country' width=150></e-column>
<e-column field='ShipRegion' headerText='Ship Region' width=150></e-column>
<e-column field='ShipPostalCode' headerText='Ship Postal Code' width=150></e-column>
<e-column field='Freight' headerText='Freight' width=120></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, FreezeService, SelectionService, EditService, ToolbarService } from '@syncfusion/ej2-angular-grids';
import { AppComponent } from './app.component';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
GridModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [FreezeService, SelectionService, EditService, ToolbarService]
})
export class AppModule { }import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
- Frozen rows and columns should not be set outside the grid view port.
- Frozen Grid will support row and column virtualization feature, which helps to improve the Grid performance while loading a large dataset.
The following features are not supported in frozen rows and columns:
You can freeze the Grid columns on the left or right side by using the column.freeze property and the remaining columns will be movable. The grid will automatically move the columns to the left or right position based on the column.freeze value.
Types of the column.freeze directions:
Left: Allows you to freeze the columns at the left.Right: Allows you to freeze the columns at the right.In this demo, the ShipCountry column is frozen at the left and the CustomerID column is frozen at the right side of the content table.
import { Component, OnInit } from '@angular/core';
import { data } from './datasource';
@Component({
selector: 'app-root',
template: `<ejs-grid #grid [dataSource]='data' height='315' [frozenRows]='2' [enableHover]='false'>
<e-columns>
<e-column field='OrderID' headerText='Order ID' width='120' textAlign='Right'></e-column>
<e-column field='Freight' headerText='Freight' width='120' format='C2' textAlign='Right'></e-column>
<e-column field='CustomerID' headerText='Customer ID' width='150' freeze='Right'></e-column>
<e-column field='OrderDate' headerText='Order Date' width='130' format="yMd" textAlign='Right'></e-column>
<e-column field='ShipName' headerText='Ship Name' width='150'></e-column>
<e-column field='ShipAddress' headerText='Ship Address' width='170'></e-column>
<e-column field='ShipCity' headerText='Ship City' width='150'></e-column>
<e-column field='ShipCountry' headerText='Ship Country' width='150' freeze='Left'></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, FreezeService, SelectionService, EditService, ToolbarService } from '@syncfusion/ej2-angular-grids';
import { AppComponent } from './app.component';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
GridModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [FreezeService, SelectionService, EditService, ToolbarService]
})
export class AppModule { }import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
- Freeze Direction is not compatible with the
isFrozenandfrozenColumnsproperties.
This feature has the below limitations, along with the above mentioned Frozen Grid limitations.
In a frozen column enabled Grid, Grid content will be separated into frozen and movable parts. The following code can be used to dynamically add validation to input fields that are placed in the movable part. In the actionComplete event args, you can find the movableform instance as an argument. Here, you can add validation rules dynamically.
actionComplete: (args: DialogEditEventArgs) => {
if ((args.requestType === 'beginEdit' || args.requestType === 'add')) {
// Add Validation Rules
args.movableForm.ej2_instances[0].addRules('Freight', { max: 200 }); // Here, 'Freight' is the column name.
}
}Validation rules for the ‘EmployeeID’ and ‘Freight’ columns can be added in the sample below.
import { Grid, Freeze, Selection, Edit, Toolbar, DialogEditEventArgs, EditSettingsModel } from '@syncfusion/ej2-angular-grids';
import { Component, OnInit } from '@angular/core';
import { data } from './datasource';
@Component({
selector: 'app-root',
template: `<ejs-grid #grid [dataSource]='data' height='315' [toolbar]='toolbar' [editSettings]='editSettings' allowSelection='false' enableHover='false' (actionComplete)="actionComplete($event)">
<e-columns>
<e-column field='OrderID' headerText='Order ID' width='120' textAlign='Right' isPrimaryKey='true'></e-column>
<e-column field='EmployeeID' headerText='Employee ID' width='120' textAlign='Right' [validationRules]='validationrules'></e-column>
<e-column field='ShipName' headerText='Ship Name' width='150'></e-column>
<e-column field='ShipAddress' headerText='Ship Address' width='170'></e-column>
<e-column field='ShipCity' headerText='Ship City' width='150'></e-column>
<e-column field='ShipCountry' headerText='Ship Country' width='150' isFrozen='true'></e-column>
<e-column field='Freight' headerText='Freight' width='120' [validationRules]='validationrules' textAlign='Right'></e-column>
</e-columns>
</ejs-grid>`
})
export class AppComponent implements OnInit {
public data: object[];
public toolbar: string[];
public editSettings: EditSettingsModel;
public validationrules: Object;
ngOnInit(): void {
this.data = data;
this.toolbar = ['Add', 'Edit', 'Delete', 'Update', 'Cancel'];
this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true };
this.validationrules = { required: true };
}
actionComplete(args) {
if (args.requestType === 'beginEdit' || args.requestType === 'add') {
// Add Validation Rules
args.movableForm.ej2_instances[0].addRules('Freight', { max: 200 });
args.movableForm.ej2_instances[0].addRules('EmployeeID', { max: 20 });
}
}
}import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { GridModule, FreezeService, SelectionService, EditService, ToolbarService } from '@syncfusion/ej2-angular-grids';
import { AppComponent } from './app.component';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
GridModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [FreezeService, SelectionService, EditService, ToolbarService]
})
export class AppModule { }import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);This is applicable when a frozen column is enabled and the edit mode is set as ”Normal” in the Grid.