Tải lại / làm mới lưới Kendo

Làm cách nào để tải lại hoặc làm mới Lưới Kendo bằng Javascript?

Nó thường được yêu cầu tải lại hoặc làm mới lưới sau một thời gian hoặc sau một hành động của người dùng.

Bạn có thể dùng

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

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

Tôi không bao giờ làm mới.

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

một mình làm việc cho tôi mọi lúc

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

Trong một dự án gần đây, tôi đã phải cập nhật Lưới UI Kendo dựa trên một số cuộc gọi, điều đó đã xảy ra trên một số lựa chọn thả xuống. Đây là những gì tôi đã kết thúc bằng cách sử dụng:

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

Hy vọng điều này sẽ giúp bạn tiết kiệm thời gian.

Không một câu trả lời nào trong số những câu trả lời này nhận được readmột lời hứa, điều đó có nghĩa là bạn có thể đợi dữ liệu được tải trước khi gọi refresh.

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

Điều này là không cần thiết nếu lấy dữ liệu của bạn là tức thời / đồng bộ, nhưng nhiều khả năng nó đến từ điểm cuối sẽ không quay lại ngay lập tức.

Nếu bạn không muốn có một tham chiếu đến lưới trong trình xử lý, bạn có thể sử dụng mã này:

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

Điều này sẽ làm mới lưới, nếu có nút làm mới. Nút có thể được kích hoạt như vậy:

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

Thật ra, chúng khác nhau:

• $('#GridName').data('kendoGrid').dataSource.read()làm mới các uidthuộc tính của hàng của bảng

• $('#GridName').data('kendoGrid').refresh() lá uid giống nhau

Những gì bạn phải làm chỉ là thêm một sự kiện .Events (event => event.Sync ("KendoGridRefresh")) trong mã ràng buộc kendoGrid của bạn. Không cần phải viết mã làm mới trong kết quả 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" })          
  )

Và bạn có thể thêm chức năng Toàn cầu sau vào bất kỳ tệp .js nào của mình. vì vậy, bạn có thể gọi nó cho tất cả các lưới kendo trong dự án của bạn để làm mới kendoGrid.

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

Trong trường hợp của tôi, tôi đã có một url tùy chỉnh để đi đến mỗi lần; mặc dù lược đồ của kết quả sẽ giữ nguyên.
Tôi đã sử dụng như sau:

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

Bạn có thể sử dụng các dòng dưới đây

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

Để biết tính năng tự động làm mới, hãy xem tại đây

Bằng cách sử dụng mã sau, nó tự động gọi phương thức đọc của lưới và điền lại lưới

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

Một cách khác để tải lại lưới là

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

Bạn luôn có thể sử dụng $('#GridName').data('kendoGrid').dataSource.read();. Bạn không thực sự cần phải .refresh();sau đó, .dataSource.read();sẽ thực hiện các mẹo.

Bây giờ nếu bạn muốn làm mới lưới của mình theo cách góc cạnh hơn, bạn có thể làm:

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

vm.grid.dataSource.read();`

HOẶC LÀ

vm.gridOptions.dataSource.read();

Và đừng quên khai báo nguồn dữ liệu của bạn dưới kendo.data.DataSourcedạng

Tôi đã sử dụng Jquery .ajax để lấy dữ liệu. Để tải lại dữ liệu vào lưới hiện tại, tôi cần làm như sau:

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

Tôi muốn quay lại trang 1 khi tôi làm mới lưới. Chỉ cần gọi hàm read () sẽ giữ bạn trên trang hiện tại, ngay cả khi kết quả mới không có nhiều trang đó. Gọi .page (1) trên nguồn dữ liệu sẽ làm mới nguồn dữ liệu VÀ quay lại trang 1 nhưng không thành công trên các lưới không thể phân trang được. Hàm này xử lý cả hai:

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

Để làm mới hoàn toàn, trong đó lưới sẽ được kết xuất lại cùng với yêu cầu đọc mới, bạn có thể làm như sau:

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

Trường hợp tài sản có thể là bất kỳ tài sản nào, ví dụ như có thể sắp xếp

Chỉ cần viết mã dưới đây

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

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

Bạn có thể thử:

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

Nếu bạn mong muốn lưới được tự động làm mới trên cơ sở thời gian, bạn có thể sử dụng ví dụ sau có khoảng thời gian được đặt là 30 giây:

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

Cấu hình / dữ liệu mặc định / cập nhật của các widget được đặt để tự động liên kết với DataSource được liên kết.

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

Bạn cũng có thể làm mới lưới của mình bằng cách gửi các tham số mới tới Đọc hành động và đặt các trang theo những gì bạn thích:

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

Trong ví dụ này, hành động đọc của lưới đang được gọi bởi 2 giá trị tham số và sau khi nhận được kết quả, phân trang của lưới nằm ở trang 1.

Cách dễ nhất để làm mới là sử dụng hàm refresh (). Mà đi như:

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

trong khi bạn cũng có thể làm mới nguồn dữ liệu bằng lệnh này:

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

Cái sau thực sự tải lại nguồn dữ liệu của lưới. Việc sử dụng cả hai có thể được thực hiện theo nhu cầu và yêu cầu của bạn.

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