Kendo Grid neu laden / aktualisieren

171

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.

Oxon
quelle

Antworten:

314

Sie können verwenden

$('#GridName').data('kendoGrid').dataSource.read(); <!--  first reload data source -->

$('#GridName').data('kendoGrid').refresh(); <!--  refresh current UI -->
Jaimin
quelle
19
@zespri readfordert den Server an und lädt nur die Datenquelle neu. Es werden keine Änderungen in der Benutzeroberfläche vorgenommen. refreshrendert Elemente im Raster aus der aktuellen Datenquelle neu. Deshalb sind beide erforderlich.
Botis
37
Ich glaube nicht, dass Sie die Aktualisierung in der neuesten Version von Kendo benötigen. Da es ohne es
gut
2
Ja! Dies funktioniert auch mit TreeList: $ ('# Gantt'). Data ('kendoTreeList'). DataSource.read (); $ ('# Gantt'). Data ('kendoTreeList'). Refresh ();
Hernaldo Gonzalez
27
Entwickler sagen ausdrücklich, dass sie nach dem Lesen keine Aktualisierung aufrufen sollen: telerik.com/forums/show-progress-spinner-during-load-refresh, da dies möglicherweise die Anzeige der Fortschrittsanzeige verhindert.
Rustam Miftakhutdinov
2
Ich verwende eine neuere Version und muss nur .read aufrufen. Das Aufrufen von .refresh nach dem Lesen führt zu zwei Datenauslösungen zum Server.
Justin
59

Ich aktualisiere nie.

$('#GridName').data('kendoGrid').dataSource.read();

allein arbeitet die ganze Zeit für mich.

Purna Pilla
quelle
31
$('#GridName').data('kendoGrid').dataSource.read();
$('#GridName').data('kendoGrid').refresh();
Oxon
quelle
Danke, aber dies gibt den Fehler "TypeError: $ (...). Data (...) is undefined" aus. Ich habe auch auf vielen Seiten nachgesehen und verschiedene Varianten dieser Lösung ausprobiert, erhalte aber immer noch den gleichen Fehler. Irgendeine Idee?
Jack
Wenn Daten ('kendoGrid') null zurückgeben, ist höchstwahrscheinlich entweder die ID falsch oder Sie haben das Raster noch nicht erstellt. NB Sie erstellen das Raster mit $ (..). KendoGrid () und greifen später mit $ (). Data ('kendoGrid') darauf zu
Tony
29

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:

$.ajax({
        url: '/api/....',
        data: { myIDSArray: javascriptArrayOfIDs },
        traditional: true,
        success: function(result) {
            searchResults = result;
        }
    }).done(function() {
        var dataSource = new kendo.data.DataSource({ data: searchResults });
        var grid = $('#myKendoGrid').data("kendoGrid");
        dataSource.read();
        grid.setDataSource(dataSource);
    });

Hoffentlich sparen Sie dadurch etwas Zeit.

asuciu
quelle
genau das, wonach ich gesucht habe grid.setDataSource (dataSource); Für nicht entfernte Anrufe ist es das, was Sie verwenden müssen. Vielen Dank!
Rui Lima
15

Keine einzige dieser Antworten erhält die Tatsache, dass readein Versprechen zurückgegeben wird. Dies bedeutet, dass Sie warten können, bis die Daten geladen sind, bevor Sie die Aktualisierung aufrufen.

$('#GridId').data('kendoGrid').dataSource.read().then(function() {
    $('#GridId').data('kendoGrid').refresh();
});

Dies ist nicht erforderlich, wenn Ihr Datenabruf sofort / synchron erfolgt, aber höchstwahrscheinlich von einem Endpunkt stammt, der nicht sofort zurückkehrt.

Zachary Dow
quelle
1
Die Nutzung der integrierten Versprechensunterstützung ist sehr praktisch und entfernt auch einige Codezeilen. Ich würde wetten, dass dies die wahre Antwort sein sollte.
FoxDeploy
1
Danke Zachary! Ich habe ein paar Stunden mit diesem Problem verbracht - Ihre Lösung ist die einzige, die für mich funktioniert hat. Ich füge Zeilen über Ajax in einer Schleife in meine Grid-Datenbankquelle ein (eine Zeile nach der anderen). Nach Beendigung der Schleife funktionierte dataSource.read () nur manchmal. "dann" brauchte ich. Sehr geschätzt!
Antony D
9

Wenn Sie keinen Verweis auf das Raster im Handler haben möchten, können Sie diesen Code verwenden:

 $(".k-pager-refresh").trigger('click');

Dadurch wird das Raster aktualisiert, wenn eine Aktualisierungsschaltfläche vorhanden ist. Die Schaltfläche kann folgendermaßen aktiviert werden:

[MVC GRID DECLARATION].Pageable(p=> p.Refresh(true))
d.popov
quelle
9

Eigentlich sind sie anders:

  • $('#GridName').data('kendoGrid').dataSource.read()Aktualisiert die uidAttribute der Tabellenzeile

  • $('#GridName').data('kendoGrid').refresh() verlässt die gleiche UID

Ignas Paplauskas
quelle
8

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.

@(Html.Kendo().Grid<Models.DocumentDetail>().Name("document")
    .DataSource(dataSource => dataSource
    .Ajax()
    .PageSize(20)
    .Model(model => model.Id(m => m.Id))        
    .Events(events => events.Sync("KendoGridRefresh"))    
    )
      .Columns(columns =>
      {
          columns.Bound(c => c.Id).Hidden();              
          columns.Bound(c => c.UserName).Title(@Resources.Resource.lblAddedBy);                           
      }).Events(e => e.DataBound("onRowBound"))
          .ToolBar(toolbar => toolbar.Create().Text(@Resources.Resource.lblNewDocument))
          .Sortable()          
          .HtmlAttributes(new { style = "height:260px" })          
  )

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.

function KendoGridRefresh() {
    var grid = $('#document').data('kendoGrid');
    grid.dataSource.read();
}
Mailand
quelle
Aktualisieren Sie kendoGrid, indem Sie einfach Event hinzufügen.
Mailand
8

In meinem Fall hatte ich jedes Mal eine benutzerdefinierte URL; obwohl das Schema des Ergebnisses das gleiche bleiben würde.
Ich habe folgendes verwendet:

var searchResults = null;
$.ajax({
        url: http://myhost/context/resource,
        dataType: "json",
        success: function (result, textStatus, jqXHR) {
            //massage results and store in searchResults
            searchResults = massageData(result);
        }
    }).done(function() {
        //Kendo grid stuff
        var dataSource = new kendo.data.DataSource({ data: searchResults });
        var grid = $('#doc-list-grid').data('kendoGrid');
        dataSource.read();
        grid.setDataSource(dataSource);
    });
Amit Kapoor
quelle
5

Sie können die folgenden Zeilen verwenden

$('#GridName').data('kendoGrid').dataSource.read();
$('#GridName').data('kendoGrid').refresh();

Eine automatische Aktualisierungsfunktion finden Sie hier

Nitin Rawat
quelle
5

Mit dem folgenden Code wird automatisch die Lesemethode des Rasters aufgerufen und das Raster erneut gefüllt

$('#GridName').data('kendoGrid').dataSource.read();
Jatin Patel
quelle
5

Eine alternative Möglichkeit, das Raster neu zu laden, ist

$("#GridName").getKendoGrid().dataSource.read();
Essig
quelle
5

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:

<div kendo-grid="vm.grid" id="grid" options="vm.gridOptions"></div>

vm.grid.dataSource.read();`

ODER

vm.gridOptions.dataSource.read();

Vergessen Sie nicht, Ihre Datenquelle als kendo.data.DataSourceTyp zu deklarieren

Kristy Kavada
quelle
5

Ich habe Jquery .ajax verwendet, um Daten zu erhalten. Um die Daten in das aktuelle Raster neu zu laden, muss ich Folgendes tun:

.success (function (result){
    $("#grid").data("kendoGrid").dataSource.data(result.data);
})
oopsdazie
quelle
4

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:

function refreshGrid(selector) {
     var grid = $(selector);
     if (grid.length === 0)
         return;

     grid = grid.data('kendoGrid');
     if (grid.getOptions().pageable) {
         grid.dataSource.page(1);
     }
     else {
         grid.dataSource.read();
     }
}
AndyMcKenna
quelle
4

Um eine vollständige Aktualisierung durchzuführen, bei der das Raster zusammen mit einer neuen Leseanforderung neu gerendert wird, können Sie Folgendes tun:

 Grid.setOptions({
      property: true/false
    });

Wo Eigenschaft eine beliebige Eigenschaft sein kann, z. B. sortierbar

Faran Shabbir
quelle
3

Schreiben Sie einfach den folgenden Code

$('.k-i-refresh').click();
user2951849
quelle
1
Dies ist nur dann der Fall, wenn Sie das Raster mit pageable.refresh = true initialisiert haben. Dies ist nicht standardmäßig der Fall. Auf
jeden Fall
3
$("#theidofthegrid").data("kendoGrid").dataSource.data([ ]);
Brownbagger11
quelle
3

Sie können versuchen:

    $('#GridName').data('kendoGrid').dataSource.read();
$('#GridName').data('kendoGrid').refresh();
Kunvar Singh
quelle
3

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:

   <script type="text/javascript" language="javascript">
      $(document).ready(function () {
         setInterval(function () {
            var grid = $("#GridName").data("kendoGrid");
            grid.dataSource.read();
         }, 30000);
      });
   </script>
sonyisda1
quelle
2

Die standardmäßige / aktualisierte Konfiguration / Daten der Widgets werden so eingestellt, dass sie automatisch an eine zugeordnete DataSource gebunden werden.

$('#GridId').data('kendoGrid').dataSource.read();
$('#GridId').data('kendoGrid').refresh();
Parvezalam Khan
quelle
War etwas mit der akzeptierten Antwort (ab 2013) nicht in Ordnung, da Ihre Antwort so ähnlich aussieht? Sie sollten das zumindest irgendwie kommentieren - und die Kommentare in dieser Antwort sagen sogar, dass Sie nicht anrufen solltenrefresh
James Z
2

Sie können Ihr Raster auch aktualisieren, indem Sie neue Parameter an die Aktion "Lesen" senden und die Seiten nach Ihren Wünschen einstellen:

var ds = $("#gridName").data("kendoGrid").dataSource;
ds.options.page = 1;
var parameters = {
    id: 1
    name: 'test'
}
ds.read(parameters);

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.

Sajadre
quelle
1

Der einfachste Weg zum Aktualisieren ist die Verwendung der Funktion refresh (). Welches geht wie:

$('#gridName').data('kendoGrid').refresh();

Sie können die Datenquelle auch mit diesem Befehl aktualisieren:

$('#gridName').data('kendoGrid').dataSource.read();

Letzteres lädt tatsächlich die Datenquelle des Rasters neu. Die Verwendung von beiden kann je nach Bedarf und Anforderung erfolgen.

Jishuraajnath
quelle
-2
$("#grd").data("kendoGrid").dataSource.read();
Ashraful Islam
quelle
Dies ist zwar mindestens kein 1to1-Kopierpaste, bietet jedoch keine zusätzlichen Informationen. Fast jede Antwort in diesem Beitrag mit mehr als einer Gegenstimme wird empfohlen mitdataSource.read()
Fabian N.