Toolbar in Angular Grid component

Angular

Search results

03 Oct 2022 / 3 minutes to read

The Grid provides ToolBar support to handle grid actions. The toolbar property accepts either the collection of built-in toolbar items and ItemModel objects for custom toolbar items or HTML element ID for toolbar template.

To use Toolbar, you need to inject ToolbarService in the provider section of AppModule.

You can enable/disable toolbar items by using the enableItems method.

Source

Preview

app.component.ts

app.module.ts

main.ts

import { Component, OnInit, ViewChild } from '@angular/core';
import { ClickEventArgs } from '@syncfusion/ej2-navigations';
import { data } from './datasource';
import { GroupService, GridComponent } from '@syncfusion/ej2-angular-grids';

@Component({
    selector: 'app-root',
    template: `<button ej-button id='enable' cssClass='e-flat' (click)='enable()'>Enable</button>
                <button ej-button id='disable' cssClass='e-flat' (click)='disable()'>Disable</button>
                <ejs-grid id='Grid' #grid [dataSource]='data' height='200px' [allowGrouping]='true'
                [groupSettings]='groupOptions' [toolbar]='toolbar' (toolbarClick)='clickHandler($event)'>
                <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='ShipCity' headerText='Ship City' width=150></e-column>
                    <e-column field='ShipName' headerText='Ship Name' width=150></e-column>
                </e-columns>
                </ejs-grid>`,
    providers: [GroupService]
})
export class AppComponent implements OnInit {

    public data: object[];
    public toolbar: string[];
    public groupOptions: object;
    public toolbarObj;

    @ViewChild('grid')
    public grid: GridComponent;

    ngOnInit(): void {
        this.data = data;
        this.toolbar = ['Expand', 'Collapse'];
        this.groupOptions = { columns: ['CustomerID'] };
    }

    clickHandler(args: ClickEventArgs): void {
        if (args.item.id === 'Grid_Collapse') { // Grid_Collapse is control id + '_' + toolbar value.
            this.grid.groupModule.collapseAll();
        }

        if (args.item.id === 'Grid_Expand') {
            this.grid.groupModule.expandAll();
        }
    }
    enable() {
        this.grid.toolbarModule.enableItems(['Grid_Collapse', 'Grid_Expand'], true); // Enable toolbar items.
    }

    disable() {
        this.grid.toolbarModule.enableItems(['Grid_Collapse', 'Grid_Expand'], false); // Disable toolbar items.
    }
}

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { GridModule, ToolbarService, PageService } from '@syncfusion/ej2-angular-grids';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';
import { AppComponent } from './app.component';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        GridModule,
        ButtonModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
    providers: [ToolbarService, 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);

You can add the Grid toolbar component at the bottom of Grid using the ‘created’ event.

Source

Preview

app.component.ts

app.module.ts

main.ts

import { Component, OnInit, ViewChild } from '@angular/core';
import { data } from './datasource';
import { GridComponent } from '@syncfusion/ej2-angular-grids';

@Component({
    selector: 'app-root',
    template: `<ejs-grid id='Grid' #grid [dataSource]='data' [toolbar]='toolbar' (created)="created($event)" height='200px'>
                <e-columns>
                    <e-column field='OrderID' headerText='Order ID' textAlign='Right' type='number' isPrimaryKey='true' width=120></e-column>
                    <e-column field='CustomerID' headerText='Customer ID' type='string' width=140></e-column>
                    <e-column field='Freight' headerText='Freight' textAlign='Right' type='number' format='C2' width=120></e-column>
                    <e-column field='OrderDate' headerText='Order Date' textAlign='Right' type='date' format='yMd' width=140></e-column>
                </e-columns>
                </ejs-grid>`
})
export class AppComponent implements OnInit {

    public data: object[];
    public toolbar: string[];

    @ViewChild('grid')
    public grid: GridComponent;

    ngOnInit(): void {
        this.data = data.slice(0, 8);
        this.toolbar = ['Print', 'Search'];
    }

    created() {
    let toolbar: HTMLElement = this.grid.element.querySelector('.e-toolbar');
    this.grid.element.appendChild(toolbar);
    }
}

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { GridModule, ToolbarService, PageService } from '@syncfusion/ej2-angular-grids';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';
import { AppComponent } from './app.component';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        GridModule,
        ButtonModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
    providers: [ToolbarService, 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);

Toolbar in Angular Grid component

Enable or disable toolbar items

Add toolbar at the bottom of Grid

See Also