This is a migrated thread and some comments may be shown as answers.

Grid Multi Column and Row Filtering

3 Answers 401 Views
Grid
This is a migrated thread and some comments may be shown as answers.
John
Top achievements
Rank 1
John asked on 08 Mar 2016, 06:38 PM

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

3 Answers, 1 is accepted

Sort by
0
Accepted
Boyan Dimitrov
Telerik team
answered on 10 Mar 2016, 02:48 PM

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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Edo
Top achievements
Rank 1
answered on 11 Dec 2018, 03:49 PM

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

 

0
Alex Hajigeorgieva
Telerik team
answered on 13 Dec 2018, 03:32 PM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Grid
Asked by
John
Top achievements
Rank 1
Answers by
Boyan Dimitrov
Telerik team
Edo
Top achievements
Rank 1
Alex Hajigeorgieva
Telerik team
Share this question
or