© istockphoto.com/real444
Windows Developer
Das Grid von Kendo UI mit AngularJS nutzen

Gitter und Winkel


Die populäre Komponentenbibliothek Kendo UI aus dem Hause Telerik bietet ein äußerst flexibles Grid für HTML-basierte Anwendungen. Mithilfe von bereitgestellten Direktiven lässt es sich komfortabel in AngularJS-Projekte einbinden.

Video: Wiederverwendbare JavaScript-Komponenten mit Web Components und Angular 2.0 – Deep Dive mit Live Coding

Kaum eine Geschäftsanwendung kommt ohne ein Grid zur Präsentation tabellarischer Daten aus. Aufgrund der damit einhergehenden Komplexität stützen sich die meisten Teams auf Grid-Implementierungen von Drittanbietern. Eine solche findet sich in der Komponentenbibliothek Kendo UI [1]. Sie bietet eine Vielzahl an Möglichkeiten, wie Sortieren, Gruppieren und verschiedene Ansätze zum Editieren von Einträgen. Dieser Artikel zeigt, wie Grid in AngularJS-Projekten genutzt werden kann. Detaillierte Beschreibungen zur gesamten Bibliothek sind im Demokatalog direkt auf der Seite des Herstellers zu finden.

Beispielprojekt

Das hier präsentierte Beispiel zur Demonstration des Grids zeigt eine Flugverwaltung. Sie stellt Flüge in einer Tabelle dar, die sich direkt aus dieser heraus verändern bzw. ergänzen lassen (Abb. 1, Abb. 2 und Abb. 3). Der Benutzer kann die geladenen Flüge sortieren, gruppieren und filtern.

steyer_kendoui_1.tif_fmt1.jpgAbb. 1: Ansicht des fertigen Kendo-Beispiels
steyer_kendoui_2.tif_fmt1.jpgAbb. 2: Gruppieren nach Abflugort
steyer_kendoui_3.tif_fmt1.jpgAbb. 3: Filtern nach Abflugort

In Listing 1 ist die modellierte Flugentität FlightEntity in Form eines einfachen JavaScript-Objekts dargestellt.

Listing 1

var FlightEntity = function(name, departure, destination, startTime, endTime, passengersCount) { var self = this; //Auto-generated self._id;  self.name = name; self.departure = departure; self.destination = destination; self.startTime = startTime; self.endTime = endTime; self.passengersCount = passengersCount; };

Einbindung von Kendo-Komponenten mittels Direktiven

Im Rahmen der Entwicklung der Komponente ist eigens für AngularJS ein Satz von Direktiven entwickelt worden, um den deklarativen Entwicklungsansatz von AngularJS zu unterstützen. Für die Nutzung ist die Kendo Library (kendo.all.min.js) sowie das Direktivenpaket (angular-kendo.js) in der Datei index.htm zu laden (Listing 2). Optional dazu lässt sich ein Sprachpaket (in diesem Fall für Deutsch) vom GitHub-Projekt Kendo Global [1] einbinden. Wichtig ist zu beachten, dass die Einbindung nach dem Referenzieren der angular.js-Datei zu erfolgen hat, da es sonst zu Abhängigkeitsfehlern kommen kann.

 [...] <script src="PFAD_ZU/jquery/jquery.m...
Windows Developer
Das Grid von Kendo UI mit AngularJS nutzen

Gitter und Winkel

Die populäre Komponentenbibliothek Kendo UI aus dem Hause Telerik bietet ein äußerst flexibles Grid für HTML-basierte Anwendungen. Mithilfe von bereitgestellten Direktiven lässt es sich komfortabel in AngularJS-Projekte einbinden.

Manfred Steyer


Die populäre Komponentenbibliothek Kendo UI aus dem Hause Telerik bietet ein äußerst flexibles Grid für HTML-basierte Anwendungen. Mithilfe von bereitgestellten Direktiven lässt es sich komfortabel in AngularJS-Projekte einbinden.

Video: Wiederverwendbare JavaScript-Komponenten mit Web Components und Angular 2.0 – Deep Dive mit Live Coding

Kaum eine Geschäftsanwendung kommt ohne ein Grid zur Präsentation tabellarischer Daten aus. Aufgrund der damit einhergehenden Komplexität stützen sich die meisten Teams auf Grid-Implementierungen von Drittanbietern. Eine solche findet sich in der Komponentenbibliothek Kendo UI [1]. Sie bietet eine Vielzahl an Möglichkeiten, wie Sortieren, Gruppieren und verschiedene Ansätze zum Editieren von Einträgen. Dieser Artikel zeigt, wie Grid in AngularJS-Projekten genutzt werden kann. Detaillierte Beschreibungen zur gesamten Bibliothek sind im Demokatalog direkt auf der Seite des Herstellers zu finden.

Beispielprojekt

Das hier präsentierte Beispiel zur Demonstration des Grids zeigt eine Flugverwaltung. Sie stellt Flüge in einer Tabelle dar, die sich direkt aus dieser heraus verändern bzw. ergänzen lassen (Abb. 1, Abb. 2 und Abb. 3). Der Benutzer kann die geladenen Flüge sortieren, gruppieren und filtern.

steyer_kendoui_1.tif_fmt1.jpgAbb. 1: Ansicht des fertigen Kendo-Beispiels
steyer_kendoui_2.tif_fmt1.jpgAbb. 2: Gruppieren nach Abflugort
steyer_kendoui_3.tif_fmt1.jpgAbb. 3: Filtern nach Abflugort

In Listing 1 ist die modellierte Flugentität FlightEntity in Form eines einfachen JavaScript-Objekts dargestellt.

Listing 1

var FlightEntity = function(name, departure, destination, startTime, endTime, passengersCount) { var self = this; //Auto-generated self._id;  self.name = name; self.departure = departure; self.destination = destination; self.startTime = startTime; self.endTime = endTime; self.passengersCount = passengersCount; };

Einbindung von Kendo-Komponenten mittels Direktiven

Im Rahmen der Entwicklung der Komponente ist eigens für AngularJS ein Satz von Direktiven entwickelt worden, um den deklarativen Entwicklungsansatz von AngularJS zu unterstützen. Für die Nutzung ist die Kendo Library (kendo.all.min.js) sowie das Direktivenpaket (angular-kendo.js) in der Datei index.htm zu laden (Listing 2). Optional dazu lässt sich ein Sprachpaket (in diesem Fall für Deutsch) vom GitHub-Projekt Kendo Global [1] einbinden. Wichtig ist zu beachten, dass die Einbindung nach dem Referenzieren der angular.js-Datei zu erfolgen hat, da es sonst zu Abhängigkeitsfehlern kommen kann.

 [...] <script src="PFAD_ZU/jquery/jquery.m...

Angebote für Teams

Für Firmen haben wir individuelle Teamlizenzen. Wir erstellen Ihnen gerne ein passendes Angebot.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang