javascript - 如何在充满远程数据的 Kendo UI 网格上强制刷新？

Question

我有一个 Kendo UI 网格，其中填充了来自远程源的信息，我想在我网站上的 Kendo UI 窗口关闭后强制刷新显示的信息。

我试过这个:

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

但它没有用，这就是我创建 Kendo UI Grid 的方式:

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

我查看了文档，但没有找到执行此操作的方法。

附带说明一下，我一直想知道如何在 Kendo UI Grid 上显示加载动画，同时将数据加载到其中，它在加载后显示，我正在单击页面网格，但是当没有数据时，它看起来是折叠的，我想显示加载动画以使其在加载信息时看起来已填充。

Answer 1

正如@NicholasButtler 所建议的，使用ds.read() 来强制读取。根据您的 DataSource 定义，结果可能会被缓存。检查this关于启用/禁用 transport.read.cache。

要替换加载图像，请重新定义类 .k-loading-image。示例:

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

编辑 为了保证您有足够的空间来显示图像，请添加以下样式定义:

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

fiddle 示例在这里:http://jsfiddle.net/OnaBai/nYYHk/1/