केंडो कॉलम टेम्पलेट में तत्व के लिए पॉपअप स्थिति के एंकर को कैसे सेट करें

Question

मैं अपना वेब यूआई बनाने के लिए केनोड यूआई का उपयोग करता हूं। मैं नीचे

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", 
 
});

है लेकिन यह काम नहीं करता। हर बार, पहली पंक्ति में बटन के निचले दाएं भाग में पॉपअप डिस्प्ले, जो बटन क्लिक करता है उसके नीचे दाईं ओर नहीं।

जेनरेट किए गए एचटीएमएल की जांच, सभी बटन 'आईडी समान हैं (विवरण-बटन)। तो पॉपअप हमेशा पहले विवरण-बटन से संबंधित प्रदर्शित होता है।

अपडेट किया गया:

यह मेरा बदला हुआ समाधान है, लेकिन अभी भी काम नहीं करता।

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

कॉलम टेम्पलेट में एक स्थिर आईडी का उपयोग करके प्रत्येक पंक्ति के लिए इसे स्वाभाविक रूप से दोहराया जाएगा, इसलिए यह एक व्यवहार्य विकल्प नहीं है। आप ग्रिड डेटा इटैम के आईडी मान के साथ स्थिर आईडी भाग ("विवरण-बटन") को जोड़ सकते हैं और इस तरह आपके पास वास्तव में अनूठी विस्तार बटन आईडी होगी।

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

फिर, उत्पन्न बटन आईडी का उपयोग करने केंडो यूआई पॉपअप प्रवर्तन कोड बदल जाते हैं।

अद्यतन

केंडो यूआई पॉपअप प्रारंभ बयान, एक बाध्यकारी अभिव्यक्ति (#: ... #) का उपयोग नहीं कर सकते हैं क्योंकि यह केंडो यूआई स्तंभ टेम्पलेट के बाहर रखा गया है। ऑब्जेक्ट का उपयोग करें जो showDetails फ़ंक्शन पर पास हो गया है और anchor सेटिंग के लिए फिर से पुनर्प्राप्त करें और myId को पुनः प्राप्त करें।

अद्यतन 2

ऐसा लगता है कि आप अधिक से अधिक Agan एक ही तत्व से एक नया केंडो यूआई पॉपअप उदाहरण बना रहे हैं। मैं आपको destroy पुराना उदाहरण (जो इसके डीओएम को भी हटा देगा) को अनुशंसा करता है, फिर पृष्ठ पर एक नया <div> संलग्न करें और इससे एक नया पॉपअप बनाएं।

मुझे popupp भाग के बारे में निश्चित नहीं है, यह एक कॉपी-पेस्ट त्रुटि हो सकती है या आपको वहां एक जेएस त्रुटि मिलनी चाहिए।

अद्यतन 3

एक तरफ ध्यान दें पर, एक समान व्यवहार एक भी केंडो यूआई टूलटिप उदाहरण है कि निम्नलिखित तरीके से कॉन्फ़िगर किया गया है के साथ प्राप्त किया जा सकता है:

• टूलटिप विजेट तत्व है ग्रिड table
• एक उपयुक्त filter सेट है, जो विस्तार बटन को इंगित करता है, उदाहरण के लिए उनकी
• showOn की एक CSS वर्ग के माध्यम से content फ़ंक्शन का उपयोग वर्तमान लक्ष्य पर निर्भर करता है, टूलटिप सामग्री स्थापित करने के लिए "click"
• को तैयार है।

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