Grid with Excel-like column filters

[DAN]

I was able to create Excel-like column filters using Filterable(f => f.Multi(true)... But, when the filters are initialized, the checkboxes are all blank and the user has to check what they want to filter on.

The way Excel behaves is that all checkboxes are selected in a filtered list (see attachment). Users then un-select what they don't want to see.

I need my column filters to behave the way Excel filters behave.

[Stefan]

Hello, DAN,

Currently, the desired result can be achieved by programmatically selecting the check all checkbox on the filterMenuInit event:

http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#events-filterMenuInit

I made example demonstrating this:

http://dojo.telerik.com/atiYIC

Please have in mind that we have the excel-like-filter menu under consideration for a built-in property that will create the excel-like-menu, for now, we do not have a specific ETA, but it is our To-Do list.

Regards,
Stefan
Progress Telerik

[Giacomo]

Hi!

There is an example or some documentation for doing the same thing with angular and not jquery?
http://dojo.telerik.com/atiYIC

Thanks

[Ivan Danchev]

Hi,

We have a suit of components specifically designed to work in Angular - Kendo UI for Angular. For questions related to Angular, please open a thread in the Kendo UI for Angular forums: https://www.telerik.com/forums/kendo-angular-ui

 

[DAN]

Can you show me the razor syntax on that one?

[Stefan]

Hello, DAN,

The MVC syntax is similar as this is using only client-side logic.

The event has to be attached:

.Events(events => events
    .FilterMenuInit("onFilterMenuInit")
)

And the same function to be called on the client:

<script>
 function onFiltermenuInit(e){
  $(e.container).find('.k-check-all').click()
 }
</script>

Regards,
Stefan
Progress Telerik

[DAN]

This is what I have for one of my columns
columns.Bound(c => c.Position).Width(140).Filterable(
          f => f.Multi(true).Search(true).CheckAll(false).ItemTemplate("ProjectRequests.positionTemplate"))
                .Locked(true).Lockable(false)
                .HtmlAttributes(new { Class = "request-details-link", data_id = "#=RequestId#", style = "text-align:left;", title = "#=Position#" });

If I remove the CheckAll(false) or change it to CheckAll(true) I get the first attached file (a filter with nothing in it)[SelectAllTrue.png]. Otherwise, I get the other attached file without the "check all" option [no-checkall.png].

[DAN]

It looks like it's the ItemTemplate that is causing my issues. I kind of need that since there is a case in one of my filters where there is an empty value. I want that value to look like a checkbox followed by [No Value] and not a checkbox followed by nothing. Judging from the JS errors I am getting it looks like the template styling is being applied before all the content on the page is loaded. Is there a way to apply the item template after the page loads?

[Stefan]

Hello, DAN,

In general, the template should work as expected with this approach, the only difference is that the built-in class "k-check-all" is now probably changed inside the template.

Also, the itemTemplate should be executed just before the filter menu is opened:

https://dojo.telerik.com/IBAyi 

If additional assistance is needed, please send a runnable example reproducing the issue and I will gladly assist.

Regards,
Stefan
Progress Telerik

[Mikael]

Any more info on the ETA for an Excel-like filtering in the grid?

[Nikolay]

Hello Fredrik,

The Excel-like column filters can be enabled by setting the FIlterbale.Multy property to true:

columns.Bound(p => p.ProductName).Filterable(ftb => ftb.Multi(true));

To check all checkboxes in the Filter menu the previously provided code executed in the FilterMenuInit event applies.

Regards,
Nikolay
Progress Telerik