Aufbau eines Angular Data Grids mit Filterung

Kendo UI ermöglicht es dank einer riesigen Komponentbibliothek, von einer einfachen Idee zu einer vollwertigen App zu gelangen. Wir sprechen hier von weit über 100 Komponenten, die Sie nach Belieben in Ihre App einfügen können, egal ob Sie mit React, Angular oder Vue arbeiten – sie funktionieren einfach. Das liegt daran, dass Kendo UI tatsächlich ein Bündel von vier JavaScript-Bibliotheken ist, die jeweils nativ für ihr jeweiliges Framework entwickelt wurden. Aber mehr noch, wie wir bereits berichtet haben, sind die Komponenten extrem anpassbar, bis zu dem Punkt, an dem Sie sie beliebig gestalten können.

Aber das ist der eigentliche Clou von Kendo UI: Es kümmert sich um die schwere Arbeit. Das Styling ist zwar gut, aber was Kendo UI von anderen Komponenten-Frameworks unterscheidet, ist die Funktionalität, die es direkt von Anfang an bietet.

Fallbeispiel: Daten. Anstatt Ihre gesamte Zeit damit zu verbringen, den besten Weg zu finden, Daten an eine Komponente zu binden, ist das einfach gegeben, was Ihnen letztendlich erlaubt, mehr Zeit auf das Theming und die perfekte Benutzeroberfläche zu verwenden.

Vielleicht ist der beste Weg, um zu sehen, wie trivial Kendo UI die Arbeit mit Daten macht, es in Aktion zu sehen, also…

Werfen wir einen Blick auf die Angular Grid-Komponente

Dies ist die Kendo UI for Angular Data Grid-Komponente. Viele Daten, oder? Wir sehen eine Liste von Mitarbeitern, die Name, Bild und andere Informationen über jede Person anzeigt.

Wie alle Komponenten von Kendo UI gibt es nicht *die eine* Data Grid-Komponente, die sie für mehrere Frameworks adaptiert haben. Dieses Data Grid wurde von Grund auf neu entwickelt und speziell für Angular konzipiert, genau wie ihre KendoReact Grid-Komponente speziell für React entwickelt wurde.

Nun, normalerweise würde ein einfaches <table>-Element *vielleicht* ausreichen, oder? Aber Kendo UI for Angulars Data Grid ist vollgepackt mit Extras, die es zu einem viel besseren Benutzererlebnis machen. Beachten Sie sofort, dass es interaktive Funktionen bietet, wie z. B. den Export von Daten nach Excel oder PDF. Und es gibt eine ganze Reihe anderer nicht-trivialer Funktionen, für deren Implementierung sonst ein Großteil der Zeit und Mühe aufgewendet werden müsste.

Filterung

Hier ist eine für Sie: Filterung eines Datenrasters. Nehmen wir an, Sie sehen sich eine Mitarbeiterliste an, wie im obigen Data Grid-Beispiel, aber für ein Unternehmen mit Tausenden von Mitarbeitern. Es wäre schwierig, eine bestimmte Person zu finden, ohne eine Reihe von Funktionen zu berücksichtigen, wie z. B. Suche, sortierbare Spalten und Paginierung – all das leistet das Data Grid von Kendo UI.

Benutzer können die an das Angular Data Grid gebundenen Daten schnell parsen. Die Filterung kann über eine spezielle Filterzeile oder über ein Filtermenü erfolgen, das beim Klicken auf ein Filtersymbol in der Kopfzeile einer Spalte angezeigt wird. 

Die Dokumentation von Kendo UI ist großartig. So schnell bekommen wir das zum Laufen.

Zuerst die Komponente importieren

Keine Tricks hier – importieren Sie das Data Grid wie jede andere Komponente

import { Component, OnInit, ViewChild } from '@angular/core';
import { DataBindingDirective } from '@progress/kendo-angular-grid';
import { process } from '@progress/kendo-data-query';
import { employees } from './employees';
import { images } from './images';

Als nächstes die Komponente aufrufen

@Component({
  selector: 'my-app',
  template: `
    <kendo-grid>
      // ...
    </kendo-grid>
  `
})

Das ist natürlich unvollständig, denn als Nächstes müssen wir…

Die Komponente konfigurieren

Die Hauptfunktion, die wir aktivieren wollen, ist die Filterung, aber Kendo's Angular Grid akzeptiert alle möglichen Funktionsparameter, die auf einmal aktiviert werden können, von Sortierung und Gruppierung, bis hin zu Paginierung und Virtualisierung, um nur einige zu nennen.

Filterung? Es ist eine Einzeiler, um sie an die Spaltenüberschriften zu binden.

@Component({
  selector: 'my-app',
  template: `
    <kendo-grid
      [kendoGridBinding]="gridView"
      kendoGridSelectBy="id"
      [selectedKeys]="mySelection"
      [pageSize]="20"
      [pageable]="true"
      [sortable]="true"
      [groupable]="true"
      [reorderable]="true"
      [resizable]="true"
      [height]="500"
      [columnMenu]="{ filter: true }"
    >
      // etc.
    </kendo-grid>
  `
})

Anschließend den Rest der Benutzeroberfläche gestalten

Wir werden hier nicht ins Detail gehen. Die Dokumentation von Kendo UI enthält ein ausgezeichnetes Beispiel dafür, wie das aussieht. Dies ist ein guter Zeitpunkt, um sich auch um das Styling zu kümmern, das in einem styles-Parameter erfolgt. Auch hier ist das Theming einer Kendo UI-Komponente ein Kinderspiel.

Bis jetzt haben wir ein gut aussehendes Data Grid, bevor wir überhaupt tatsächliche Daten eingeben!

Und schließlich die Daten binden

Sie haben vielleicht sofort bemerkt, dass wir beim Importieren der Komponente auch die "Mitarbeiter"-Daten importiert haben. Wir müssen diese Daten an die Komponente binden. Nun, hier würde jemand wie ich in eine Ecke rennen und weinen, aber Kendo UI macht es ein wenig zu einfach, damit das passiert.

// Active the component on init
export class AppComponent implements OnInit {
  // Bind the employee data to the component
  @ViewChild(DataBindingDirective) dataBinding: DataBindingDirective;
  // Set the grid's data source to the employee data file
  public gridData: any[] = employees;
  // Apply the data source to the Grid component view
  public gridView: any[];

  public mySelection: string[] = [];

  public ngOnInit(): void {
    this.gridView = this.gridData;
  }
  // Start processing the data
  public onFilter(inputValue: string): void {
    this.gridView = process(this.gridData, {
      filter: {
        // Set the type of logic (and/or)
        logic: "or",
        // Defining filters and their operators
        filters: [
          {
            field: 'full_name',
            operator: 'contains',
            value: inputValue
          },
          {
            field: 'job_title',
            operator: 'contains',
            value: inputValue
          },
          {
            field: 'budget',
            operator: 'contains',
            value: inputValue
          },
          {
            field: 'phone',
            operator: 'contains',
            value: inputValue
          },
          {
            field: 'address',
            operator: 'contains',
            value: inputValue
          }
        ],
      }
    }).data;

    this.dataBinding.skip = 0;
  }

  // ...
}

Sehen wir uns diese Demo noch einmal an

---

Das ist eine ganze Menge Leistung mit minimalem Aufwand. Die Kendo UI APIs sind umfangreich und machen selbst die komplexeste Funktion kinderleicht.

Und wir sind noch nicht einmal auf all die anderen wunderbaren Extras eingegangen, die wir mit Kendo UI-Komponenten erhalten. Nehmen Sie Barrierefreiheit. Können Sie sich all die Überlegungen vorstellen, die erforderlich sind, um eine Komponente wie diese barrierefrei zu gestalten? Wie all die anderen leistungsstarken Funktionen, die wir erhalten, kümmert sich Kendo UI auch um die Barrierefreiheit für uns und übernimmt die schwere Arbeit, die erforderlich ist, um eine Tastatur-freundliche Benutzeroberfläche zu erstellen, die den WCAG 2.0 Alice-Standards entspricht und den Section 508- und WAI-ARIA-Standards entspricht.