Question

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

检查生成的html，所有按钮＆＃39; id相同（详情按钮）。因此弹出窗口始终显示与第一个详细信息按钮相关。

更新

这是我改变的解决方案，但仍然无效。

＆＃13;

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

＆＃13;

任何人都可以提供帮助吗？

Answer 1

在列模板中使用静态ID会自然地为每行重复一次，因此这不是一个可行的选择。您可以将静态ID部分（＆＃34; details-button＆＃34;）与Grid dataItem的ID值连接起来，这样您将拥有真正独特的详细按钮ID。

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

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

<强>更新

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

更新2

您似乎正在使用相同的元素在agan上创建一个新的Kendo UI Popup实例。我建议你destroy旧实例（也将删除它的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

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

1 个答案: