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

How to force a refresh on a Kendo UI Grid filled with remote data?

本文关键字：网格 UI 刷新 Kendo 满远程 数据      更新时间：2023-09-26

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

我试过了:

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

但它没有工作，这就是我如何创建剑道UI网格:

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网格，而数据正在加载到它，它显示后，它已加载，我正在点击通过网格的页面，但当没有数据，它看起来崩溃，我想显示加载动画，使它看起来填充，而信息正在加载

正如@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')
}

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

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

这里的例子:http://jsfiddle.net/OnaBai/nYYHk/1/

当加载远程数据时，我有加载图像不显示的问题，但我注意到它只在某些网格上。

结果是，如果使用:scrollable: false选项配置网格，则加载图像显示如预期的那样。没有必要在CSS中有min-height，如果你还在分页，也没有必要有一个可滚动的网格。

相关文章：