Перезагрузка / обновление Kendo Grid

Как перезагрузить или обновить Kendo Grid, используя 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() оставляет тот же UID

Что вам нужно сделать, это просто добавить событие .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 () сохранит вас на текущей странице, даже если в новых результатах не так много страниц. Вызов .page (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();