如何强制刷新充满远程数据的 Kendo UI Grid？答案

【问题标题】：How to force a refresh on a Kendo UI Grid filled with remote data?如何强制刷新充满远程数据的 Kendo UI Grid？
【发布时间】：2013-04-02 21:48:44
【问题描述】：

我有一个 Kendo UI Grid，其中包含来自远程源的信息，我想强制刷新我网站上的 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 上显示加载动画，同时将数据加载到其中，它在加载后显示，我正在点击页面网格，但是当没有数据时，它看起来是折叠的，我想显示一个加载动画，使其在加载信息时看起来充满。

【问题讨论】：

标签： javascript jquery datagrid kendo-ui

【解决方案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;
}

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

【讨论】：

好的阅读工作，但是对于加载图像，我想做的是在从服务器检索数据时显示动画。第一次加载数据时，网格看起来已折叠，我希望它看起来“充满”动画，因为通常它看起来没有做任何事情，所以我希望加载动画呈现给正在执行的后台工作的印象。
为网格设置最小高度怎么样？这应该留出空间让 gif 显示出来！
我添加了一个最小高度，但它只影响了网格的底部，不是数据应该显示的地方，而是页码所在的区域。
查看我的上一个 EDIT 或这里的运行示例 jsfiddle.net/OnaBai/nYYHk/1
谢谢，没有关于剑道 UI 中所有样式选择器的参考文档吗？

【解决方案2】：

我在加载远程数据时遇到了加载图像未显示的问题，但我注意到它仅在某些网格上。

事实证明，如果您使用：scrollable: false 选项配置网格，加载图像会按预期显示。无需在 CSS 中使用 min-height，如果您还要分页，则无需使用可滚动网格。

【讨论】：