Ricarica / aggiorna la griglia di Kendo

Come ricaricare o aggiornare una griglia di Kendo usando Javascript?

Spesso è necessario ricaricare o aggiornare una griglia dopo qualche tempo o dopo un'azione dell'utente.

Puoi usare

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

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

Non aggiorno mai.

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

da solo lavora sempre per me.

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

In un recente progetto, ho dovuto aggiornare la griglia dell'interfaccia utente di Kendo in base ad alcune chiamate, che si stavano verificando su alcune selezioni a discesa. Ecco cosa ho finito per usare:

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

Spero che questo ti farà risparmiare un po 'di tempo.

Nessuna di queste risposte ottiene il fatto che readrestituisce una promessa, il che significa che è possibile attendere il caricamento dei dati prima di chiamare l'aggiornamento.

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

Questo non è necessario se la tua acquisizione di dati è istantanea / sincrona, ma molto probabilmente proviene da un endpoint che non tornerà immediatamente.

Se non si desidera avere un riferimento alla griglia nel gestore, è possibile utilizzare questo codice:

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

Ciò aggiornerà la griglia, se è presente un pulsante di aggiornamento. Il pulsante può essere abilitato in questo modo:

[MVC GRID DECLARATION].Pageable(p=> p.Refresh(true))

In realtà, sono diversi:

• $('#GridName').data('kendoGrid').dataSource.read()aggiorna gli uidattributi della riga della tabella

• $('#GridName').data('kendoGrid').refresh() lascia lo stesso uid

Quello che devi fare è solo aggiungere un evento .Events (events => events.Sync ("KendoGridRefresh")) nel tuo codice di associazione kendoGrid. Non è necessario scrivere il codice di aggiornamento nel risultato ajax.

@(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" })          
  )

E puoi aggiungere la seguente funzione globale in qualsiasi tuo file .js. quindi, puoi chiamarlo per tutte le griglie kendo nel tuo progetto per aggiornare kendoGrid.

function KendoGridRefresh() {
    var grid = $('#document').data('kendoGrid');
    grid.dataSource.read();
}

Nel mio caso avevo un URL personalizzato a cui andare ogni volta; sebbene lo schema del risultato rimarrebbe lo stesso.
Ho usato il seguente:

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

È possibile utilizzare le righe seguenti

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

Per una funzione di aggiornamento automatico dai un'occhiata qui

Usando il seguente codice, chiamava automaticamente il metodo di lettura della griglia e riempiva nuovamente la griglia

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

Un modo alternativo per ricaricare la griglia è

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

Puoi sempre usare $('#GridName').data('kendoGrid').dataSource.read();. Non hai davvero bisogno di farlo .refresh();, .dataSource.read();farà il trucco.

Ora se vuoi aggiornare la tua griglia in un modo più angolare, puoi fare:

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

vm.grid.dataSource.read();`

O

vm.gridOptions.dataSource.read();

E non dimenticare di dichiarare l'origine dati come kendo.data.DataSourcetipo

Ho usato Jquery .ajax per ottenere dati. Per ricaricare i dati nella griglia corrente, devo fare quanto segue:

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

Voglio tornare alla pagina 1 quando aggiorno la griglia. Basta chiamare la funzione read () per rimanere sulla pagina corrente, anche se i nuovi risultati non hanno così tante pagine. La chiamata a .page (1) sull'origine dati aggiornerà l'origine dati E tornerà alla pagina 1 ma non riesce sulle griglie che non sono pagabili. Questa funzione gestisce entrambi:

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

Per eseguire un aggiornamento completo, in cui la griglia verrà nuovamente renderizzata insieme a una nuova richiesta di lettura, è possibile effettuare le seguenti operazioni:

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

Dove la proprietà può essere qualsiasi proprietà, ad esempio ordinabile

Basta scrivere sotto il codice

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

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

Puoi provare:

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

Se desideri che la griglia venga aggiornata automaticamente su base temporale, puoi utilizzare il seguente esempio con l'intervallo impostato su 30 secondi:

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

La configurazione / i dati predefiniti / aggiornati dei widget sono impostati per associarsi automaticamente a un'origine dati associata.

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

Puoi anche aggiornare la tua griglia inviando nuovi parametri all'azione Leggi e impostando le pagine come preferisci:

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

In questo esempio, l'azione di lettura della griglia viene richiamata dal valore di 2 parametri e dopo aver ottenuto il risultato il paging della griglia è nella pagina 1.

La via più semplice per aggiornare è usare la funzione refresh (). Che va come:

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

mentre puoi anche aggiornare l'origine dati usando questo comando:

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

Quest'ultimo ricarica effettivamente l'origine dati della griglia. L'uso di entrambi può essere fatto in base alle proprie esigenze e necessità.

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