Question

私は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({ 
 
    anchor: "#details-button", 
 
    origin: "bottom right", 
 
});

だが、それは動作しません。毎回、ポップアップは、クリックしたボタンの右下ではなく、最初の行のボタンの右下に表示されます。

生成されたhtmlを確認すると、すべてのボタンのidは同じです（details-button）。したがって、ポップアップは常に最初の詳細ボタンに関連して表示されます。

更新：

これは私の変更ソリューションですが、まだ動作しません。

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

誰でも助けることができますか？

Answer 1

列テンプレートで静的IDを使用すると、自然に行ごとに繰り返されるため、実行可能なオプションではありません。静的ID部分（ "details-button"）をグリッドdataItemのID値と連結することができます。このようにして、一意の詳細ボタンIDを持つことになります。

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

次に、生成されたボタンIDを使用するように剣道UIポップアップ初期化コードを変更します。

更新

それは剣道UIカラムテンプレートの外側に配置されているため、剣道UIポップアップ初期化ステートメントは、バインディング式（#: ... #）を使用することができません。 showDetails関数に渡されたdataItemオブジェクトを使用し、anchor設定の場合にはmyIdを再度取得して連結します。

アップデート2

あなたがアガン何度も同じ要素から新しい剣道UIポップアップインスタンスを作成していることが表示されます。私はdestroy（DOMも削除される）古いインスタンスを推奨し、新しい<div>をページに追加し、そこから新しいPopupを作成します。

popuppの部分についてはわかりませんが、コピー貼りのエラーまたはJSエラーが表示されるはずです。

更新3

サイドノートでは、同様の挙動は以下のように構成された単一の剣道UIツールチップのインスタンスを用いて達成することができる。

• ツールチップウィジェット要素でありますグリッドtable
• 適切なfilterセットがあり、詳細ボタンを指しています。彼ら
• showOnのCSSクラスを介して現在の目標に応じて、ツールヒントの内容を設定するcontent関数を使用"click"
• に設定されています。

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