Làm cách nào để buộc làm mới trên Lưới Kendo UI có đầy dữ liệu từ xa?

Question

Tôi có một Lưới giao diện người dùng Kendo chứa đầy thông tin từ nguồn từ xa và tôi muốn bắt buộc làm mới thông tin được hiển thị sau khi Cửa sổ giao diện người dùng Kendo trên trang web của tôi bị đóng.

Tôi cố gắng này:

var grid = $("#usuariosGrid").data("kendoGrid"); 
grid.refresh(); 

Nhưng nó đã không làm việc, đây là cách tôi tạo Kendo UI Lưới:

var ds = new kendo.data.DataSource({ 
    transport: { 
     read: { 
      url: root_url + "/usuario/index", 
      dataType: "json" 
     } 
    }, 
    schema: { 
     data: "Response", 
     total: "Count" 
    }, 
    serverPaging: false, 
    pageSize: 2 
}); 
$("#usuariosGrid").kendoGrid({ 
    pageable: { 
     refresh: true 
    }, 
    columns: [ 
     { field: "UsuarioId", title: "ID", width: "100px" }, 
     { field: "Nombre", title: "Nombre", width: "100px" }, 
     { field: "ApellidoP", title: "Apellido Paterno", width: "100px" }, 
     { field: "ApellidoM", title: "Apellido Materno", width: "100px" }, 
     { command: [{ text: "Editar", click: editFunction }, { text: "Eliminar", click: deleteFunction }], title: " ", width: "200px" } 
    ], 
    dataSource: ds 
}); 

tôi nhìn vào tài liệu nhưng không đi qua một phương pháp để làm điều này.

Trên một lưu ý phụ, tôi đã tự hỏi làm thế nào để hiển thị một hình ảnh động tải trên lưới Kendo UI trong khi dữ liệu đang được tải vào nó, nó được hiển thị sau khi nó được tải và tôi đang nhấp qua các trang lưới điện, nhưng khi không có dữ liệu, nó sẽ bị sụp đổ và tôi muốn hiển thị một hình động tải để làm cho nó trông đầy trong khi thông tin đang được tải.

Answer 1

Khi @NicholasButtler đề xuất, hãy sử dụng ds.read() để buộc đọc. Tùy thuộc vào định nghĩa DataSource của bạn, kết quả có thể được lưu trong bộ nhớ cache. Kiểm tra this khi bật/tắt transport.read.cache.

Để thay thế hình ảnh tải, hãy xác định lại lớp .k-loading-image. Ví dụ:

.k-loading-image { 
    background-image:url('http://24.media.tumblr.com/cfa55f70bbc5ce545eed804fa61a9d26/tumblr_mfpmmdCdWA1s1r5leo1_500.gif') 
} 

EDIT Để đảm bảo rằng bạn có không gian đủ để hiển thị hình ảnh thêm nét phong cách sau đây:

#grid .k-grid-content { 
    min-height: 100px; 
} 

dụ Fiddle ở đây: http://jsfiddle.net/OnaBai/nYYHk/1/

Answer 2

Tôi đã có vấn đề với hình ảnh tải không hiển thị khi tải dữ liệu từ xa, nhưng tôi nhận thấy nó chỉ trên một số lưới nhất định.

Tắt, nếu bạn định cấu hình lưới với tùy chọn: scrollable: false, hình ảnh tải hiển thị như mong đợi. Không cần phải có min-height trong CSS và không cần phải có lưới cuộn nếu bạn cũng đang phân trang.