This library is a sophisticated tool designed to streamline the integration of dynamic and responsive tables in Angular applications, leveraging the capabilities of @progress/kendo-angular-grid. It simplifies the creation of grid components by providing structured bindings for pagination, sorting, and filtering, alongside generating a query string for backend communication based on a simplified version of the OData protocol. This library is specifically crafted to work in tandem with @bleed-believer/kendo-grid-server, ensuring a seamless front-to-back data flow.
- Simplifies dynamic data table implementations in Angular applications.
- Supports pagination, sorting, and filtering with minimal setup.
- Generates backend-compatible query strings using a custom OData-like protocol.
- Designed to be used with
@progress/kendo-angular-gridfor front-end components and@bleed-believer/kendo-grid-serverfor backend data handling. - Compatible with Angular 17.
To integrate this library into your project, run the following command:
npm install --save @bleed-believer/kendo-grid-clientEnsure that you have @progress/kendo-angular-grid and @progress/kendo-data-query installed in your project, as they are peer dependencies required for this library to function correctly. You can install them using this command:
npx ng add @progress/kendo-angular-gridBelow is a quick overview of how to use @bleed-believer/kendo-grid-client in your Angular application. This example assumes you have basic familiarity with Angular and its service/component architecture.
First, define models that represent your data structures. These models will be used by both the service for fetching data and the grid component for displaying it.
// category.entity.ts
export interface Category {
id: number;
cod: string;
descript: string;
dummies?: Dummy[];
}
// dummy.entity.ts
export interface Dummy {
id: number;
text: string;
value: number;
date: Date;
category?: Category;
}Create a service that fetches data from the backend. Use GridViewRequest for the request and expect a GridView response.
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Dummy } from '@entities/dummy.entity';
import { OData, GridView, GridViewRequest } from '@bleed-believer/kendo-grid-client';
import { firstValueFrom } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class DummyService {
headers = {
'content-type': 'application/json; charset=utf-8'
} as const;
constructor(
private _httpClient: HttpClient,
) { }
async get(req: GridViewRequest): Promise<GridView<Dummy>> {
const qs = new OData(req).stringify(true);
const ob = this._httpClient.get<GridView<Dummy>>(`/dummy/raw${qs}`, {
headers: this.headers,
responseType: 'json'
});
// Waiting to get the response
const res = await firstValueFrom(ob);
// Example of data parsing logic, showcasing
// the flexibility of handling data.
res.data.forEach(x => {
const [ year, month, day ] = (x.date)
.toString()
.split('-')
.map(n => parseInt(n));
x.date = new Date(year, month -2, day);
})
return res;
}
}Implement a grid component by extending GridComponent from @bleed-believer/kendo-grid-client. Override necessary methods like getData to fetch data using the service.
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core';
import { GridModule, PagerSettings } from '@progress/kendo-angular-grid';
import { GridView, GridComponent } from '@bleed-believer/kendo-grid-client';
import * as dateFns from 'date-fns';
import { DummyService } from '@services/dummy';
import { Dummy } from '@entities/dummy.entity';
@Component({
selector: 'app-table-demo',
standalone: true,
imports: [
GridModule
],
templateUrl: './table-demo.component.html',
styleUrl: './table-demo.component.scss',
changeDetection: ChangeDetectionStrategy.OnPush
})
export class TableDemoComponent extends GridComponent<Dummy> implements OnInit {
override pageable: PagerSettings = {
type: 'numeric',
pageSizes: [ 10, 50, 100, 1000 ]
};
constructor(
private _dummyServ: DummyService,
changeDet: ChangeDetectorRef,
) {
super(changeDet);
}
ngOnInit(): void {
this.update();
}
formatDate(dummy: Dummy): string {
return dateFns.format(dummy.date, 'yyyy/MM/dd');
}
override async getData(): Promise<GridView<Dummy> | null> {
try {
// Fetch the data using the service
const resp = await this._dummyServ.get(this.dataRequest);
return resp;
} catch (err) {
// Error handling can be customized here.
console.error(err);
return null;
}
}
}Utilize kendo-grid in your component's template, binding it to your component's data properties and event handlers.
<kendo-grid
[data]="this.data"
[sort]="this.sort"
[skip]="this.skip"
[filter]="this.filter"
[loading]="this.loading"
[pageable]="this.pageable"
[pageSize]="this.pageSize"
[sortable]="this.sortable"
[filterable]="this.filterable"
(pageChange)="this.onPageChange($event)"
(sortChange)="this.onSortChange($event)"
(filterChange)="this.onFilterChange($event)">
<kendo-grid-column
title="Text"
field="text">
</kendo-grid-column>
<kendo-grid-column
text="Computed"
field="calc"
filter="numeric">
</kendo-grid-column>
<kendo-grid-column
text="Date"
field="date"
filter="date">
<ng-template kendoGridCellTemplate let-item>
{{ this.formatDate(item) }}
</ng-template>
</kendo-grid-column>
<kendo-grid-column
title="Category cod"
field="categoryCod">
</kendo-grid-column>
<kendo-grid-column
title="Category descripct"
field="categoryDescript">
</kendo-grid-column>
</kendo-grid>@bleed-believer/kendo-grid-client offers a powerful and elegant solution for integrating complex grid functionalities in your Angular applications with minimal overhead. By following the steps outlined above, you can quickly set up dynamic tables that are both responsive and efficient.