剑道网格超链接答案

【问题标题】：Kendo grid Hyperlink剑道网格超链接
【发布时间】：2016-03-04 18:44:21
【问题描述】：

我有一张有 4 列的表格。 [ID、名字、姓氏、地址]。我在 kendogrid 上显示 3 cloumns[ID,FIRSTNAME,LASTNAME]。我想要做的是单击FIRSTNAME 它应该在新窗口上显示地址。但我没有得到它。我试图获取 FIRSTNAME 上的链接，但不知道以后如何进行。我是这个概念的新手。下面是我的代码。我需要为地址创建剑道网格还是如何工作。我想要的是 ID 上的超链接以显示地址。

谢谢。

 Grid = $("#grid").kendoGrid({
                      dataSource:gridDS,
                      height: 450,
                      pageable: false,
                      sortable: true,
                          binding: true
         columns: [

                 {
                     field: "ID",
                     title: "ID",
                     headerTemplate: '<span class="tbl-hdr">ID</span>',
                     attributes: {
                         style: "vertical-align: top; text-align: left; font-weight:bold; font-size: 12px"
                     },
                     width: 85
                 },
                 {
                     field: "FIRSTNAME",
                     title: "FIRSTNAME",
                     headerTemplate: '<span class="tbl-hdr">FIRSTNAME</span>', 
                     template: '<a href="#=FIRSTNAME#">#=ADDRESS#</a>',
                     attributes: {
                         style: "vertical-align: top; text-align: left; font-weight:bold; font-size: 12px"
                     },
                     width: 25
                 },
                 {
                     field: "LASTNAME",
                     title: "LASTNAME",
                     headerTemplate: '<span class="tbl-hdr">LASTNAME</span>',
                     attributes: {
                         style: "vertical-align: top; text-align: left; font-weight:bold; font-size: 12px"
                     },
                     width: 85
                 },

                  {
                      command: [
                        {
                            name: "destroy",
                            template: "<div class='k-button delete-btn'><span class='k-icon k-delete'></span></div>",
                            text: "remove"
                        },
                        {
                            text: "Edit",
                            template: "<div class='k-button edit-btn'><span class='k-icon k-edit'></span></div>",

                        },

                      ],
                      width: 40,
                      attributes: {
                          style: "vertical-align: top; text-align: center;"
                      }
                  },
             ],
             editable: "popup"
         }).data('kendoGrid');
     }

【问题讨论】：

请不要使用答案中的代码更新原始问题。您的问题将与答案不同步。
clicking the FIRSTNAME it should display the ADDRESS on a new window - 你能解释一下这是什么意思吗？
地址是一个 clob 数据类型，它有几行信息。因此，当我们单击名字时，它会弹出一个显示地址信息的弹出窗口或消息框

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

【解决方案1】：

我认为这不是 kendo 问题，几乎与 JS/jQuery 有关。我的建议是在网格上绑定一个事件，以从模板中的该链接获取所有点击事件。然后，您可以获取 clicked dataItem 及其行数据。

.on("click", "a.name-link", function() {
    var tr = $(this).closest("tr");
    var dataItem = $("#grid").data("kendoGrid").dataItem(tr);

    window.alert(dataItem.Address);
});

Working Demo

不清楚的是您希望如何打开一个新窗口 与地址。你的意思是：一个全新的浏览器选项卡/窗口或任何类似 JS 弹出窗口的东西在你的应用程序中？

如果您想要一个新的浏览器选项卡/窗口，您应该使用 window.open() 将行 id 传递给它，然后在此窗口中，您必须再次点击数据库以显示信息。现在，如果想要在您的应用程序中弹出一个 javascript 弹出窗口（例如 Bootstrap's Modal），您可以使用之前检索到的 dataItem 来填充它。信息已经存在。

【讨论】：

即使弹出窗口也可以
我将代码更新为此，但我收到错误错误：无法获取未定义或空引用的属性“on”
我在页面加载后立即收到此错误，但带有地址详细信息的弹出窗口正在运行。
@vana 奇怪，因为如果错误与我建议的事件有关，则警报应该不起作用
有没有办法可以在字段模板中编写这个函数而不是页面加载。

【解决方案2】：

我更新了代码。您可以单击名字查看地址。

如果你想更进一步，你可以点击地址按钮在弹出窗口中查看地址。

Sample at Telerik Kendo UI Dojo

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Kendo UI Snippet</title>

    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.common.min.css" />
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.rtl.min.css" />
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.silver.min.css" />
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.mobile.all.min.css" />

    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://kendo.cdn.telerik.com/2016.1.112/js/kendo.all.min.js"></script>
    <style type="text/css">
        a {
            cursor: pointer;
            text-decoration: underline;
        }
        .k-grid-update {
            display: none;
        }
    </style>
</head>
<body>
    <script id="row-template" type="text/x-kendo-tmpl">
        <a onclick="display('#=address#')">#=firstName#</a>
    </script>
    <script id="popup-editor" type="text/x-kendo-template">
        #=address#
    </script>
    <div id="grid"></div>
    <script>
        $("#grid").kendoGrid({
            columns: [
              { field: "id" },
              { field: "firstName", template: kendo.template($("#row-template").html()) },
              { field: "lastName" },
              { command: [{ name: "edit", text: { edit: "Address", cancel: "Close", update: "Close" } }]
              }
            ],
            dataSource: {
                data: [
                  { id: 1, firstName: "Jane", lastName: "Doe", address: "123 Street" },
                  { id: 2, firstName: "John", lastName: "Doe", address: "456 Street" }
                ],
                schema: {
                    model: { id: "id" }
                }
            },
            editable: {
                mode: "popup",
                window: { title: 'Address' },
                template: kendo.template($("#popup-editor").html())
            }
        });

        function display(address) {
            alert(address);
        }
    </script>
</body>
</html>

【讨论】：

地址是一个字段而不是一个页面
抱歉，这是一个要求