Refresh the Data Source of Angular Grid Component

Refresh the Data Source of Angular Grid Component

The data bound to a Smart.Grid can be refreshed by manipulating its dataSource property and calling the related methods provided by it.

Records can, for example, be added or removed from the Grid Angular component by pressing external buttons.

In app.component.html, the Grid and two Smart.Buttons are defined:

<smart-grid [dataSource]="dataSource" [columns]="columns" #grid id="grid"></smart-grid>

<smart-button #button id="addRecord" #addRecord (onClick)="addRecordOnClick()">Add record</smart-button>
<smart-button #button id="removeRecord" #removeRecord (onClick)="removeRecordOnClick()">Remove record</smart-button>

In app.component.ts, the dataSource methods for adding (insert) and removing (removeAt) are called:

addRecordOnClick(): void {
	this.grid.dataSource.insert(0, { firstName: 'Stephen', lastName: 'Sanderson', productName: 'Diamonds', quantity: 6, price: 10000, total: 60000 });
}

removeRecordOnClick(): void {
	this.grid.dataSource.removeAt(0);
}

A live version and the full source code of this functionality is shown in the demo Refresh the Data Source of Angular Grid Component