Memuat ulang / menyegarkan Kendo Grid


171

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.

Jawaban:


314

Kamu bisa memakai

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

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

19
@zespri readakan meminta server dan hanya memuat ulang sumber data. Tidak akan ada perubahan di UI. refreshakan me-render kembali item dalam grid dari sumber data saat ini. Itu sebabnya keduanya diperlukan.
Botis

37
Saya tidak berpikir Anda perlu menyegarkan di versi terbaru Kendo. Karena tampaknya berfungsi dengan baik tanpanya
GraemeMiller

2
Ya! Ini bekerja juga dengan TreeList: $ ('# Gantt'). Data ('kendoTreeList'). DataSource.read (); $ ('# Gantt'). Data ('kendoTreeList'). Refresh ();
Hernaldo Gonzalez

27
Pengembang secara eksplisit mengatakan untuk tidak memanggil penyegaran setelah membaca: telerik.com/forums/show-progress-spinner-during-load-refresh karena dapat mencegah munculnya indikator kemajuan.
Rustam Miftakhutdinov

2
Saya menggunakan versi yang lebih baru dan saya hanya perlu menelepon. Baca. Memanggil .refresh setelah dibaca menyebabkan dua perjalanan ke server untuk data.
Justin

59

Saya tidak pernah melakukan penyegaran.

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

sendiri bekerja untuk saya sepanjang waktu.


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

Terima kasih, tetapi ini menghasilkan kesalahan "TypeError: $ (...). Data (...) tidak terdefinisi". Saya juga melihat banyak halaman dan mencoba berbagai variasi solusi ini tetapi masih mendapatkan kesalahan yang sama. Ada ide?
Jack

Jika data ('kendoGrid') mengembalikan nol maka kemungkinan besar id salah atau Anda belum membuat kisi. NB Anda membuat grid dengan $ (..). KendoGrid () dan mengaksesnya nanti dengan $ (). Data ('kendoGrid')
tony

29

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.


persis apa yang saya cari grid.setDataSource (dataSource); untuk panggilan non-jarak jauh itulah yang harus Anda gunakan. Terima kasih!
Rui Lima

15

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.


1
Memanfaatkan dukungan janji bawaan sangat mudah dan menghapus beberapa baris kode juga. Saya berani bertaruh bahwa ini harus menjadi jawaban yang benar.
FoxDeploy

1
Zachary terima kasih! Saya telah menghabiskan beberapa jam untuk masalah ini - solusi Anda adalah satu-satunya yang bekerja untuk saya. Saya memasukkan baris ke sumber basis data grid saya melalui ajax, dilingkarkan (satu baris setiap kali). Setelah loop selesai, dataSource.read () hanya bekerja kadang-kadang. "Kalau begitu" adalah yang saya butuhkan. Sangat dihargai!
Antony D

9

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

9

Sebenarnya, mereka berbeda:

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

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


8

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

Segarkan kendoGrid dengan hanya menambahkan Acara.
Milan

8

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

5

Anda dapat menggunakan garis di bawah ini

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

Untuk fitur penyegaran otomatis, lihat di sini


5

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

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

5

Cara alternatif untuk memuat ulang kisi adalah

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

5

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


5

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

4

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

4

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


3

Cukup tulis kode di bawah ini

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

1
Ini akan menjadi benar hanya jika Anda telah menginisialisasi kotak dengan pageable.refresh = true ... yang tidak secara default. Bagaimanapun, Anda tidak boleh menggunakan solusi UI ketika Anda dapat melakukannya dengan menggunakan fungsi API (lihat jawaban yang diterima)
The_Black_Smurf


3

Anda dapat mencoba:

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

3

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>

2

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

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

Apakah ada yang salah dengan jawaban yang diterima (dari 2013), karena jawaban Anda terlihat sangat mirip. Anda setidaknya harus berkomentar dengan cara tertentu - dan komentar dalam jawaban itu bahkan mengatakan bahwa Anda tidak boleh meneleponrefresh
James Z

2

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.


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.


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

Meskipun ini setidaknya tidak ada salinan 1to1, ini tidak memberikan informasi tambahan. Hampir setiap jawaban dalam posting ini dengan lebih dari satu upvote direkomendasikan menggunakandataSource.read()
Fabian N.
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.