Kendo UI – Eine kleine Einführung

Kendo UI – Eine kleine Einführung

Bei der Web-Entwicklung erreicht man früher oder später den Punkt, an dem man feststellt, dass bestimmte Funktionen immer wieder gebraucht werden.
So ist eines der am häufigsten verlangten Features ein sortier- und filterbares Datengrid, in welchem man bevorzugterweise blättern kann. Zusätzlich soll es die Option bieten, die Daten entweder beim Client zwischenzuspeichern oder diese bei Bedarf ohne Zwischenspeicherung direkt vom Server zu holen. Will man dann dieses Widget für den internationalen Markt erstellen, sollte es natürlich auch internationalisiert werden.
Schon an dieser Stelle ist abzusehen, dass die Entwicklung eines solchen Datengrids sehr aufwendig werden kann, wenn man all diese „Sub“-Features unterstützen möchte.
Dies ist aber auch der Zeitpunkt, an dem jemandem einfällt, dass ein Cross-Browser-Upload sehr nützlich wäre und – wenn man schon dabei ist – man auch ein Datum-Input hinzufügen könne, der auch noch im IE8 funktioniert.

Glücklicherweise bietet Kendo UI für nahezu all diese Anforderungen entweder schon fertige Widgets oder die Möglichkeit die vorhandenen nach eigenem Bedarf anzupassen.
Ich hatte die Gelegenheit Kendo UI in realen Projekten zu nutzen und will hier an einem kurzen Beispiel zeigen, wie man diese Library in seinem eigenen Projekt einsetzen kann.

Wichtige Voraussetzung für Kendo UI ist jQuery, welches in der Library bereitgestellt wird. Generell benötigt man jQuery mindestens in der Version 1.9.1+.
Neben jQuery gibt es zwei weitere optionale Dependencies:

  • Für das Feature von Excel- und PDF-Export aus Grids benötigt man jszip (ebenfalls in der Library vorhanden).
  • Möchte man Kendo UI in einem Projekt mit Bootstrap-Layout nutzen, so sollte man auch die Kendo UI Bootstrap Styles einbinden.

Generell bietet es sich an, die Dependencies in folgender Reihenfolge einzubinden:

  1. JSZip
  2. jQuery
  3. Kendo UI
<script src="jszip.js"></script>
<script src="jquery.min.js"></script>
<script src="kendo.min.js"></script>

Ist dies erledigt, so kann man schon loslegen und Kendo UI nutzen.
Hier einmal das Datum-Input als Beispiel:

<script type="text/javascript">
    (function ($) {
        // Erstellt aus einem Input einen Date-Picker
        $('input#BirthDate').kendoDatePicker();
    })(jQuery);
</script>

Im Vergleich zur Eigenentwicklung ist die Nutzung von Kendo UI simpel und bietet eine Erleichterung.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Time limit is exhausted. Please reload the CAPTCHA.