Data binding in Angular Grid component

21 Jun 202422 minutes to read

Data binding is a fundamental technique that empowers the Grid component to integrate data into its interface, enabling the creation of dynamic and interactive grid views. This feature is particularly valuable when working with large datasets or when data needs to be fetched remotely.

The Syncfusion Grid utilizes the DataManager, which supports both local binding with JavaScript object arrays and remote binding with RESTful JSON data services. The key property, dataSource, can be assigned to a DataManager instance or a collection of JavaScript object arrays.

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 indicator

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 { 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 { 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({
imports: [
        
        GridModule,
        DropDownListAllModule
    ],

providers: [PageService, SortService, FilterService],
standalone: true,
    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://services.syncfusion.com/angular/production/api/orders', 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 { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Refresh the datasource using property

Refreshing the data source in a Syncfusion Grid involves updating the data that the grid displays dynamically. This operation is essential when you need to reflect changes in the underlying data without reloading the entire page or component.

To achieve this, you can make use of the datasource property in conjunction with the setProperties method. This ensures that the grid reflects the changes in the data source without requiring a complete page or component reload.

For example, if you add or delete data source records, follow these steps:

Step 1: Add/delete the datasource record by using the following code.

this.grid.dataSource.unshift(data); // Add a new record.
this.grid.dataSource.splice(selectedRow, 1); // Delete a record.

Step 2: Refresh the datasource after changes by invoking the setProperties method.

(this.grid as GridComponent).setProperties({ dataSource:  (this.grid as GridComponent).dataSource as object[] });

The following example demonstrates adding a new record to the data source through an external button:

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { GridModule, EditService, PageService, ToolbarService } from '@syncfusion/ej2-angular-grids'
import { ButtonAllModule } from '@syncfusion/ej2-angular-buttons'

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

@Component({
imports: [
        
        GridModule,
        ButtonAllModule
    ],

providers: [EditService, PageService, ToolbarService],
standalone: true,
    selector: 'app-root',
    template: `
        <div style="padding: 5px 0px 20px 0px ">
            <button ejs-button id="sample"  (click)='changeDatasource()'> Refresh Datasource </button>
        </div>
        <ejs-grid #grid [dataSource]='data' [height]='280' >
            <e-columns>
                <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=90></e-column>
                <e-column field='CustomerID' headerText='Customer ID' width=120></e-column>
                <e-column field='Freight' headerText='Freight' textAlign='Right' format='C2' width=90></e-column>
                <e-column field='ShipCity' headerText='Ship City' width=120 ></e-column>
            </e-columns>
        </ejs-grid>`
})
export class AppComponent implements OnInit {
    public data?: object[];
    @ViewChild('grid') public grid?: GridComponent;
    public  newRecords:object ={};
    ngOnInit(): void {
        this.data = data;
    }
    changeDatasource(): void {

      for (let i = 0; i < 5; i++) {
         this.newRecords = {
            OrderID: this.generateOrderId(),
            CustomerID: this.generateCustomerId(),
            ShipCity: this.generateShipCity(),
            Freight: this.generateFreight(),
            ShipName: this.generateShipName()
        };
      
        ((this.grid as GridComponent).dataSource as object[]).unshift(this. newRecords);
        (this.grid as GridComponent).setProperties({ dataSource:  (this.grid as GridComponent).dataSource as object[] });
      }
    }

    // Generate a random OrderID
    generateOrderId(): number {
        return Math.floor(10000 + Math.random() * 90000);
    }
    // Generate a random CustomerID
    generateCustomerId(): string {
        const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
        let result = '';
        for (let i = 0; i < 5; i++) {
            result += characters.charAt(Math.floor(Math.random() * characters.length));
        }
        return result;
    }
    // Generate a random ShipCity
    generateShipCity(): string {
        const cities = ['London', 'Paris', 'New York', 'Tokyo', 'Berlin'];
        return cities[Math.floor(Math.random() * cities.length)];
    }
    // Generate a random Freight value
    generateFreight(): number {
        return Math.random() * 100;
    }
    // Generate a random ShipName
    generateShipName(): string {
        const names = ['Que Delícia', 'Bueno Foods', 'Island Trading', 'Laughing Bacchus Winecellars'];
        return names[Math.floor(Math.random() * names.length)];
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Dynamically change the datasource or columns or both

The Grid component in Syncfusion allows dynamic modification of the data source, columns, or both . This feature is particularly valuable when you need to refresh the grid’s content and structure without requiring a complete page reload.

To achieve dynamic changes, you can utilize the changeDataSource method. This method enables you to update the data source, columns, or both, based on your application’s requirements. However, it is important to note that during the changing process for the data source and columns, the grid’s existing actions such as sorting, filtering, grouping, aggregation, and searching will be reset.The changeDataSource method has two optional arguments: the first argument represents the data source, and the second argument represents the columns. The various uses of the changeDataSource method are explained in the following topic.

1. Change both data source and columns:

To modify both the existing columns and the data source, you need to pass the both arguments to the changeDataSource method. The following example demonstrates how to change both the data source and columns.

You can assign a JavaScript object array to the dataSource property to bind local data to the grid. The code below provides an example of how to create a data source for the grid.

    export let data: Object[] = [
    {
        OrderID: 10248, CustomerID: 'VINET', Freight: 32.38,
        ShipCity: 'Reims'
    },
    {
        OrderID: 10249, CustomerID: 'TOMSP', Freight: 11.61,
        ShipCity: 'Münster'
    },
    {
        OrderID: 10250, CustomerID: 'HANAR', Freight: 61.34,
        ShipCity: 'Rio de Janeiro'
    }];

The following code demonstrates how to create the columns for the grid, which are based on the provided grid data source.

    public newColumn: ColumnModel[] = [
        { field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 125 },
        { field: 'CustomerID', headerText: 'Customer ID', width: 125 },
    ];

The following code demonstrates updating the data source and columns defined above using the changeDataSource method.

    this.gridInstance.changeDataSource(data, newColumn);

2. Modify only the existing columns:

To modify the existing columns in a grid, you can either add or remove columns or change the entire set of columns using the changeDataSource method. To use this method, you should set the first parameter to null and provide the new columns as the second parameter. However, please note that if a column field is not specified in the data source, its corresponding column values will be empty. The following example illustrates how to modify existing columns.

The following code demonstrates how to add new columns with existing grid columns (‘newColumn’) by using changeDataSource method.

    public newColumn1: ColumnModel[] = [
        { field: 'Freight', headerText: 'Freight', textAlign: 'Right', width: 125 },
        { field: 'ShipCity', headerText: 'ShipCity', width: 125 },
    ];
    let column: any = this.newColumn.push(...this.newColumn1);
    this.gridInstance.changeDataSource(null, column);

3. Modify only the data source:

You can change the entire data source in the grid using the changeDataSource method. To use this method, you should provide the data source as the first argument, and  the second argument which is optional can be used to specify new columns for the grid. If you are not specifying the columns, the grid will generate the columns automatically based on the data source. The following example demonstrates how to modify the data source.

You can assign a JavaScript object array to the dataSource property to bind local data to the grid. The code below provides an example of how to create a new data source for the grid.

     export let employeeData: Object[] = [
    {
        FirstName: 'Nancy', City: 'Seattle', Region: 'WA',
        Country: 'USA'
    },
    {
        FirstName: 'Andrew', City: 'London', Region: null,
        Country: 'UK',
    },
    {
        FirstName: 'Janet', City: 'Kirkland', Region: 'WA',
        Country: 'USA'
    }];

The following code demonstrates, how to use the changeDataSource method to bind the new employeeData to the grid.

    this.gridInstance.changeDataSource(employeeData);
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { FormsModule } from '@angular/forms'
import { GridModule, PageService, SortService, FilterService, GroupService } from '@syncfusion/ej2-angular-grids'
import { ButtonAllModule } from '@syncfusion/ej2-angular-buttons'

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

@Component({
imports: [
        
        FormsModule,
        GridModule,
        ButtonAllModule
    ],

providers: [
        PageService,
        SortService,
        FilterService,
        GroupService
    ],
standalone: true,
    selector: 'app-root',
    template: `<div style="padding:0px 0px 20px 0px">
                <button ejs-button (click)=next($event)>Change datasource and column</button>
                </div>
                <ejs-grid #Grid [dataSource]="data"  allowPaging="true" [pageSettings]="pageSettings" >
                <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='Freight' headerText='Freight' textAlign='Right' width=120></e-column>
                </e-columns>
                </ejs-grid>`
})
export class AppComponent implements OnInit {
    public data?: object[];
    public isDataLoading = true;
    public pageSettings?: object = { pageSize: 5, pageCount: 3 }
    @ViewChild('Grid') public grid?: GridComponent;
    public count = 0;

    public newColumn = [
        { field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 125 },
        { field: 'CustomerName', headerText: 'Customer Name', width: 125 },
        { field: 'OrderDate', headerText: 'Order Date', width: 130, format: 'yMd', textAlign: 'Right'},
        { field: 'Freight', headerText: 'Freight', width: 120, textAlign: 'Right'},
    ];

    ngOnInit(): void {
      this.data= data
      
    }
    next(args:MouseEvent) {
      this.count = this.count + 100;
      (this.grid as GridComponent).changeDataSource(data.slice(0, this.count + 100), this.newColumn as Object[]);
    }

}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

  • The Grid state persistence feature does not support the  changeDataSource method.
  • In this document, the above sample uses the local data for changeDataSource method. For those using a remote data source, refer to the FlexibleData resource.

See also