kendoui фильтр меню/форма

Question

Я бы хотел, чтобы у вас была кнопка, и когда пользователь нажимает на нее, форма фильтра выталкивается чуть ниже кнопки. Я бы хотел использовать элементы управления Kendo UI для достижения эффекта.

В самом деле, что мне нужно, это почти точно «фильтрация», которые можно найти на этом примере:

http://demos.telerik.com/kendo-ui/grid/filter-menu-customization

Однако я не имею дело с сеткой данных, так что я могу» t используйте этот пример выше.

Answer 1

Возможны различные варианты реализации. Здесь я опишу один, основанный на kendoWindow, так как тогда у вас есть много возможных настроек для этой формы фильтрации.

Это HTML, который включает в себя кнопку:

<div> 
    This is the container that includes a 
    <button id="filter" class="k-button">Filter</button> 
    that is used to display a form 
</div> 

И затем вы определяете форму HTML. Пример:

<div id="form"> 
    <div>Filtering value:<input data-role="autocomplete"/></div> 
    <button class="k-button">Filter</button> 
</div> 

Выполнение инициализации формы является:

var form = $("#form").kendoWindow({ 
    title : "Filter", 
    visible : false, 
    modal : false, 
    draggable: false 
}).data("kendoWindow"); 

Где первоначально мы установили форму, как не видно.

Вы можете определить его как modal, draggable или даже определить эффект открытия и закрытия.

Наконец, для открытия и размещения формы просто ржали кнопку следует:

$("#filter").on("click", function(e) { 
    // Find clicked button 
    var button = $(e.currentTarget); 
    // and get its position 
    var pos = button.offset(); 
    // shift down the form to open by the height of the button + 5px (margin) 
    pos.top += button.outerHeight() + 5; 
    // Apply positioning to the form 
    form.wrapper.css(pos); 
    // display form 
    form.open(); 
}); 

Вы можете увидеть это здесь: http://jsfiddle.net/OnaBai/mpq6k/