如何为剑道列模板中的元素设置弹出位置的锚点

我使用 kendo UI 来创建我的 Web UI。我有一个如下所示的列模板

var template = "<input id='details-button' type='image' src='images/detail_button.png' ng-click='showDetals(this.dataItem)'/>#: Contact #";

我想每次单击详细信息按钮时都会弹出一个窗口，并且弹出窗口的位置应该位于我单击的按钮的右下角。这就是我目前所做的

var popup = $("#detailsPopup");
popup.kendoPopup({
     anchor: "#details-button",
     origin: "bottom right",
});

但这不起作用。每次，弹出窗口都会显示在第一行按钮的右下角，而不是我单击的按钮的右下角。

检查生成的 html，所有按钮的 id 都是相同的（details-button）。因此，弹出窗口始终显示与第一个详细信息按钮相关的内容。

Updated:

这是我改变的解决方案，但仍然不起作用。

function popupDetails(item) {
            detailsGrid.kendoGrid({
                columns: ...,
                dataSource: item.Details
            });

            var anchor = "#details-button" + item.id;
            var popup = $("#details-popup");
            popupp.kendoPopup({
                anchor: anchor,
                origin: "bottom right",
            });
            
            popup.data("kendoPopup").open();
        }

有人可以帮忙吗？

在列模板中使用静态 ID 自然会为每一行重复它，因此这不是一个可行的选择。您可以将静态 ID 部分（“详细信息按钮”）与网格数据项的 ID 值连接起来，这样您将拥有真正唯一的详细信息按钮 ID。

template: "<input id='details-button#: MyGridItemID #' />"

然后，更改 Kendo UI Popup 初始化代码以使用生成的按钮 ID。

Update

Kendo UI Popup初始化语句不能使用绑定表达式（#: ... #），因为它放置在 Kendo UI 列模板之外。使用dataItem传递给的对象showDetails函数并检索和连接myId再次为anchor环境。

Update 2

看来您正在一遍又一遍地从同一元素创建一个新的 Kendo UI Popup 实例。我推荐你destroy http://docs.telerik.com/kendo-ui/intro/widget-basics/destroy旧实例（这也将删除其 DOM），然后附加一个新实例<div>到该页面并从中创建一个新的弹出窗口。

我不确定popupp部分，这可能是复制粘贴错误，或者您应该在那里收到 JS 错误。

Update 3

附带说明一下，可以使用按以下方式配置的单个 Kendo UI Tooltip 实例来实现类似的行为：

• 工具提示小部件元素是网​​格table
• 有一个合适的filter设置，指向详细按钮，例如通过他们的 CSS 类
• showOn被设定为"click"
• use the content函数设置工具提示内容，具体取决于当前目标。

http://docs.telerik.com/kendo-ui/api/javascript/ui/tooltip http://docs.telerik.com/kendo-ui/api/javascript/ui/tooltip