如何将列添加到充满远程数据的Kendo Grid

how to add columns to Kendo Grid that is filled with remote data?

本文关键字：数据 满远程 Kendo Grid 添加      更新时间：2023-09-26

我有这个视图

<!DOCTYPE html>
<html>
<head >
    <link href="<%: Url.Content("~/Content/kendo/2012.3.1114/kendo.common.min.css")%>" rel="stylesheet" type="text/css" />
    <link href="<%: Url.Content("~/Content/kendo/2012.3.1114/kendo.default.min.css")%>" rel="stylesheet" type="text/css" />
    <title><%: ViewBag.GestionTitle %></title>
</head>
    <body>

        <h1><%: ViewBag.GestionTitle %></h1>
        <div id="usuariosGrid"></div>
        <button id="addUsuario" type="button" class="k-input"><%: ViewBag.Agregar %></button>
        <script src="<%: Url.Content("~/Scripts/jquery-1.7.1.min.js")%>"></script>
        <script src="<%: Url.Content("~/Scripts/kendo/2012.3.1114/kendo.web.min.js")%>"></script>
        <script src="<%: Url.Content("~/Scripts/usuario/usuario.js")%>"></script>
    </body>
</html>

div usuariosGrid使用以下函数填充远程数据:

$(function () {
    var ds = new kendo.data.DataSource({
        transport: {
            read: {
                url: "http://127.0.0.1:81/SismosService.svc/usuario/index",
                dataType: "json"
            }
        },
        schema: {
            data: "Response"
        },
    });
    $("#usuariosGrid").kendoGrid({
        columns: ["UsuarioId", "Nombre", "ApellidoP", "ApellidoM"],
        dataSource: ds
    });
});

这将使用函数中指定的列创建一个网格。现在我要做的是，为插入的每一行添加一个列，其中包含两个超链接，一个将重定向到编辑页面，另一个将重定向到删除页面。

我该怎么做?我已经寻找了一些例子，但还没有找到任何与我想要实现的目标相似的东西。

基本上，您必须向kendoGrid的columns定义添加一列。这个新的单元格将包含链接(甚至一些按钮)。

对于这个，你可能会对使用columns.template字段感兴趣，在那里你可以合并HTML与变量数据，例如，你编辑或删除的行数据。

你可以这样定义一个自定义的动作，而不是链接:

columns : [
    ...
    { command: { text: "Edit", click: editRecord }, title: " ", width: "140px" }
]

和在editRecord你可以做任何你想做的(见这里的KendoUI的例子)。

相关文章：