Kendo sütun şablonunda öğe için açılır pencerenin bağlantı noktası nasıl ayarlanır

Question

Web kullanıcı arayüzüm oluşturmak için kenod UI kullanıyorum. Aşağıda

Bir pencereyi ben ayrıntılar butonuna tıklayın her zaman pop-up istiyorum

var template = "<input id='details-button' type='image' src='images/detail_button.png' ng-click='showDetals(this.dataItem)'/>#: Contact #";

gibi bir sütun şablonu var ve Popup konumum tıklayın düğmesinin sağ alt tarafındaki olmalıdır . İşte şu anda

var popup = $("#detailsPopup"); 
 
popup.kendoPopup({ 
 
    anchor: "#details-button", 
 
    origin: "bottom right", 
 
});

böyle yapar Ama çalışmıyor. Her seferinde, ilk satırdaki düğmenin sağ alt köşesindeki açılır pencere, tıklattığım düğmenin sağ alt köşesinde değil.

Oluşturulan html'nin kontrol edilmesi, tüm düğmelerin adının aynıdır (Ayrıntılar düğmesi). Bu yüzden açılır pencere her zaman ilk ayrıntılar düğmesiyle ilgili görüntülenir.

Güncel:

Bu benim değişen bir çözümdür, ama yine de çalışmıyor.

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

Herkes yardımcı olabilir?

Answer 1

Sütun şablonunda statik bir kimlik kullanmak her satır için doğal olarak tekrar eder, bu nedenle bu geçerli bir seçenek değildir. Statik ID parçasını ("detaylar-butonu") Grid dataItem'in ID değeriyle birleştirebilirsiniz ve bu sayede gerçekten benzersiz bir detay buton kimliğine sahip olacaksınız. Oluşturulan düğme kimliğini kullanmak için Kendo UI Popup başlatma kodunu değiştirin. Bu Kendo UI kolon şablon dışına yerleştirilmiştir, çünkü

Güncelleme

Kendo UI Popup başlatma komutu, bir bağlanma ifade (#: ... #) kullanamaz. showDetails işlevine iletilen dataItem nesnesini kullanın ve anchor ayarı için myId yeniden alın ve birleştirin.

Güncelleme 2

Size defalarca AĞAN aynı elementin yeni Kendo UI Popup örneğini oluştururken anlaşılıyor. Ben destroy eski örneğini (aynı zamanda kendi DOM kaldıracak), sonra sayfaya yeni bir eklemek ve ondan yeni bir Popup oluşturmanızı öneririz.

popupp bölümünden emin değilim, bir kopyalama-yapıştır hatası olabilir veya burada bir JS hatası alıyor olmalısınız.

Yan not Güncelleme 3

benzer bir davranış aşağıdaki şekilde yapılandırılmış tek Kendo UI ipucu örneği ile elde edilebilir:

• ipucu eklendi elemanıdır Grid table
• , ayrıntı düğmelerine işaret eden uygun bir filter kümesi var, örn. onların
• showOn bir CSS sınıfı ile mevcut hedefe bağlı olarak, ipucu oranını ayarlamaya content işlevini kullanın "click"
• ayarlanır.

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