无法通过自定义按钮刷新 Kendo Grid？答案

【问题标题】：Cannot refresh Kendo Grid by a custom button?无法通过自定义按钮刷新 Kendo Grid？
【发布时间】：2015-12-06 09:57:42
【问题描述】：

我尝试了 stackoverflow 和其他页面中建议的许多不同方法，但仍然无法刷新 Kendo Grid 上的数据。应用以下方法时遇到“TypeError: $(...).data(...) is undefined”错误。有什么帮助吗？

<div id="grid"></div>
<button id="refresh" class="k-button" onclick="Refresh()">Refresh</button>


<script>
    var grid = $("#grid").kendoGrid({
        //code omitted for brevity
        dataSource: {
            type: "json",
            transport: {
                read: {
                    url: "/Event/Event_Read",
                    dataType: "json",
                    cache: false
                    }
            },
            schema: {
                model: {
                    fields: {
                        CardNo: { type: 'number' }
                        //code omitted for brevity                         
                    }
                }
            }
        },
        pageable: {
            pageSize: 15,
            refresh: true
        },
        filterable: true,
        columns:
        [
            { field: "CardNo", title: "Card No", filterable: true }
            //code omitted for brevity              
        ]
    }).data("kendoGrid");

    function Refresh() {
        $("#grid").data("kendoGrid").dataSource.read();
        $("#grid").data("kendoGrid").refresh();
    }
</script>

【问题讨论】：

尝试将网格初始化放在$(document).ready()
作为警告，请不要在 cmets 中跨站点发送指向此问题的垃圾链接。这些 cmets 正在被标记和删除。

标签： javascript asp.net-mvc kendo-ui kendo-grid kendo-asp.net-mvc

【解决方案1】：

您好，试试这段代码，包含以下 css 和 js 并尝试重新加载网格。

<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="styles/kendo.common.min.css" />
<link rel="stylesheet" href="styles/kendo.default.min.css" />

<script src="js/jquery.min.js"></script>
<script src="js/kendo.all.min.js"></script>
</head>
<body>
<div id="grid"></div>
<button id="refresh" class="k-button" onclick="Refresh()">Refresh</button>


<script type="text/javascript">
$(function () {
var grid = $("#grid").kendoGrid({
    //code omitted for brevity
    dataSource: {
        type: "json",
        transport: {
            read: {
                url: "/Event/Event_Read",
                dataType: "json",
                cache: false
                }
        },
        schema: {
            model: {
                fields: {
                    CardNo: { type: 'number' }
                    //code omitted for brevity                         
                }
            }
        }
    },
    pageable: {
        pageSize: 15,
        refresh: true
    },
    filterable: true,
    columns:
    [
        { field: "CardNo", title: "Card No", filterable: true }
        //code omitted for brevity              
    ]
}).data("kendoGrid");

function Refresh() {
    $("#grid").data("kendoGrid").dataSource.read();
    $("#grid").data("kendoGrid").refresh();
}
});
</script>

为我工作并作为参考，请查看thistelerik 网站。

【讨论】：

谢谢米兰。是的，这正是 jquery 问题，但不是由于缺少 jquery 文件引起的。通过捆绑和普通定义两次添加jquer文件。删除其中一个定义解决了这个问题。谢谢。

【解决方案2】：

这应该会刷新网格：

$("#grid").data("kendoGrid").dataSource.read();

refresh 方法再次从数据源填充网格。如果数据没有改变，网格也不会改变。

如果您收到萤火虫错误

TypeError: $(...).data(...) 未定义

这意味着调用此代码时网格尚未初始化或选择器错误。确保不要将网格名称与其他控件混淆

尝试更改您的选择器名称。

$("#MyGrid").data("kendoGrid").dataSource.read();

【讨论】：

@Salam Abbas，选择器的名称没有问题。我发现问题是由上面解释的 jquery 定义引起的。无论如何，你的回答对我也很有帮助:) 投票+

【解决方案3】：

请试试这个

$(".k-pager-refresh").trigger('click');

在你的刷新功能中

或者试试这个

$("#grid").data("kendoGrid").dataSource.read(); 
$("#grid").data("kendoGrid").refresh();

这对你有帮助

问候，

【讨论】：