Adaptive in Angular Treegrid component

27 Sep 20236 minutes to read

The Tree Grid user interface (UI) was redesigned to provide an optimal viewing experience and improve usability on small screens.

Render adaptive dialogs

When you enable the enableAdaptiveUI property, the tree grid will render the filter, sort, and edit dialogs in full screen for a better user experience. The following demo demonstrates this behaviour.

app.component.ts

import { Component, OnInit, ViewChild } from '@angular/core';
import { TreeGridComponent } from '@syncfusion/ej2-angular-treegrid';
import { sampleData } from './datasource';

@Component({
    selector: 'app-container',
    template: `<div class="e-adaptive-demo e-bigger">
                    <div class="e-mobile-layout">
                        <div class="e-mobile-content">
                           <ejs-treegrid #adaptive id="adaptivebrowser" [dataSource]='data' childMapping='subtasks' [treeColumnIndex]='1' enableAdaptiveUI='true'
                    height='100%' allowPaging='true' allowFiltering='true'
                    allowSorting='true' [editSettings]='editSettings'
                    [filterSettings]='filterSettings' [toolbar]='toolbar' (load)='onLoad($event)'>
                    <e-columns>
                        <e-column field='taskID' headerText='Task ID' isPrimaryKey='true' width='135' textAlign='Right'></e-column>
                        <e-column field='taskName' headerText='Task Name' width='280'></e-column>
                        <e-column field='duration' headerText='Duration' width='140' textAlign='Right'></e-column>
                        <e-column field='progress' headerText='Progress' width='145' textAlign='Right'></e-column>
                    </e-columns>
                </ejs-treegrid>
                        </div>
                    </div>
                </div>`
})

export class AppComponent implements OnInit {
    @ViewChild('adaptive')
    public treegrid?: TreeGridComponent;
    public data?: object[];
    public editSettings?: Object;
    public toolbar?: string[];
    public orderidrules?: Object;
    public customeridrules?: Object;
    public filterSettings?: Object;
    public menuFilter?: Object;
    public checkboxFilter?: Object;

    ngOnInit(): void {
        this.data = sampleData;
        this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Dialog' };
        this.toolbar = ['Add', 'Edit', 'Delete', 'Update', 'Cancel', 'Search'];
        this.orderidrules = { required: true, number: true };
        this.customeridrules = { required: true };
        this.filterSettings = { type: 'Excel' };
    }

    public onLoad(args: any): void {
        (this.treegrid as TreeGridComponent).grid.adaptiveDlgTarget = document.getElementsByClassName('e-mobile-content')[0] as HTMLElement;
    }
}

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { TreeGridModule } from '@syncfusion/ej2-angular-treegrid';
import { PageService, SortService, FilterService, EditService, ToolbarService, AggregateService } from '@syncfusion/ej2-angular-treegrid';
import { AppComponent } from './app.component';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        TreeGridModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
    providers: [PageService,
                SortService,
                FilterService,
                EditService,
                ToolbarService,
                AggregateService]
})
export class AppModule { }

main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

import 'zone.js';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

Please refer to our Angular Tree Grid feature tour page for its groundbreaking feature representations. You can also explore our Angular Tree Grid example to learn how to present and manipulate data.