Grid Multi Column and Row Filtering

[John]

Hello,

I can get the multi filter to display or I can get the row filtering but I can't get both at once. My client is an excel experience heavy user and say the grid displays 700 records. They then want the ability to row filter and say that reduces it down to 350. Then they want to apply column value multi select filters to narrow the 350 down even further.

However I have tried a couple different combinations and while they don't error out I don't get both filters on one grid.

One attempt:

@(Html.Kendo().Grid(Model)
        .Name("grid")
        .Columns(columns =>
        {
            columns.Bound(e => e.A).Filterable(ftb => ftb.Multi(true).Search(true));
            columns.Bound(e => e.B).Filterable(ftb => ftb.Multi(true).Search(true));
            columns.Bound(e => e.C).Filterable(ftb => ftb.Multi(true).Search(true));
            columns.Bound(e => e.D).Filterable(ftb => ftb.Multi(true).Search(true));
            columns.Bound(e => e.E).Filterable(ftb => ftb.Multi(true).Search(true));
        })
        .HtmlAttributes(new { style = "width: 80%;" })
        .DataSource(data => data.Ajax().Model(mdl => mdl.Id(p => p.A) ))
        .Scrollable()
        .Groupable()
        .Sortable()
        .Editable()
        .Filterable(ftb => ftb.Mode(GridFilterMode.Row))
        .Resizable(size => size.Columns(true))
        .Selectable(selectable => selectable.Mode(GridSelectionMode.Multiple))
        .Pageable(pageable => pageable
            .Refresh(true)
            .PageSizes(true)
            .ButtonCount(5))
        )

 

Another attempt:

@(Html.Kendo().Grid(Model)
        .Name("grid")
        .Columns(columns =>
        {
            columns.Bound(e => e.A).Filterable(ftb => ftb.Multi(true).Search(true)).Filterable(ftb => ftb.Mode(GridFilterMode.Row));
            columns.Bound(e => e.B).Filterable(ftb => ftb.Multi(true).Search(true));
            columns.Bound(e => e.C).Filterable(ftb => ftb.Multi(true).Search(true));
            columns.Bound(e => e.D).Filterable(ftb => ftb.Multi(true).Search(true));
            columns.Bound(e => e.E).Filterable(ftb => ftb.Multi(true).Search(true));
        })
        .HtmlAttributes(new { style = "width: 80%;" })
        .DataSource(data => data.Ajax().Model(mdl => mdl.Id(p => p.A) ))
        .Scrollable()
        .Groupable()
        .Sortable()
        .Editable()
        .Filterable()
        .Resizable(size => size.Columns(true))
        .Selectable(selectable => selectable.Mode(GridSelectionMode.Multiple))
        .Pageable(pageable => pageable
            .Refresh(true)
            .PageSizes(true)
            .ButtonCount(5))
        )

 

Thoughts?

JB

[Boyan Dimitrov]

Hello John,

 

I am afraid that due to the design concept of the filter row model it does not allow multi filter check box. What I can suggest you is to define a Kendo UI MultiSelect widget as a filter widget for a specific column in order to achieve multiple selection filtering. Please refer to the http://dojo.telerik.com/ilaHa example.  

 

Regards,
Boyan Dimitrov
Telerik

[Edo]

Hello Boyan,

I have a similar situation but in my grid filtering is accessed through the column menu. Is it possible to configure a combination of multi-select and logical filtering in the column menu UI?

Best regards,

Edo de Jongh

 

[Alex Hajigeorgieva]

Hi, Edo,

It is possible to achieve that by configuring the columns filterable UI as a custom JavaScript function just as demonstrated in the filter customisation demo at:

https://demos.telerik.com/aspnet-mvc/grid/filter-menu-customization

columns.Bound(e => e.City)
  .Filterable(filterable => filterable.UI("cityFilter"))

Then when the column menu is added, the custom filterable UI will be used in the filter menu item of the Kendo UI Column Menu with the desired MultiSelect:



Here is a runnable example so you can verify this is indeed the outcome you are after:

https://dojo.telerik.com/@bubblemaster/IjepUtaH

Let me know in case you intended anything different.

Regards,
Alex Hajigeorgieva
Progress Telerik