Programmatically showing filter menu

[Mark]

Is there a way to programmatically show a filter menu in the grid?

 

basically, we are implementing a mobile grid out of kendo grid for angular. We made it look like a card stacked view so it has no column headers.

We need to show filter menu on each column programmatically. Is there a way to do this?

 

Thanks!

#kendoui #angular2+ #grid #filter

[Dimiter Topalov]

Hi Mark,

I am afraid I cannot fully understand the desired layout and functionality based on the provided information. If there are no column headers and no differentiated columns, where are the filter menu icons supposed to be displayed?

Also, do you need a custom filter menu that will provide the opportunity to filter the whole Grid, or separate filter menus (one for each Grid column) that will filter the Grid by the respective field the column is bound to?

Can you please describe the scenario and the desired functionality in further details, possibly providing some screenshots of how does the customized Grid layout look and how it is supposed to look with the filter menu icons added, so I can try suggesting the approach that is most suitable to the specific use case? Thank you in advance.

Regards,
Dimiter Topalov
Progress Telerik

[Mark]

We are supposed to launch the filter pop-up via a custom filter icon located at the top of the grid. See the screen attachment. The filter icon above will display all the list of columns. Upon clicking a column name, it should launch or open the filter menu/pop up programmatically.

[Svet]

Hi Mark,

Thank you for the additional details and screenshot.

We can use the [filterable] input property of the column component in order to display the filter UI or no for the specific column.

I hope this helps. Let me know in case further assistance is required for this case.

Regards,
Svetlin
Progress Telerik

[Morten]

A little late, however, I recently did this in jquery:

// open first column menu
let $filerBtn = $("#grid a.k-grid-column-menu.k-grid-header-menu span:first()");
$filerBtn.click();

// always expand sub menu when column menu is opened
$("#grid").kendoGrid({
  ...
  columnMenuOpen: function (e) {
var menu = e.container.children().data("kendoMenu");
//menu.open(menu.element.find("li:first"));
        menu.open(menu.element.find("li.k-filter-item:first"));
}