How to set up popup position's anchor for element in kendo column template

Question

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?

Answer 1

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