Kendo Grid'i yeniden yükleme / yenileme

Javascript kullanarak Kendo Izgarası nasıl yeniden yüklenir veya yenilenir?

Bir ızgarayı bir süre sonra veya bir kullanıcı işleminden sonra yeniden yüklemek veya yenilemek genellikle gereklidir.

Kullanabilirsiniz

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

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

Asla tazelenmem.

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

Yalnız benim için her zaman çalışır.

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

Son zamanlarda yapılan bir projede, Kendo UI Grid'i bazı çağrılara dayanarak güncellemem gerekti, bazı açılır seçimlerde gerçekleşti. İşte ben kullanarak sona erdi:

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

Umarım bu size biraz zaman kazandıracaktır.

Bu cevaplardan tek bir kişi readbir söz vermez, yani yenilemeyi çağırmadan önce verilerin yüklenmesini bekleyebilirsiniz.

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

Veri yakalamanız anlık / senkronize ise bu gereksizdir, ancak büyük olasılıkla hemen geri dönmeyecek bir uç noktadan geliyorsa.

İşleyicideki ızgaraya başvuru yapmak istemiyorsanız, bu kodu kullanabilirsiniz:

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

Yenile düğmesi varsa ızgarayı yenileyecektir. Düğme şu şekilde etkinleştirilebilir:

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

Aslında farklılar:

• $('#GridName').data('kendoGrid').dataSource.read()uidtablo satırının niteliklerini yeniler

• $('#GridName').data('kendoGrid').refresh() aynı kullanıcı adını bırakır

Ne yapmanız gereken sadece bir olay ekleyin .Events (etkinlikler => events.Sync ( "KendoGridRefresh")) Ajax sonucu yenile kod yazmak kendoGrid bağlayıcı code.No muhtaç.

@(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" })          
  )

Ve aşağıdaki Global işlevini .js dosyanızın herhangi birine ekleyebilirsiniz. böylece, kendoGrid'i yenilemek için projenizdeki tüm kendo ızgaraları için arayabilirsiniz.

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

Benim durumumda her zaman gitmek için özel bir url vardı; ancak sonucun şeması aynı kalacaktır.
Aşağıdakileri kullandım:

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

Aşağıdaki satırları kullanabilirsiniz

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

Otomatik yenileme özelliği için buraya bir göz atın

Aşağıdaki kodu kullanarak otomatik olarak ızgaranın okuma yöntemi denir ve yeniden ızgara doldur

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

Izgarayı yeniden yüklemenin alternatif bir yolu

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

Her zaman kullanabilirsiniz $('#GridName').data('kendoGrid').dataSource.read();. Bundan .refresh();sonra gerçekten gerek .dataSource.read();yok, hile yapacak.

Şimdi ızgaralarınızı daha açısal bir şekilde yenilemek istiyorsanız şunları yapabilirsiniz:

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

vm.grid.dataSource.read();`

VEYA

vm.gridOptions.dataSource.read();

Ve veri kaynağınızı kendo.data.DataSourcetür olarak bildirmeyi unutmayın

Veri almak için Jquery .ajax kullandım. Verileri geçerli ızgaraya yeniden yüklemek için aşağıdakileri yapmam gerekir:

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

Izgarayı yenilediğimde 1. sayfaya geri dönmek istiyorum. Yeni sonuçların çok fazla sayfası olmasa bile, sadece read () işlevini çağırmak sizi geçerli sayfada tutar. Veri kaynağında .page (1) çağrıldığında veri kaynağı yenilenir VE sayfa 1'e dönülür ancak ödenmeyen ızgaralarda başarısız olur. Bu işlev her ikisini de ele alır:

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

Kılavuzun yeni okuma isteği ile yeniden oluşturulacağı tam bir yenileme yapmak için aşağıdakileri yapabilirsiniz:

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

Mülk herhangi bir mülk olduğunda, örneğin sıralanabilir

Sadece kodun altına yazın

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

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

Deneyebilirsiniz:

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

Izgaranın zamanlanmış olarak otomatik olarak yenilenmesini istiyorsanız, aralığı 30 saniyeye ayarlanmış olan aşağıdaki örneği kullanabilirsiniz:

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

Widget'ların varsayılan / güncellenmiş yapılandırması / verileri, ilişkilendirilmiş bir Veri Kaynağına otomatik olarak bağlanacak şekilde ayarlanmıştır.

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

Ayrıca Izgarayı Okuma eylemine yeni parametreler göndererek ve sayfaları istediğiniz gibi ayarlayarak yenileyebilirsiniz:

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

Bu örnekte, ızgaranın okuma eylemi 2 parametre değeri ile çağrılmaktadır ve sonuç alındıktan sonra ızgaranın sayfalaması sayfa 1'de yer almaktadır.

Yenilemenin en kolay yolu refresh () işlevini kullanmaktır. Hangi gibi gider:

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

bu komutu kullanarak veri kaynağını da yenileyebilirsiniz:

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

İkincisi aslında ızgaranın veri kaynağını yeniden yükler. Her ikisinin kullanımı ihtiyacınıza ve gereksiniminize göre yapılabilir.

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