Trình đơn thả xuống ẩn bên trong kendogrid

Question

Trong tôi kendogrid tôi cần phải hiển thị một menu thả xuống (trên nút nhấp chuột) và cho phép thay đổi kích thước cột, cho thấy một thanh cuộn nếu dữ liệu của tôi là quá lớn đối với lưới điện. Tôi đang gặp sự cố với cài đặt tràn.

Sống Mẫu http://jsbin.com/gayibo/4/edit?css,output

---

Nếu tôi đặt overflow-y: scroll vào lưới của tôi, trình đơn thả xuống không phải lúc nào cũng nhìn thấy được.

---

Mặt khác, nếu tôi đặt overflow-y: visible, tôi thấy hàng tràn ở bên phải.

Tôi đã thử mọi thứ, mọi kết hợp tràn có thể, thay đổi chỉ mục z, hiển thị div màu vàng trên đầu dữ liệu hàng thừa của tôi. Không có gì hiệu quả.

Tôi cũng đã cố gắng thay đổi menu thả xuống để position: fixed nhưng nó mang lại vấn đề khi bạn đang di chuyển cửa sổ cho bất cứ lý do (vì sau đó menu không hiển thị ngay dưới nút)

ví dụ: vị trí cố định của menu

Trình duyệt: Chrome/Firefox (ff đòi hỏi nhiều thay đổi kích thước để có được những tác dụng tương tự)

Twitter Bootstrap: 2.3.2

Answer 1

tôi đã cố gắng rất nhiều giải pháp khác nhau nhưng cuối cùng tôi đã chọn để sử dụng một context-menu plugin, bootstrap theo chủ đề, ràng buộc nó để nút bấm của tôi. Tôi sẽ đăng một mã mẫu, hy vọng nó sẽ hữu ích cho những người khác trong cùng một tình huống.

Đây là plugin menu ngữ cảnh Tôi đang sử dụng: http://sydcanem.github.io/bootstrap-contextmenu/

Nó đòi hỏi một chút mã hóa và một plugin nhưng tôi thấy rằng kết quả là thực sự tuyệt vời cho tôi (hình ảnh) cần.

Đây là jsBin

Answer 2

Trong quá khứ, tôi cũng đã trải nghiệm điều này trong quá khứ với một kịch bản hơi khác. Thông báo xác thực dữ liệu của Kendo Grid sẽ bị ẩn khi xác thực hàng cuối cùng.

Có vẻ như không phải là cách thích hợp để khắc phục sự cố này mà không gặp sự cố, nhưng nếu bạn đồng ý với bản hack này, bạn có thể sử dụng mã này.

 $('#grid').on('click', '.btn.btn-mini.dropdown-toggle',function(e){ 
     setTimeout(function(){ 
      var gridSpace = $('.k-grid-content'); 
      gridSpace.animate({scrollTop:500}); 
     },50); 
     }); 

Tất cả những gì tôi đang làm chỉ đơn giản là cuộn xuống cuối mỗi khi tôi nhấp vào một trong các nút lưới tùy chỉnh của bạn.

• 500 là chiều cao tùy ý lớn hơn div nội dung lưới kendo và chiều cao thả xuống được kết hợp.
• setTimeout ở đó để thực hiện cuộn sau khi thanh cuộn được tạo.

Nếu trình đơn thả xuống không gây ra thanh cuộn, điều đó có nghĩa là không có danh sách thả xuống bị ẩn và cuộnTop không có gì vì không có thanh cuộn. Nếu một trình đơn thả xuống thực hiện việc tạo thanh cuộn, thì điều đó có nghĩa là nó được ẩn đi và bạn có thể cuộn xuống dưới cùng.

của bạn được cập nhật jsBin ...