BoldSignEasily embed eSignatures in your .NET applications. Free sandbox with native SDK available.
<ejs-grid #grid [dataSource]='data' *ngIf='data.length'>
...
</ejs-grid> |
App.component.ts
...
public ngOnInit(): void {
this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Normal' };
this.toolbar = ['Add', 'Edit', 'Delete', 'Update', 'Cancel'];
this.groupOptions = { columns: ['id'] };
const state: any = { skip: 0, take: 12, group: (this.groupOptions as any).columns }; // passed the initial group columns to service
this.crudService.execute(state);
}
Crud.service.ts
import { DataUtil } from '@syncfusion/ej2-data';
import { isNullOrUndefined } from '@syncfusion/ej2-base';
...
getAllData( state ?: any): Observable<any[]> {
return this.http.get<Customer[]>(this.customersUrl)
.map((response: any) => (<any>{
// 'DataUtil.group' groups the input data based on the field name
result: state.take > 0 ? !isNullOrUndefined(state.group) ? DataUtil.group(response.slice(0, state.take), state.group[0]) : response.slice(0, state.take) : response, // Grouped the datasource by using DataUtil.group method and returned the grouped records to Grid
count: response.length
}))
.map((data: any) => data);
}
|