kendoui menu filter / form

Question

I would like to have a button and when the user clicks on it a filter form pops down just below the button. I would like to utilize Kendo UI controls to achieve the effect.

In fact, what I need is almost exactly the 'filtering' that can be found on this example:

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

However, I'm not dealing with a grid of data so I can't use that example above.

Answer 1

There are different possible implementations. Here I will describe one based on kendoWindow since then you have a lot of possible customizations for that filtering form.

This is the HTML that includes the button:

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

And then you define the HTML form. Example:

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

Doing the form initialization is:

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

Where initially we set the form as not visible.

You can define it as modal, draggable or even define the opening and closing effect.

Finally, for opening and placing the form just bellow the button you should:

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

You can see this here : http://jsfiddle.net/OnaBai/mpq6k/