如何强制刷新充满远程数据的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
});

我查看了文档,但没有遇到这样做的方法.

在一个侧面说明,我一直在想,如何在数据被加载到它显示在剑道UI电网加载动画,显示它被加载后,我点击进入电网的网页,但当没有数据时,它看起来已折叠,我想显示一个加载动画,使其在加载信息时看起来已填满.

Answer 1

正如@NicholasButtler建议的那样,ds.read()用于强制读取.根据您的DataSource定义,结果可能会被缓存.启用/禁用时检查此项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;
}

这里的小提琴示例:http://jsfiddle.net/OnaBai/nYYHk/1/