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

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 #";

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, eg 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

    链接地址: http://www.djcxy.com/p/93000.html

    上一篇: 在Anaconda Navigator上找不到软件包。 接下来做什么?

    下一篇: 如何设置kendo列模板中元素的弹出位置的锚点