rozwijanego menu ukryte wewnątrz kendogrid

Question

W moim kendogrid muszę pokazać menu rozwijaną (na kliknięcia przycisku) i pozwalają kolumna rozmiaru, pokazując pasek przewijania, jeśli moje dane są zbyt duże dla siatki. Mam problemy z ustawieniami przepełnienia.

żywo Próbka http://jsbin.com/gayibo/4/edit?css,output

---

Jeżeli ustawić overflow-y: scroll na moim siatki, menu rozwijane nie zawsze jest widoczny.

---

Z drugiej strony, jeśli mogę ustawić overflow-y: visible widzę przepełnione wiersze po prawej stronie.

Próbowałem już wszystkiego, każdej możliwej kombinacji przepełnienia, zmieniając z-indeksy, pokazując żółty div na górze moich danych o nadmiernym wierszu. Nic nie działało.

Próbowałem również zmianę menu rozwijane do position: fixed ale daje problemy podczas przewijania okna z jakiegokolwiek powodu (bo to menu nie jest wyświetlane tuż pod przyciskiem)

np: pozycjonowanie Fixed menu

Przeglądarka: Chrome/Firefox (FF wymaga więcej rozmiaru, aby uzyskać ten sam efekt)

Twitter-bootstrap: 2.3.2

Answer 1

Próbowałem wiele różnych rozwiązań, ale w końcu zdecydowałem się użyć context-menu plugin, bootstrap tematyczne, wiążąc go do mojego kliknięcia przycisku. Opublikuję przykładowy kod, mając nadzieję, że będzie on użyteczny dla innych w tej samej sytuacji.

To jest plugin kontekstowe menu Używam: http://sydcanem.github.io/bootstrap-contextmenu/

Polega ona trochę kodowania i wtyczki, ale uważam, że wynik jest naprawdę doskonały dla mojego (wizualna) potrzebuje.

Oto jsBin

Answer 2

W przeszłości doświadczyłem tego również w przeszłości z nieco odmiennym scenariuszem. Wiadomości sprawdzania poprawności danych Kendo Grid będą ukrywane podczas sprawdzania ostatniego wiersza.

Nie wydaje się, że jest to właściwy sposób, aby rozwiązać ten problem, bez komplikacji, ale jeśli jesteś w porządku z tym hackerem, możesz użyć tego kodu.

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

Wszystko, co robię, to po prostu przewijanie do dołu po kliknięciu jednego z niestandardowych przycisków siatki.

• 500 jest dowolną wysokość, która jest większa niż zawartość div siatki Kendo i wysokości rozwijanej połączeniu.
• setTimeout jest tam, aby wykonać przewijanie po utworzeniu paska przewijania.

Jeśli lista rozwijana nie powoduje utworzenia paska przewijania, oznacza to, że żadne menu nie jest ukryte, a funkcja przewijania nie wykonuje żadnych czynności, ponieważ nie ma paska przewijania. Jeśli menu rozwijane wywołuje tworzenie paska przewijania, oznacza to, że jest ukryte i przewijanie do samego dołu jest w porządku.

zaktualizowaną jsBin ...