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

Question

我使用kenod 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都相同(详细信息按钮).因此弹出窗口始终显示与第一个详细信息按钮相关.

更新:

这是我改变的解决方案,但仍然无效.

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();
        }

有人可以帮忙吗？

Answer 1

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

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

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

更新

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

更新2

看来您正在一遍又一遍地从同一元素创建一个新的 Kendo UI Popup 实例。我建议您销毁旧实例（这也会删除其 DOM），然后将新实例附加<div>到页面并从中创建新的 Popup。

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

更新3

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

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

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