Two modes of filter in the same grid

[Carlos]

I want to use filter mode row and in some columns multi checkbox, is  possible to use two modes of filter in the same grid?

[Vasil]

Hello Carlos,

The Multi filtering can be turned on for some columns, when you use .ColumnMenu(true), even when the Filterable Mode is Row.

But you need to hide the filter cell for the given column.(Otherwise you will be able to select only 1 value from the list, and it will be populated into the filter row)

The menu will still be opened from the Column menu rather than the Filter button.

.Name("grid")
.Columns(columns =>
{
    columns.Bound(p => p.OrderID).Filterable(ftb => ftb.Cell(cell => cell.ShowOperators(false)));

    columns.Bound(p => p.ShipName).Width(500).Filterable(
        ftb => ftb.
        Multi(true)
        .Mode(GridFilterMode.Menu)
        .Cell(c => c.Enabled(false)));

    columns.Bound(p => p.Freight).Width(250).Filterable(ftb => ftb.Cell(cell => cell.Operator("gte")));

    columns.Bound(p => p.OrderDate).Format("{0:MM/dd/yyyy}");
})
.Pageable()
.Sortable()
.Scrollable()
.Filterable(ftb => ftb.Mode(GridFilterMode.Row))
.ColumnMenu(true)

You can still use combination of filters. For example "Less Than" for the Order Date column, and selected values from the ShipName. See the screenshot as reference.

Regards,
Vasil
Telerik

 

 

[Komaza]

Hi Vasil,

Is there a way to do it without jQuery? I am using kendo ui for angular.

[Komaza]

@Vasil,

I found a solution to do it this way using jQuery- https://stackoverflow.com/questions/28906659/kendo-grid-column-filterable-mode-row-and-menu

In fact it would be great if you could direct me to the official documentation that kendo has to use both menu and row filter together.

 

Thank you.

[Alex Hajigeorgieva]

Hi, Tiffany,

As requested here is the documentation reference of the filter mode of the Kendo UI Grid:

https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/configuration/filterable.mode
https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/configuration/columns.filterable.cell#columns.filterable.cell.enabled
https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/configuration/columns.filterable.multi

And here is a runnable example which shows the Kendo UI Grid with a FilterMultiCheck in the header and a disabled row filter for the first column:

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

$("#grid").kendoGrid({
   columns: [
     {
       field: "name",
       filterable:{
         multi:true,
         cell: {
           enabled: false
         }
       }
     }
   ],
   filterable: { mode: "row,menu"}
 });

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

[Komaza]

Hi Alex,

Thank you for the response.

I want a solution to use it without jQuery and out of row and menu, on some columns I want to use row filter and on remaining I want to use menu filter which I am still not able to do.

I was suggested to use filterable="row, menu" but this enables both row and menu filter on single column which I do not want.

 

Is there a way to achieve that?

[Alex Hajigeorgieva]

Hello, Tiffany,

The solution which my colleague Vasil provided was with the Kendo UI Grid wrapper for ASP.NET MVC here:

https://www.telerik.com/forums/two-modes-of-filter-in-the-same-grid#Ci17E8x1z0OW0BApq4qQaw

Then on the 10 Jul, I was left with the impression that you were after the jQuery plugin syntax for the same functionality. Could you please let me know in case I have misunderstood what is missing so I can give you the most suitable response to your exact requirements?

Look forward to hearing back from you.

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

[Komaza]

Hi Alex,

What I need is - I want a solution to use the kendo grid's filters without jQuery and out of row and menu, on some columns I want to use row filter ONLY and on remaining I want to use menu filter ONLY which I am still not able to do.

I am grateful for your response and I apologise if my earlier replies have created some confusion.

Waiting to hear back.

Thank you.

[Alex Hajigeorgieva]

Hello, Tiffany,

Can you please confirm what is it that you have in your project as we have already looked at ways to show both the filter menu and the filter row with our jQuery plugin - Kendo UI Grid and the UI for ASP.NET MVC wrapper of the same jQuery plugin.

I tested the solution which my colleague proposed and this is the result:

- The ship name field does not have row filtering. We achieve this with the following setting for MVC:

columns.Bound(p => p.ShipName).Filterable(ftb => ftb.Cell(c => c.Enabled(false)));

If you do not wish to have the columns and sortable in the column menu, just the filter menu like I have in my image above, you can add the following to the root level of the Kendo UI Grid for ASP.NET MVC:

.Filterable(ftb => ftb.Mode(GridFilterMode.Menu).Mode(GridFilterMode.Row))
.ColumnMenu(c=>c.Enabled(true).Columns(false).Sortable(false))

As for the columns which have both the Filterable menu and the filter row, this is the configuration, note that the Filter Menu is automatically generated:

columns.Bound(p => p.Freight).Width(250) .Filterable(ftb => ftb.Cell(cell => cell.Operator("gte")));

In case you wish to show only the filter menu, without having to use the column menu as well, this is not possible at the moment, unless it is added externally:

https://docs.telerik.com/kendo-ui/api/javascript/ui/filtermenu

In case you need further assistance, please provide a screenshot of what you already have and the Kendo UI Grid definition.

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

[Alex Hajigeorgieva]

Hello, Tiffany,

I just wanted to update the thread that if you want to have two modes of filtering in the grid, without showing the column menu, you can achieve it like this and enable the MultiFilterCheck as you normally would:

.Filterable(ftb => ftb.Mode(GridFilterMode.Row | GridFilterMode.Menu))

For example:

// when server operations are enabled
c.Bound(b => b.ShipCountry).Filterable(ftb => ftb.Multi(true).DataSource("dataSource"));
//or
c.Bound(b => b.ShipCountry).Filterable(ftb => ftb.Multi(true));

If you want to hide some of the filter menus, you can use CSS and just replace the fields below with the column bound fields in your model:

<style>
    [data-field='Discontinued'] .k-grid-filter, [data-field='OrderID'] .k-grid-filter {
        display:none;
    }
</style>

Regards,
Alex Hajigeorgieva
Progress Telerik