Wie kann ich ein Kendo Grid mit Javascript neu laden oder aktualisieren?
Es ist häufig erforderlich, ein Raster nach einer bestimmten Zeit oder nach einer Benutzeraktion neu zu laden oder zu aktualisieren.
kendo-ui
kendo-grid
Oxon
quelle
quelle
read
fordert den Server an und lädt nur die Datenquelle neu. Es werden keine Änderungen in der Benutzeroberfläche vorgenommen.refresh
rendert Elemente im Raster aus der aktuellen Datenquelle neu. Deshalb sind beide erforderlich.Ich aktualisiere nie.
allein arbeitet die ganze Zeit für mich.
quelle
quelle
In einem kürzlich durchgeführten Projekt musste ich das Kendo UI Grid basierend auf einigen Aufrufen aktualisieren, die bei einigen Dropdown-Auswahlen auftraten. Folgendes habe ich letztendlich verwendet:
Hoffentlich sparen Sie dadurch etwas Zeit.
quelle
Keine einzige dieser Antworten erhält die Tatsache, dass
read
ein Versprechen zurückgegeben wird. Dies bedeutet, dass Sie warten können, bis die Daten geladen sind, bevor Sie die Aktualisierung aufrufen.Dies ist nicht erforderlich, wenn Ihr Datenabruf sofort / synchron erfolgt, aber höchstwahrscheinlich von einem Endpunkt stammt, der nicht sofort zurückkehrt.
quelle
Wenn Sie keinen Verweis auf das Raster im Handler haben möchten, können Sie diesen Code verwenden:
Dadurch wird das Raster aktualisiert, wenn eine Aktualisierungsschaltfläche vorhanden ist. Die Schaltfläche kann folgendermaßen aktiviert werden:
quelle
Eigentlich sind sie anders:
$('#GridName').data('kendoGrid').dataSource.read()
Aktualisiert dieuid
Attribute der Tabellenzeile$('#GridName').data('kendoGrid').refresh()
verlässt die gleiche UIDquelle
Sie müssen lediglich ein Ereignis hinzufügen. Ereignisse (events => events.Sync ("KendoGridRefresh")) in Ihrem kendoGrid-Bindungscode. Der Aktualisierungscode muss nicht in das Ajax-Ergebnis geschrieben werden.
Und Sie können die folgende globale Funktion in jede Ihrer .js-Dateien einfügen. Sie können es also für alle Kendo-Grids in Ihrem Projekt aufrufen, um das KendoGrid zu aktualisieren.
quelle
In meinem Fall hatte ich jedes Mal eine benutzerdefinierte URL; obwohl das Schema des Ergebnisses das gleiche bleiben würde.
Ich habe folgendes verwendet:
quelle
Sie können die folgenden Zeilen verwenden
Eine automatische Aktualisierungsfunktion finden Sie hier
quelle
Mit dem folgenden Code wird automatisch die Lesemethode des Rasters aufgerufen und das Raster erneut gefüllt
quelle
Eine alternative Möglichkeit, das Raster neu zu laden, ist
quelle
Sie können immer verwenden
$('#GridName').data('kendoGrid').dataSource.read();
. Sie müssen danach nicht wirklich.refresh();
,.dataSource.read();
wird den Trick tun.Wenn Sie Ihr Raster nun eckiger aktualisieren möchten, können Sie Folgendes tun:
ODER
Vergessen Sie nicht, Ihre Datenquelle als
kendo.data.DataSource
Typ zu deklarierenquelle
Ich habe Jquery .ajax verwendet, um Daten zu erhalten. Um die Daten in das aktuelle Raster neu zu laden, muss ich Folgendes tun:
quelle
Ich möchte zu Seite 1 zurückkehren, wenn ich das Raster aktualisiere. Wenn Sie nur die Funktion read () aufrufen, bleiben Sie auf der aktuellen Seite, auch wenn die neuen Ergebnisse nicht so viele Seiten enthalten. Durch Aufrufen von .page (1) in der Datenquelle wird die Datenquelle aktualisiert UND zu Seite 1 zurückgekehrt, schlägt jedoch in nicht pagbaren Rastern fehl. Diese Funktion behandelt beide:
quelle
Um eine vollständige Aktualisierung durchzuführen, bei der das Raster zusammen mit einer neuen Leseanforderung neu gerendert wird, können Sie Folgendes tun:
Wo Eigenschaft eine beliebige Eigenschaft sein kann, z. B. sortierbar
quelle
Schreiben Sie einfach den folgenden Code
quelle
quelle
Sie können versuchen:
quelle
Wenn Sie möchten, dass das Raster zeitgesteuert automatisch aktualisiert wird, können Sie das folgende Beispiel verwenden, dessen Intervall auf 30 Sekunden festgelegt ist:
quelle
Die standardmäßige / aktualisierte Konfiguration / Daten der Widgets werden so eingestellt, dass sie automatisch an eine zugeordnete DataSource gebunden werden.
quelle
refresh
Sie können Ihr Raster auch aktualisieren, indem Sie neue Parameter an die Aktion "Lesen" senden und die Seiten nach Ihren Wünschen einstellen:
In diesem Beispiel wird die Leseaktion des Rasters mit 2 Parameterwerten aufgerufen, und nachdem das Ergebnis abgerufen wurde, befindet sich das Paging des Rasters auf Seite 1.
quelle
Der einfachste Weg zum Aktualisieren ist die Verwendung der Funktion refresh (). Welches geht wie:
Sie können die Datenquelle auch mit diesem Befehl aktualisieren:
Letzteres lädt tatsächlich die Datenquelle des Rasters neu. Die Verwendung von beiden kann je nach Bedarf und Anforderung erfolgen.
quelle
quelle
dataSource.read()