Memuat ulang / menyegarkan Kendo Grid

Bagaimana cara memuat ulang atau menyegarkan Kendo Grid menggunakan Javascript?

Sering diperlukan untuk memuat ulang atau menyegarkan kisi setelah beberapa saat atau setelah aksi pengguna.

Kamu bisa memakai

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

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

Saya tidak pernah melakukan penyegaran.

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

sendiri bekerja untuk saya sepanjang waktu.

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

Dalam sebuah proyek baru-baru ini, saya harus memperbarui Grid UI Kendo berdasarkan beberapa panggilan, yang terjadi pada beberapa pilihan dropdown. Inilah yang akhirnya saya gunakan:

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

Semoga ini akan menghemat waktu Anda.

Tidak satu pun dari jawaban ini mendapatkan fakta yang readmengembalikan janji, yang berarti Anda dapat menunggu data dimuat sebelum memanggil penyegaran.

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

Ini tidak perlu jika pengambilan data Anda instan / sinkron, tetapi kemungkinan besar itu berasal dari titik akhir yang tidak akan segera kembali.

Jika Anda tidak ingin memiliki referensi ke kisi di handler, Anda dapat menggunakan kode ini:

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

Ini akan menyegarkan kotak, jika ada tombol segarkan. Tombol dapat diaktifkan seperti:

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

Sebenarnya, mereka berbeda:

• $('#GridName').data('kendoGrid').dataSource.read()menyegarkan uidatribut baris tabel

• $('#GridName').data('kendoGrid').refresh() meninggalkan uid yang sama

Yang harus Anda lakukan hanyalah menambahkan event .Events (events => events.Sync ("KendoGridRefresh")) dalam kode pengikat kendoGrid Anda. Tidak perlu menulis kode refresh dalam hasil 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" })          
  )

Dan Anda dapat menambahkan fungsi Global berikut ini di file .js Anda. jadi, Anda dapat memanggilnya untuk semua kotak kendo di proyek Anda untuk menyegarkan kendoGrid.

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

Dalam kasus saya, saya memiliki url khusus untuk dikunjungi setiap kali; meskipun skema hasilnya tetap sama.
Saya menggunakan yang berikut ini:

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

Anda dapat menggunakan garis di bawah ini

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

Untuk fitur penyegaran otomatis, lihat di sini

Dengan menggunakan kode berikut ini secara otomatis disebut metode baca grid dan kembali mengisi grid

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

Cara alternatif untuk memuat ulang kisi adalah

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

Anda selalu bisa menggunakan $('#GridName').data('kendoGrid').dataSource.read();. Anda tidak benar-benar perlu .refresh();setelah itu,.dataSource.read(); akan melakukan trik.

Sekarang jika Anda ingin me-refresh grid Anda dengan cara yang lebih sudut, Anda dapat melakukan:

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

vm.grid.dataSource.read();`

ATAU

vm.gridOptions.dataSource.read();

Dan jangan lupa untuk mendeklarasikan sumber data Anda sebagai kendo.data.DataSourcetipe

Saya menggunakan Jquery .ajax untuk mendapatkan data. Untuk memuat ulang data ke kisi saat ini, saya perlu melakukan hal berikut:

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

Saya ingin kembali ke halaman 1 ketika saya menyegarkan grid. Hanya memanggil fungsi read () akan membuat Anda tetap di halaman saat ini, bahkan jika hasil baru tidak memiliki banyak halaman. Memanggil. Halaman (1) pada sumber data akan menyegarkan sumber data DAN kembali ke halaman 1 tetapi gagal pada kisi yang tidak dapat halaman. Fungsi ini menangani keduanya:

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

Untuk melakukan penyegaran lengkap, di mana kisi-kisi akan dirender kembali bersama dengan permintaan baca baru, Anda dapat melakukan hal berikut:

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

Di mana properti dapat berupa properti apa pun, mis

Cukup tulis kode di bawah ini

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

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

Anda dapat mencoba:

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

Jika Anda menginginkan kisi untuk di-refresh secara otomatis berdasarkan waktu, Anda dapat menggunakan contoh berikut ini yang intervalnya ditetapkan pada 30 detik:

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

Default / konfigurasi terbaru / data widget diatur untuk secara otomatis mengikat ke DataSource terkait.

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

Anda juga dapat menyegarkan kotak dengan mengirimkan parameter baru ke tindakan Baca dan mengatur halaman sesuai keinginan:

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

Dalam contoh ini aksi baca grid dipanggil oleh 2 nilai parameter dan setelah mendapatkan hasil, paging grid ada di halaman 1.

Cara termudah untuk menyegarkan adalah menggunakan fungsi refresh (). Itu seperti:

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

sementara Anda juga dapat menyegarkan sumber data menggunakan perintah ini:

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

Yang terakhir sebenarnya memuat ulang sumber data dari grid. Penggunaan keduanya dapat dilakukan sesuai dengan kebutuhan dan kebutuhan Anda.

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