2014-12-14 6 views
8

В моем kendogrid мне нужно, чтобы показать меню выпадающего (по нажатию кнопки) и позволяют колонкам изменения размера, показывающей полосу прокрутки, если мои данные слишком велики для сетки. У меня проблемы с настройками переполнения.меню Выпадающего скрыто внутри kendogrid

Живой Образец http://jsbin.com/gayibo/4/edit?css,output


Если я устанавливаю overflow-y: scroll на моей сетке, выпадающее меню не всегда видна. enter image description here


С другой стороны, если я изложу overflow-y: visible, я вижу, переполняющие строки справа. enter image description here

Я пробовал все, всякую комбинацию переполнения, меняя z-индексы, показывая желтый div поверх моих лишних данных. Ничего не получилось.

Я также попытался изменить выпадающее меню для position: fixed но это создает проблемы, когда вы прокручиваете окно какой-либо причине (потому что тогда меню не отображается прямо под кнопкой)

menu position : fixed например: Фиксированное позиционирование меню

Браузер: Chrome/Firefox (лл требует большего изменения размера, чтобы получить тот же эффект)

Twitter-Bootstrap: 2.3.2

ответ

1

Я пробовал много разных решений, но в конце концов я решил использовать context-menu plugin, самозагрузки тематическая, связывая его с моей кнопкой мыши. Я отправлю пример кода, надеясь, что он будет полезен другим в той же ситуации.

Это плагин контекстного меню я использую: http://sydcanem.github.io/bootstrap-contextmenu/

Она включает в себя немного кодирования и плагин, но я считаю, что результат действительно отлично подходит для моих (визуального) потребностей.

Вот что jsBin

enter image description here

7

В прошлом я также испытал это в прошлом со слегка другим сценарием. Собственные сообщения проверки данных Kendo Grid будут скрыты при проверке последней строки.

Кажется, что нет правильного способа исправить это, если все становится беспорядочным, но если вы в порядке с этим взломом, вы можете использовать этот код.

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

Все, что я делаю, просто прокручивается к основанию всякий раз, когда я нажимаю на одну из ваших пользовательских кнопок сетки.

  • 500 - произвольная высота, которая больше, чем содержание содержимого сетки kendo, и выпадающая высота объединена.
  • setTimeout для выполнения прокрутки после создания полосы прокрутки.

Если выпадающее меню не вызывает создание полосы прокрутки, это означает, что выпадающее меню не скрыто, а scrollTop ничего не делает, потому что нет полосы прокрутки. Если выпадающее меню вызывает создание полосы прокрутки, значит, оно скрыто, и вы можете прокручивать до самого низа.

Ваш обновленный jsBin ...

+0

Спасибо за ваш ответ, я пытался что-то подобное, но это было слишком Hacky. Также было трудно определить произвольную высоту, например 500, потому что мое содержимое меню является динамическим. Я закончил использовать плагин, я добавлю его в качестве ответа – Vland

Смежные вопросы