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

问题描述

我使用 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({锚点:#details-button"，来源:右下角"，});

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

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

更新:

这是我更改后的解决方案，但仍然无效.

function popupDetails(item) {detailsGrid.kendoGrid({列: ...，数据源:item.Details});var anchor = "#details-button" + item.id;var popup = $("#details-popup");popupp.kendoPopup({锚:锚，来源:右下角"，});popup.data("kendoPopup").open();}

有人可以帮忙吗?

解决方案

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

template: ""

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

更新

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

更新 2

您似乎是从同一个元素一遍又一遍地创建一个新的 Kendo UI Popup 实例.我建议您销毁旧实例(这也将删除它的 DOM)，然后将一个新的

附加到页面并从中创建一个新的 Popup.

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

更新 3

顺便说一句，使用按以下方式配置的单个 Kendo UI Tooltip 实例可以实现类似的行为:

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

http://docs.telerik.com/kendo-ui/api/javascript/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.

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

Updated:

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

Anyone can help?

解决方案

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 #' />"

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

Update

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.

Update 2

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.

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

Update 3

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

• 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

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