如何在剑道列模板中为元素设置弹出位置的锚点 [英] How to set up popup position's anchor for element in kendo column template

问题描述

我使用kenod UI创建我的Web UI.我有一个像下面这样的列模板

I use kenod UI to create my Web UI. I have a column template like below

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

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

I want to popup a window every time I click the details button, and the popup's position should be at the bottom right of the button which I click. Here's what I do currently

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

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

But it doesn't work. Every time, the popup display at the bottom right of the button in the first row, not the bottom right of the button which I click.

检查生成的html，所有按钮的ID均相同(详细信息按钮).因此，弹出窗口始终显示与第一个详细信息按钮相关的信息.

Checking the generated html, all of the buttons' id are same(details-button). So the popup always display related to the first details-button.

已更新:

这是我更改过的解决方案，但仍然无法正常工作.

This is my changed solution, but still doesn't work.

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

Using a static ID in a column template will naturally repeat it for each row, so this is not a viable option. You can concatenate the static ID part ("details-button") with the ID value of the Grid dataItem and in this way you will have truly unique detail button IDs.

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

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

Then, change the Kendo UI Popup initialization code to use the generated button ID.

更新

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

The Kendo UI Popup initialization statement cannot use a binding expression (#: ... #), because it is placed outside the Kendo UI column template. Use the dataItem object that is passed to the showDetails function and retrieve and concatenate myId again for the anchor setting.

更新2

似乎您是通过agan遍历同一元素来创建新的Kendo UI Popup实例.我建议您破坏旧实例(该实例也会删除其DOM)，然后在页面上添加一个新的<div>并从中创建一个新的弹出窗口.

It appears that you are creating a new Kendo UI Popup instance from the same element over and over agan. I recommend you to destroy the old instance (which will also remove its DOM), then append a new <div> to the page and create a new Popup from it.

我不确定popupp部分，它可能是复制粘贴错误，或者您应该在此出现JS错误.

I am not sure about the popupp part, it may be a copy-paste error or you should be getting a JS error there.

更新3

另一方面，可以通过以下方式配置单个Kendo UI Tooltip实例来实现类似的行为:

On a side note, a similar behavior can be achieved with a single Kendo UI Tooltip instance that is configured in the following way:

• 工具提示小部件元素是网​​格table
• 有一个适当的filter集，它指向详细信息按钮，例如通过他们自己的CSS类
• showOn设置为"click"
• 使用content功能来设置工具提示内容，具体取决于当前目标.

• the tooltip widget element is the Grid table
• there is an appropriate filter set, that points to the detail buttons, e.g. via a CSS class of theirs
• showOn is set to "click"
• use the content function to set the tooltip content, depending on the current target.

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

这篇关于如何在剑道列模板中为元素设置弹出位置的锚点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！