Key Features of Angular Data Grid

Introduction

The Angular Data Grid (such as Kendo UI for Angular) provides a variety of key features that enhance the display and manipulation of data within a grid structure. Here, I’ll outline some of these key features along with examples to illustrate how they can be implemented.

Key Features

Sorting
Filtering
Paging
Editing
Grouping
Export to Excel and PDF
Responsive Design
Selection

Let's build an Angular application incorporating these features using Kendo UI for Angular.

1. Setup and Basic Configuration

For Setup use the following article Click Here.

2. Data and Component Setup

app.component.ts

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  public gridData: any[] = [
    { ProductID: 1, ProductName: 'Chai', Category: 'Beverages', Price: 18 },
    { ProductID: 2, ProductName: 'Chang', Category: 'Beverages', Price: 19 },
    { ProductID: 3, ProductName: 'Aniseed Syrup', Category: 'Condiments', Price: 10 },
    // Add more data as needed
  ];
  // Additional properties for paging
  public pageSize = 5;
  public skip = 0;
}

app.component.html

<kendo-grid
  [data]="gridData"
  [sortable]="true"
  [pageable]="true"
  [pageSize]="pageSize"
  [skip]="skip"
  [filterable]="true"
  [groupable]="true"
  [editable]="true"
  [selectable]="true">
  <kendo-grid-column field="ProductID" title="ID" width="40"></kendo-grid-column>
  <kendo-grid-column field="ProductName" title="Product Name" width="250"></kendo-grid-column>
  <kendo-grid-column field="Category" title="Category" width="150"></kendo-grid-column>
  <kendo-grid-column field="Price" title="Price" width="120" filter="numeric" editor="numeric"></kendo-grid-column>
</kendo-grid>

3. Adding Sorting

Sorting is enabled by setting the [sortable] property to true. This allows users to sort columns by clicking on the column headers.

4. Adding Filtering

Filtering is enabled by setting the [filterable] property to true. This adds a filter row to the top of the grid where users can enter filter criteria.

5. Adding Paging

Paging is enabled by setting the [pageable] property to true and configuring the [pageSize] and [skip] properties.

6. Adding Editing

Editing functionality is enabled by setting the [editable] property to true. This allows inline editing of cells. You can further configure different types of editors for each column.

7. Adding Grouping

Grouping is enabled by setting the [groupable] property to true. Users can drag and drop column headers to group the data by those columns.

8. Adding Selection

Selection is enabled by setting the [selectable] property to true. This allows users to select rows in the grid.

9. Adding Export to Excel and PDF

To enable export functionalities, you need to add the necessary Kendo UI modules and use the respective components.

First, install the required packages.

npm install --save @progress/kendo-angular-excel-export @progress/kendo-angular-pdf-export

Then, import these modules into your app.module.ts.

import { ExcelExportModule } from '@progress/kendo-angular-excel-export';
import { PDFExportModule } from '@progress/kendo-angular-pdf-export';
@NgModule({
  imports: [
    ExcelExportModule,
    PDFExportModule,
    // other imports
  ],
})
export class AppModule { }

Finally, add buttons and functionalities to export the grid data.

app.component.html

<button (click)="exportToExcel()">Export to Excel</button>
<button (click)="exportToPDF()">Export to PDF</button>
<kendo-grid
  [data]="gridData"
  [sortable]="true"
  [pageable]="true"
  [pageSize]="pageSize"
  [skip]="skip"
  [filterable]="true"
  [groupable]="true"
  [editable]="true"
  [selectable]="true">
  <kendo-grid-column field="ProductID" title="ID" width="40"></kendo-grid-column>
  <kendo-grid-column field="ProductName" title="Product Name" width="250"></kendo-grid-column>
  <kendo-grid-column field="Category" title="Category" width="150"></kendo-grid-column>
  <kendo-grid-column field="Price" title="Price" width="120" filter="numeric" editor="numeric"></kendo-grid-column>
</kendo-grid>
<kendo-excelexport [data]="gridData" #exporter></kendo-excelexport>
<kendo-pdf-export [paperSize]="'A4'" #pdfExporter>
  <kendo-grid [data]="gridData">
    <kendo-grid-column field="ProductID" title="ID" width="40"></kendo-grid-column>
    <kendo-grid-column field="ProductName" title="Product Name" width="250"></kendo-grid-column>
    <kendo-grid-column field="Category" title="Category" width="150"></kendo-grid-column>
    <kendo-grid-column field="Price" title="Price" width="120" filter="numeric" editor="numeric"></kendo-grid-column>
  </kendo-grid>
</kendo-pdf-export>

app.component.ts

import { ViewChild } from '@angular/core';
import { ExcelExportComponent } from '@progress/kendo-angular-excel-export';
import { PDFExportComponent } from '@progress/kendo-angular-pdf-export';
export class AppComponent {
  @ViewChild('exporter', { static: false }) public exporter: ExcelExportComponent;
  @ViewChild('pdfExporter', { static: false }) public pdfExporter: PDFExportComponent;
  public exportToExcel(): void {
    this.exporter.save();
  }
  public exportToPDF(): void {
    this.pdfExporter.save();
  }
}

Conclusion

These steps demonstrate how to enable key features of the Angular Data Grid, including sorting, filtering, paging, editing, grouping, selecting, and exporting data. This setup provides a robust grid component that can handle a variety of data manipulation and display requirements. For more advanced configurations and features, refer to the Kendo UI for Angular documentation.