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:
table
filter
set, that points to the detail buttons, eg via a CSS class of theirs showOn
is set to "click"
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