Frozen in Angular Treegrid component
27 Apr 202417 minutes to read
Frozen rows and columns
Frozen rows and columns provides an option to make rows and columns always visible in the top and left side of the tree grid while scrolling.
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 { NgModule,ViewChild } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { TreeGridModule } from '@syncfusion/ej2-angular-treegrid'
import { NumericTextBoxModule } from '@syncfusion/ej2-angular-inputs'
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';
import { Component, OnInit, ViewEncapsulation, ViewChild } from '@angular/core';
import { FreezeService, TreeGridComponent } from '@syncfusion/ej2-angular-treegrid';
import { NumericTextBoxComponent } from '@syncfusion/ej2-angular-inputs';
import { sampleData } from './datasource';
@Component({
imports: [
TreeGridModule, NumericTextBoxModule, ButtonModule
],
,
standalone: true,
selector: 'app-container',
template: ` <div style="display: flex">
<label style="padding: 10px 10px 26px 0">Change the frozen columns:</label>
<ejs-numerictextbox id="frozenColumns" #frozenColumns min="0" max="5" [validateDecimalOnType]="true" decimals="0" format="n"
value="2" width="100px" ></ejs-numerictextbox>
<div>
<button style="margin-left:5px" ejs-button (click)="frozenColumnFn()">Update</button>
</div>
</div>
<ejs-treegrid #treegrid [dataSource]='data' childMapping='subtasks' [treeColumnIndex]='1' height='310' [frozenColumns]='2' [frozenRows]='3' [allowSelection]='false'>
<e-columns>
<e-column field='taskID' headerText='Task ID' width='90' textAlign='Right'></e-column>
<e-column field='taskName' headerText='Task Name' width='230'></e-column>
<e-column field='startDate' headerText='Start Date' width='120' format='yMd' textAlign='Right'></e-column>
<e-column field='endDate' headerText='End Date' width='120' format='yMd' textAlign='Right'></e-column>
<e-column field='duration' headerText='Duration' width='110' textAlign='Right'></e-column>
<e-column field='progress' headerText='Progress' width='110' textAlign='Right'></e-column>
<e-column field='priority' headerText='Priority' width='110'></e-column>
<e-column field='approved' headerText='Approved' textAlign='Left' width='110'></e-column>
</e-columns>
</ejs-treegrid>`,
providers: [FreezeService]
})
export class AppComponent implements OnInit {
public data?: Object[];
@ViewChild('treegrid')
public treegrid?: TreeGridComponent;
@ViewChild('frozenColumns')
public frozenColumns?: NumericTextBoxComponent;
ngOnInit(): void {
this.data = sampleData;
}
frozenColumnFn() {
(this.treegrid as TreeGridComponent).frozenColumns = (this.frozenColumns as NumericTextBoxComponent).value;
}
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
Freeze particular columns
You can use isFrozen
property to freeze selected columns in tree grid.
In this demo, the columns with field name taskName
and startDate
is frozen using
the isFrozen
property.
import { NgModule,ViewChild } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { TreeGridModule, ToolbarService, SelectionService, EditService } from '@syncfusion/ej2-angular-treegrid'
import { Component, OnInit, ViewEncapsulation, ViewChild } from '@angular/core';
import { FreezeService, TreeGridComponent } from '@syncfusion/ej2-angular-treegrid';
import { sampleData } from './datasource';
@Component({
imports: [
TreeGridModule
],
providers: [ToolbarService,
SelectionService,
EditService],
standalone: true,
selector: 'app-container',
template: `<ejs-treegrid [dataSource]='data' childMapping='subtasks' height='310' [allowSelection]='false'>
<e-columns>
<e-column field='taskID' headerText='Task ID' width='90' textAlign='Right'></e-column>
<e-column field='taskName' headerText='Task Name' width='200' isFrozen= 'true'></e-column>
<e-column field='startDate' headerText='Start Date' isFrozen= 'true' width='150' format='yMd' textAlign='Right'></e-column>
<e-column field='endDate' headerText='End Date' width='150' format='yMd' textAlign='Right'></e-column>
<e-column field='duration' headerText='Duration' width='110' textAlign='Right'></e-column>
<e-column field='progress' headerText='Progress' width='110' textAlign='Right'></e-column>
<e-column field='priority' headerText='Priority' width='110'></e-column>
<e-column field='approved' headerText='Approved' textAlign='Left' width='110'></e-column>
</e-columns>
</ejs-treegrid>`,
providers: [FreezeService]
})
export class AppComponent implements OnInit {
public data?: Object[];
ngOnInit(): void {
this.data = sampleData;
}
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
Freeze direction
You can freeze the tree 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 Task Name column is frozen at the left and the Priority column is frozen at the right side of the content table.
import { NgModule,ViewChild } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { TreeGridModule, ToolbarService, SelectionService, EditService } from '@syncfusion/ej2-angular-treegrid'
import { Component, OnInit, ViewEncapsulation, ViewChild } from '@angular/core';
import { FreezeService, TreeGridComponent } from '@syncfusion/ej2-angular-treegrid';
import { sampleData } from './datasource';
@Component({
imports: [
TreeGridModule
],
providers: [ToolbarService,
SelectionService,
EditService],
standalone: true,
selector: 'app-container',
template: `<ejs-treegrid [dataSource]='data' childMapping='subtasks' height='310' [treeColumnIndex]='1' [allowSelection]='false'>
<e-columns>
<e-column field='taskID' headerText='Task ID' width='90' textAlign='Right'></e-column>
<e-column field='taskName' headerText='Task Name' width='200' freeze='Left'></e-column>
<e-column field='startDate' headerText='Start Date' width='150' format='yMd' textAlign='Right'></e-column>
<e-column field='endDate' headerText='End Date' width='150' format='yMd' textAlign='Right'></e-column>
<e-column field='duration' headerText='Duration' width='110' textAlign='Right'></e-column>
<e-column field='progress' headerText='Progress' width='110' textAlign='Right'></e-column>
<e-column field='priority' headerText='Priority' width='110' freeze='Right'></e-column>
<e-column field='approved' headerText='Approved' textAlign='Left' width='110'></e-column>
</e-columns>
</ejs-treegrid>`,
providers: [FreezeService]
})
export class AppComponent implements OnInit {
public data?: Object[];
ngOnInit(): void {
this.data = sampleData;
}
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
- Freeze Direction is not compatible with the
isFrozen
andfrozenColumns
properties.- You can get the frozen right rows by using the
getFrozenRightRows
method in tree grid.- To get the movable rows, you can use the
getMovableRows
method in tree grid.- You can get the movable row by index using the
getMovableRowByIndex
method in tree grid.- To get the movable cell from index using the
getMovableCellFromIndex
method in tree grid. In this method, you need to pass the row index and column index of movable column as parameter.- To get the frozen right column header element by index, you can use the
getFrozenRightColumnHeaderByIndex
method in tree grid. In this method, you need to pass the frozen right column header index as parameter.- To get the frozen left column header element by index, you can use the
getFrozenLeftColumnHeaderByIndex
method in tree grid. In this method, you need to pass the frozen left column header index as parameter.- To get the frozen right cell element from index, you can use the
getFrozenRightCellFromIndex
method in tree grid. In this method, you need to pass the row index and cell index of the frozen right column as parameter.
To get the movable column header element by index, you can use thegetMovableColumnHeaderByIndex
method in tree grid. In this method, you need to pass the movable column index as parameter.- To get the frozen right row element by index, you can use the
getFrozenRightRowByIndex
method in tree grid. In this method, you need to pass the right frozen row index as parameter.
Limitations of frozen tree grid
The following features are not supported in frozen rows and columns:
- Row Template
- Detail Template
- Cell Editing
Limitations of freeze direction
This feature has the following limitations, along with the above mentioned frozen tree grid limitations.
- Infinite scroll cache mode.
- Freeze direction in the stacked header is not compatible with column reordering.
Add validation rule for frozen tree grid
In a frozen column-enabled tree grid, the content will be separated into frozen and movable parts. The following code is used to dynamically add validation to input fields in the movable part. In the actionComplete event args, find the movableform instance as an argument. Here, add the validation rules dynamically.
actionComplete: (args: DialogEditEventArgs) => {
if ((args.requestType === 'beginEdit' || args.requestType === 'add')) {
// Add Validation Rules
args.movableForm.ej2_instances[0].addRules('duration', { max: 200 }); // Here, 'duration' is the column name.
}
}
Validation rules for the ‘duration’ and ‘taskID’ columns can be added in the following sample.
import { NgModule,ViewChild } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { TreeGridModule, ToolbarService, SelectionService, EditService } from '@syncfusion/ej2-angular-treegrid'
import { TreeGrid, Selection, Edit, Toolbar, EditSettingsModel, FreezeService } from '@syncfusion/ej2-angular-treegrid';
import { Component, OnInit } from '@angular/core';
import { sampleData } from './datasource';
@Component({
imports: [
TreeGridModule
],
providers: [ToolbarService,
SelectionService,
EditService],
standalone: true,
selector: 'app-container',
template: `<ejs-treegrid [dataSource]='data' childMapping='subtasks' height='310' [treeColumnIndex]='0' [toolbar]='toolbar' [editSettings]='editSettings' allowSelection='false' enableHover='false' (actionComplete)="actionComplete($event)">
<e-columns>
<e-column field='taskID' headerText='Task ID' [validationRules]='validationrules' width='90' textAlign='Right'></e-column>
<e-column field='taskName' headerText='Task Name' width='200' freeze='Left'></e-column>
<e-column field='duration' headerText='Duration' [validationRules]='validationrules' width='110' textAlign='Right'></e-column>
<e-column field='startDate' headerText='Start Date' width='150' format='yMd' textAlign='Right'></e-column>
<e-column field='endDate' headerText='End Date' width='150' format='yMd' textAlign='Right'></e-column>
<e-column field='progress' headerText='Progress' width='110' textAlign='Right'></e-column>
<e-column field='priority' headerText='Priority' width='110' freeze='Right'></e-column>
<e-column field='approved' headerText='Approved' textAlign='Left' width='110'></e-column>
</e-columns>
</ejs-treegrid>`,
providers: [FreezeService]
})
export class AppComponent implements OnInit {
public data?: object[];
public toolbar?: string[];
public editSettings?: EditSettingsModel;
public validationrules?: Object;
ngOnInit(): void {
this.data = sampleData;
this.toolbar = ['Add', 'Edit', 'Delete', 'Update', 'Cancel'];
this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Row' };
this.validationrules = { required: true };
}
actionComplete(args: any) {
if (args.requestType === 'beginEdit' || args.requestType === 'add') {
// Add Validation Rules
args.movableForm.ej2_instances[0].addRules('duration', { max: 200 });
args.movableForm.ej2_instances[0].addRules('taskID', { max: 20 });
}
}
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
- This is applicable when a frozen column is enabled and the edit mode is set as “Row” in the tree grid.
- You can refer to Syncfusion
Angular Tree Grid
feature tour page for its groundbreaking feature representations. Also, explore SyncfusionAngular Tree Grid example
to know how to present and manipulate data.