Kendo Grid neu laden / aktualisieren

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.

Sie können verwenden

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

$('#GridName').data('kendoGrid').refresh(); <!--  refresh current UI -->

Ich aktualisiere nie.

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

allein arbeitet die ganze Zeit für mich.

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

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.

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.

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))

Eigentlich sind sie anders:

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

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

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();
}

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);
    });

Sie können die folgenden Zeilen verwenden

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

Eine automatische Aktualisierungsfunktion finden Sie hier

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

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

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

$("#GridName").getKendoGrid().dataSource.read();

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

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);
})

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();
     }
}

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

Schreiben Sie einfach den folgenden Code

$('.k-i-refresh').click();

$("#theidofthegrid").data("kendoGrid").dataSource.data([ ]);

Sie können versuchen:

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

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>

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();

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.

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.

$("#grd").data("kendoGrid").dataSource.read();