javascript - 如何在剑道列模板中为元素设置弹出位置的 anchor

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 部分(“详细信息按钮”)与 Grid dataItem 的 ID 值连接起来，这样您将拥有真正唯一的详细信息按钮 ID。

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

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

更新

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

更新 2

看来您正在从同一元素一遍又一遍地创建一个新的 Kendo UI Popup 实例。我推荐你destroy旧实例(也将删除其 DOM)，然后附加一个新的 <div>到页面并从中创建一个新的弹出窗口。

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

更新 3

附带说明，可以使用按以下方式配置的单个 Kendo UI 工具提示实例实现类似的行为:

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

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