Data binding in Angular Grid component

22 Nov 202312 minutes to read

The Grid uses DataManager which supports both RESTful JSON data services binding and local JavaScript object array binding.

The dataSource property can be assigned either with the instance of DataManager or JavaScript object array collection.

It supports two kinds of data binding methods:

  • Local data
  • Remote data

To learn about how to bind local, remote or observables data to Angular Grid, you can check on this video:

Loading animation

The Syncfusion Angular Grid offers a loading animation feature, which makes it easy to identify when data is being loaded or refreshed. This feature provides a clear understanding of the grid’s current state and actions, such as sorting, filtering, grouping, and more.

To achieve this, you can utilize the loadingIndicator.indicatorType property of the grid, which supports two types of indicators:

  • Spinner (default indicator)
  • Shimmer

The following example demonstrates how to set the loadingIndicator.indicatorType property based on changing the dropdown value using the change event of the DropDownList component. The refreshColumns method is used to apply the changes and display the updated loading indicator type.

import { Component, OnInit, ViewChild } from '@angular/core';
import { DataManager, UrlAdaptor } from '@syncfusion/ej2-data';
import { GridComponent } from '@syncfusion/ej2-angular-grids';
import { DropDownListComponent, ChangeEventArgs } from '@syncfusion/ej2-angular-dropdowns';

@Component({
    selector: 'app-root',
    template: `
    <div style="display: flex">
        <label style="padding: 10px 10px 26px 0"> Change the loading indicator type: </label>
        <ejs-dropdownlist
        #dropdown
        style="margin-top:5px"
        index="0"
        width="120"
        [dataSource]="ddlData"
        [fields]='fields'
        (change)="valueChange($event)">
        </ejs-dropdownlist>
    </div>
    <ejs-grid #grid id="grid" style="padding: 10px 10px" [dataSource]='data' [allowPaging]='true' [allowSorting]='true' [allowFiltering]='true' [pageSettings]='pageSettings' [loadingIndicator]='loadingIndicator'>
        <e-columns>
            <e-column field='EmployeeID' headerText='Employee ID' width='130' textAlign='Right'></e-column>
            <e-column field='Employees' headerText='Employee Name' width='145'></e-column>
            <e-column field='Designation' headerText='Designation' width='130'></e-column>
            <e-column field='CurrentSalary' headerText='Current Salary' width='140' format="C2" textAlign='Right'></e-column>
        </e-columns>
    </ejs-grid>`
})
export class AppComponent implements OnInit {
    public data?: DataManager;
    public loadingIndicator?: any;
    public pageSettings?: object;
    @ViewChild('grid')
    public grid?: GridComponent;
    @ViewChild('dropdown')
    public dropdown?: DropDownListComponent;
    public fields: object = { text: 'value', value: 'id' };
    public ddlData?: object[] = [
        { id: 'Spinner', value: 'Spinner' },
        { id: 'Shimmer', value: 'Shimmer' }
    ]

    ngOnInit(): void {
        this.data = new DataManager({ url: 'https://ej2services.syncfusion.com/js/development/api/UrlDataSource', adaptor: new UrlAdaptor });
        this.loadingIndicator = { indicatorType: 'Spinner' };
        this.pageSettings = { pageCount: 3 };
    }

    valueChange(args: ChangeEventArgs) {
        if ((this.dropdown as DropDownListComponent).value === 'Shimmer') {
            (this.grid as GridComponent).loadingIndicator.indicatorType = 'Shimmer';
            (this.grid as GridComponent).refreshColumns();
        } else {
            (this.grid as GridComponent).loadingIndicator.indicatorType = 'Spinner';
            (this.grid as GridComponent).refreshColumns();
        }
    } 
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { GridModule, PageService, SortService, FilterService } from '@syncfusion/ej2-angular-grids';
import { DropDownListAllModule } from '@syncfusion/ej2-angular-dropdowns';
import { AppComponent } from './app.component';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        GridModule,
        DropDownListAllModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
    providers: [PageService, SortService, FilterService]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

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

Sending additional parameters to the server

To add a custom parameter to the data request, use the addParams method of Query class. Assign the Query object with additional parameters to the grid query property.

import { Component, OnInit } from '@angular/core';
import { DataManager, ODataAdaptor, Query } from '@syncfusion/ej2-data';

@Component({
    selector: 'app-root',
    template: `<ejs-grid [dataSource]='data' [query]='query'>
                <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>`
})
export class AppComponent implements OnInit {

    public data: DataManager;
    public query: Query;

    ngOnInit(): void {
        this.data = new DataManager({
            url: 'https://js.syncfusion.com/demos/ejServices/Wcf/Northwind.svc/Orders?$top=7',
            adaptor: new ODataAdaptor()
        });
        this.query = new Query().addParams('ej2grid', 'true');
    }
}

The parameters added using the query property will be sent along with the data request for every grid action.

Handling HTTP error

During server interaction from the grid, some server-side exceptions may occur, and you can acquire those error messages or exception details in client-side using the actionFailure event.

The argument passed to the actionFailure Grid event contains the error details returned from the server.

import { Component, OnInit } from '@angular/core';
import { DataManager } from '@syncfusion/ej2-data';

@Component({
    selector: 'app-root',
    template: `<ejs-grid [dataSource]='data' (actionFailure)="onActionFailure($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>`
})
export class AppComponent implements OnInit {

    public data: DataManager;

    ngOnInit(): void {
        this.data = new DataManager({
            url: 'http://some.com/invalidUrl'
        });
    }

    onActionFailure(e: Error): void {
        alert('Server exception: 404 Not found');
    }
}

The actionFailure event will be triggered not only for the server errors, but also when there is an exception while processing the grid actions.

Binding with ajax

You can use Grid dataSource property to bind the datasource to Grid from external ajax request. In the below code we have fetched the datasource from the server with the help of ajax request and provided that to dataSource property by using onSuccess event of the ajax.

import { Component, OnInit, ViewChild } from '@angular/core';
import { GridComponent } from '@syncfusion/ej2-angular-grids';
import { Ajax } from '@syncfusion/ej2-base';

@Component({
  selector: 'app-root',
  template: `<input type="button" id="btn" (click)="click()" value="Click"/>
                <ejs-grid #Grid>
                <e-columns>
                    <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=120></e-column>
                    <e-column field='CustomerID' headerText='Customer ID' textAlign='Right' width=120></e-column>
                    <e-column field='EmployeeID' headerText='Employee ID' textAlign='Right' width=120></e-column>
                    <e-column field='ShipCountry' headerText='Ship Country' textAlign='Right' width=120></e-column>
                </e-columns>
                </ejs-grid>`
})
export class AppComponent implements OnInit {
  public data: object[];
  @ViewChild('Grid') public grid: GridComponent;
  ngOnInit(): void {
  }
  click() {
    const grid = this.grid;  // Grid instance
    const ajax = new Ajax('https://ej2services.syncfusion.com/production/web-services/api/Orders', 'GET');
    ajax.send();
    ajax.onSuccess = (data: string) => {
       grid.dataSource = JSON.parse(data);
    };
  }
}

If you bind the dataSource from this way, then it acts like a local dataSource. So you cannot perform any server side crud actions.

See Also