Cách thiết lập neo của vị trí bật lên cho phần tử trong mẫu cột kendo

Question

Tôi sử dụng giao diện người dùng kenod để tạo giao diện người dùng web của mình. Tôi có một cột mẫu như dưới đây

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

Tôi muốn bật lên một cửa sổ mỗi khi tôi nhấp vào nút chi tiết, và vị trí của cửa sổ bật lên nên có ít góc dưới bên phải của nút mà tôi nhấp . Dưới đây là những gì tôi đang làm

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

Nhưng nó không hoạt động. Mỗi lần, cửa sổ bật lên hiển thị ở dưới cùng bên phải của nút ở hàng đầu tiên, không phải ở dưới cùng bên phải của nút mà tôi nhấp vào.

Kiểm tra html được tạo, tất cả id của nút đều giống nhau (nút chi tiết). Vì vậy, cửa sổ bật lên luôn hiển thị liên quan đến nút chi tiết đầu tiên.

Cập nhật:

Đây là giải pháp thay đổi của tôi, nhưng vẫn không hoạt động.

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

Bất cứ ai có thể giúp đỡ?

Answer 1

Sử dụng ID tĩnh trong mẫu cột sẽ tự động lặp lại nó cho mỗi hàng, vì vậy đây không phải là tùy chọn khả thi. Bạn có thể ghép nối phần ID tĩnh ("chi tiết-nút") với giá trị ID của Grid dataItem và theo cách này bạn sẽ có ID nút chi tiết thực sự độc đáo.

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

Sau đó, thay đổi mã khởi tạo Popup UI Kendo để sử dụng ID nút được tạo.

Cập nhật

Các Kendo UI tuyên bố khởi Popup không thể sử dụng một biểu thức ràng buộc (#: ... #), bởi vì nó được đặt bên ngoài các mẫu cột Kendo UI. Sử dụng đối tượng dataItem được chuyển đến hàm showDetails và truy xuất và ghép nối lại myId cho cài đặt anchor.

Cập nhật 2

Có vẻ như bạn đang tạo ra một trường hợp Kendo UI Popup mới từ cùng một nguyên tố hơn và hơn agan. Tôi khuyên bạn nên destroy phiên bản cũ (cũng sẽ xóa DOM của nó), sau đó thêm <div> mới vào trang và tạo Cửa sổ bật lên mới từ đó.

Tôi không chắc chắn về phần popupp, đó có thể là lỗi sao chép-dán hoặc bạn sẽ gặp phải lỗi JS ở đó.

Cập nhật 3

Trên một mặt lưu ý, một hành vi tương tự có thể đạt được với một trường hợp Kendo UI Tooltip đơn được cấu hình theo cách sau:

• yếu tố tooltip Widget là Lưới table
• có một tập hợp filter thích hợp, trỏ đến các nút chi tiết, ví dụ: thông qua một lớp CSS của họ
• showOn được thiết lập để "click"
• sử dụng content chức năng để thiết lập các nội dung tooltip, tùy thuộc vào mục tiêu hiện tại.

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