7

我有一个 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 上显示加载动画，同时将数据加载到其中，它在加载后显示并且我正在单击网格的页面，但是当没有数据时，它看起来已折叠，我想显示一个加载动画，以使其在加载信息时看起来已填充。

4

2 回答 2

7

正如@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/

于 2013-04-10T23:15:57.870 回答
1

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

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

于 2013-04-24T13:07:35.277 回答