Перезавантаження / оновлення сітки Kendo

Як перезавантажити або оновити сітку Kendo за допомогою Javascript?

Часто потрібно перезавантажити або оновити сітку після закінчення часу або після дії користувача.

Можна використовувати

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

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

Я ніколи не оновлююся.

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

один час працює для мене весь час.

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

У нещодавньому проекті мені довелося оновити сітку інтерфейсу Kendo на основі деяких дзвінків, які відбувались у деяких вибіркових меню, що випадає. Ось, що я закінчив:

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

Сподіваємось, це заощадить певний час.

Жодна з цих відповідей не отримує той факт, що readповертає обіцянку, а це означає, що ви можете зачекати, коли дані завантажуватимуться перед тим, як викликати оновлення.

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

Це непотрібно, якщо захоплення ваших даних є миттєвим / синхронним, але більш ніж ймовірно, воно надходить із кінцевої точки, яка не повернеться одразу.

Якщо ви не хочете мати посилання на сітку в обробнику, ви можете використовувати цей код:

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

Це дозволить оновити сітку, якщо є кнопка оновлення. Кнопку можна ввімкнути так:

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

Насправді вони різні:

• $('#GridName').data('kendoGrid').dataSource.read()оновлює uidатрибути рядка таблиці

• $('#GridName').data('kendoGrid').refresh() залишає той самий уїд

Що вам потрібно зробити, це просто додати подію .Events (events => events.Sync ("KendoGridRefresh")) у свій код прив'язки kendoGrid. Не потрібно писати код оновлення в результат 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" })          
  )

І ви можете додати наступну глобальну функцію у будь-який файл .js. Таким чином, ви можете викликати його для всіх сіток кендо у вашому проекті, щоб оновити kendoGrid.

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

У моєму випадку я мав користувальницьку URL-адресу, яку потрібно переходити кожен раз; хоча схема результату залишилася б однаковою.
Я використовував таке:

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

Ви можете використовувати рядки нижче

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

Щоб ознайомитись із функцією автоматичного оновлення, подивіться тут

Використовуючи наступний код, він автоматично називається методом зчитування сітки та знову заповнює сітку

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

Альтернативний спосіб перезавантажити сітку

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

Ви завжди можете використовувати $('#GridName').data('kendoGrid').dataSource.read();. Вам не дуже потрібно .refresh();після цього, .dataSource.read();зробите свою справу.

Тепер, якщо ви хочете оновити сітку більш кутовим способом, ви можете зробити:

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

vm.grid.dataSource.read();`

АБО

vm.gridOptions.dataSource.read();

І не забудьте оголосити свій джерело даних як kendo.data.DataSourceтип

Я використовував Jquery .ajax для отримання даних. Для того, щоб перезавантажити дані в поточну сітку, мені потрібно зробити наступне:

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

Коли я оновлюю сітку, я хочу повернутися до сторінки 1. Просто виклик функції read () збереже вас на поточній сторінці, навіть якщо нових результатів не так багато. Виклик сторінки. (1) на джерело даних оновить джерело даних І повернеться до сторінки 1, але не вдасться до сіток, які не підлягають перегляду. Ця функція обробляє і:

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

Щоб виконати повне оновлення, коли сітка буде повторно відображена разом із новим запитом на читання, ви можете зробити наступне:

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

Якщо власністю може бути будь-яка власність, наприклад, сортування

Просто напишіть код нижче

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

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

Ви можете спробувати:

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

Якщо ви бажаєте, щоб сітка автоматично була оновлена ​​тимчасово, ви можете скористатися наступним прикладом, інтервал якого встановлений на 30 секунд:

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

Конфігурація / дані віджетів за замовчуванням / оновлені настройки віджетів встановлюються автоматично для прив’язки до пов'язаного джерела даних.

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

Ви також можете оновити свою сітку, надіславши нові параметри для читання дій та налаштувавши сторінки на те, що вам подобається:

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

У цьому прикладі читання дії сітки викликається за значенням 2 параметрів, а після отримання результату підказка сітки знаходиться на сторінці 1.

Найпростіший спосіб оновити це використання функції refresh (). Що йде так:

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

при цьому ви можете також оновити джерело даних за допомогою цієї команди:

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

Останнє фактично перезавантажує джерело даних сітки. Використання обох може здійснюватися відповідно до ваших потреб та вимог.

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