Jak ustawić kotwicę pozycji wyskakującego dla elementu w szablonie kolumny kendo

Question

Używam interfejsu użytkownika Kenod do tworzenia mojego interfejsu internetowego. Mam szablon kolumny jak poniżej

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

Chcę wyświetlić okienko każdym razem kliknąć przycisk Szczegóły, a pozycja popup powinien być na dole po prawej stronie przycisku, który klikam . Oto, co robię obecnie

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

Ale to nie działa. Za każdym razem wyskakujący ekran w prawym dolnym rogu przycisku w pierwszym wierszu, a nie w prawym dolnym rogu przycisku, który klikam.

Sprawdzanie wygenerowanego html, wszystkie identyfikatory przycisków są takie same (przycisk szczegółów). Tak więc wyskakujące okienko zawsze wyświetla się w odniesieniu do pierwszego przycisku szczegółów.

Aktualizacja:

To jest mój zmieniony rozwiązanie, ale nadal nie działa.

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

Każdy może pomóc?

Answer 1

Użycie statycznego ID w szablonie kolumny spowoduje jego naturalne powtórzenie dla każdego wiersza, więc nie jest to realna opcja. Możesz połączyć statyczną część ID ("details-button") z wartością ID elementu Grid dataItem i dzięki temu będziesz miał naprawdę unikatowe identyfikatory przycisków szczegółów.

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

Następnie zmień kod inicjujący Popup Kendo UI, aby użyć wygenerowanego identyfikatora przycisku.

Aktualizacja

Kendo UI oświadczenie inicjalizacji Popup nie można użyć wyrażenia wiązania (#: ... #), ponieważ jest on umieszczony na zewnątrz szablonu kolumny Kendo UI. Użyj obiektu dataItem, który jest przekazywany do funkcji showDetails i ponownie pobiera i łączy myId dla ustawienia anchor.

Aktualizacja 2

Wydaje się, że tworzysz nową instancję Kendo UI Popup z tego samego elementu w kółko Agan. Polecam ci starą instancję (która również usunie jej DOM), a następnie dołączę do niej nową <div> i utworzę z niej nowe Popup.

Nie jestem pewien co do części popupp, może to być błąd kopiuj-wklej lub powinien pojawić się błąd JS.

Update 3

Na marginesie, podobne zachowanie można osiągnąć za pomocą pojedynczej instancji Kendo UI Tooltip, który jest skonfigurowany w następujący sposób:

• element widget podpowiedź jest Siatka table
• jest odpowiedni zestaw filter, który wskazuje na przyciski szczegółów, np. za pośrednictwem klasy CSS ich
• showOn jest ustawiony na "click"
• użyć funkcji content ustawić treść podpowiedzi, w zależności od aktualnego celu.

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