Ponowne ładowanie / odświeżanie siatki Kendo

Jak przeładować lub odświeżyć Kendo Grid za pomocą Javascript?

Często wymagane jest ponowne załadowanie lub odświeżenie siatki po pewnym czasie lub po akcji użytkownika.

Możesz użyć

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

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

Nigdy nie odświeżam.

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

sama pracuje dla mnie cały czas.

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

W ostatnim projekcie musiałem zaktualizować Kendo UI Grid na podstawie niektórych wywołań, które miały miejsce w niektórych menu rozwijanych. Oto, czego ostatecznie użyłem:

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

Miejmy nadzieję, że pozwoli to zaoszczędzić trochę czasu.

Żadna z tych odpowiedzi nie otrzymuje faktu, że readzwraca obietnicę, co oznacza, że ​​możesz poczekać na załadowanie danych przed wywołaniem odświeżania.

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

Jest to niepotrzebne, jeśli pobieranie danych jest natychmiastowe / synchroniczne, ale jest bardziej niż prawdopodobne, że pochodzi z punktu końcowego, który nie wróci natychmiast.

Jeśli nie chcesz mieć odniesienia do siatki w module obsługi, możesz użyć tego kodu:

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

Spowoduje to odświeżenie siatki, jeśli jest przycisk odświeżania. Przycisk można włączyć w następujący sposób:

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

Właściwie są różne:

• $('#GridName').data('kendoGrid').dataSource.read()odświeża uidatrybuty wiersza tabeli

• $('#GridName').data('kendoGrid').refresh() pozostawia ten sam uid

Wystarczy, że dodasz zdarzenie .Events (events => events.Sync ("KendoGridRefresh")) w kodzie powiązania kendoGrid. Nie ma potrzeby pisania kodu odświeżającego w wyniku 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" })          
  )

I możesz dodać następującą funkcję Global w dowolnym pliku .js. więc możesz wywołać to dla wszystkich siatek kendo w twoim projekcie, aby odświeżyć kendoGrid.

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

W moim przypadku za każdym razem miałem niestandardowy adres URL; chociaż schemat wyniku pozostałby ten sam.
Użyłem następujących:

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

Możesz użyć poniższych linii

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

Aby uzyskać informacje na temat funkcji automatycznego odświeżania, zajrzyj tutaj

Używając poniższego kodu, automatycznie wywołała metodę odczytu siatki i ponownie wypełniła siatkę

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

Alternatywnym sposobem ponownego załadowania siatki jest

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

Zawsze możesz użyć $('#GridName').data('kendoGrid').dataSource.read();. Naprawdę nie musisz .refresh();tego .dataSource.read();robić, załatwi sprawę.

Teraz, jeśli chcesz odświeżyć swoją siatkę w bardziej kątowy sposób, możesz:

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

vm.grid.dataSource.read();`

LUB

vm.gridOptions.dataSource.read();

I nie zapomnij zadeklarować swoje źródło danych jako kendo.data.DataSourcetyp

Użyłem Jquery .ajax do uzyskania danych. Aby ponownie załadować dane do bieżącej siatki, muszę wykonać następujące czynności:

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

Chcę wrócić do strony 1, kiedy odświeżę siatkę. Samo wywołanie funkcji read () pozostawi Cię na bieżącej stronie, nawet jeśli nowe wyniki nie mają tylu stron. Wywołanie .page (1) w źródle danych spowoduje odświeżenie źródła danych ORAZ powrót do strony 1, ale zakończy się niepowodzeniem w przypadku siatek, których nie można stronicować. Ta funkcja obsługuje oba:

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

Aby wykonać pełne odświeżenie, w którym siatka zostanie ponownie wyrenderowana wraz z nowym żądaniem odczytu, możesz wykonać następujące czynności:

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

Gdzie nieruchomość może być dowolną własnością, np. Sortowalną

Po prostu napisz poniższy kod

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

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

Możesz spróbować:

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

Jeśli chcesz, aby siatka była automatycznie odświeżana w określonym czasie, możesz użyć następującego przykładu, w którym interwał jest ustawiony na 30 sekund:

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

Domyślna / zaktualizowana konfiguracja / dane widgetów są ustawione tak, aby automatycznie wiązały się z powiązanymi źródłami danych.

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

Możesz także odświeżyć swoją siatkę, wysyłając nowe parametry do akcji Czytaj i ustawiając strony na to, co lubisz:

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

W tym przykładzie akcja read siatki jest wywoływana przez wartość 2 parametrów i po uzyskaniu wyniku stronicowanie siatki jest na stronie 1.

Najłatwiejszym sposobem odświeżenia jest użycie funkcji refresh (). Który idzie jak:

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

podczas gdy możesz również odświeżyć źródło danych za pomocą tego polecenia:

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

Ten ostatni faktycznie przeładowuje źródło danych siatki. Korzystanie z obu można wykonać w zależności od potrzeb i wymagań.

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