KendoUI – Progress Animation manuell ein- und ausschalten

Beim Kendo Grid dauert das Rendern bei großen Datenmengen recht lange. Wie man die Progress-Animation startet und wieder stoppt, zeigen wir in diesem Beitrag.

So ganz warm werde ich ja mit Kendo UI nicht. Die offiziellen Beispiele sind zwar alle ganz hübsch und elegant, doch weichen die Anforderungen davon ab, kommt man ganz schnell ins Frickeln. Heute brauche ich eine Progress-Animation, die anzeigt, dass die Daten für das Grid gerade geladen werden. Die Animation soll dann gestoppt werden, wenn das Rendern abgeschlossen ist.

Einschalten ist ganz einfach. Folgende Zeile fügt man dort hinzu, wo man mit dem Datenabruf beginnt.

kendo.ui.progress(element, true);

Jetzt zum Ausschalten. Da genügt es nicht, den Progress anzuhalten, wenn die Daten abgerufen wurden. Hier müssen wir uns ans Event dataBound hängen, das ausgelöst wird, wenn das Widget an die Daten aus seiner Datenquelle gebunden wurde.

gridOptions = {
	scrollable: true,
	sortable: true,
	pageable: {
		pageSizes: [20, 50, 100, 500, 1000, 'all'],
		buttonCount: 3
	}
	columns: [
		{ field: "Column 1" },
		{ field: "Column 2" }
	],columns: [],
	dataSource: {...}
	dataBound: (event) => {
		if (event.sender.columns.length > 0) {
			event.sender.initialDataReady = true;
		}
		kendo.ui.progress(kendoTable, false);
	}
}

Je nach geladenem Theme wird jetzt eine entsprechende Ladeanimation als Overlay über dem übergebenen Element angezeigt. In unserem Beispiel wird die Grafik loading-image.gif aus dem Bootstrap-Theme von Kendo benutzt.

Wie wir das Gif einfach über CSS tauschen können, zeigen wir im nächsten Beitrag.

Ich hoffe wie immer, diese erstbeste Lösung war hilfreich.