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

Two modes of filter in the same grid

9 Answers 294 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Carlos
Top achievements
Rank 1
Carlos asked on 22 Feb 2016, 01:09 PM
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?

9 Answers, 1 is accepted

Sort by
0
Vasil
Telerik team
answered on 22 Feb 2016, 02:25 PM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Komaza
Top achievements
Rank 1
answered on 10 Jul 2018, 10:23 AM

Hi Vasil,

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

0
Komaza
Top achievements
Rank 1
answered on 10 Jul 2018, 10:29 AM

@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.

0
Alex Hajigeorgieva
Telerik team
answered on 12 Jul 2018, 11:45 AM
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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Komaza
Top achievements
Rank 1
answered on 01 Aug 2018, 11:05 AM

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?

0
Alex Hajigeorgieva
Telerik team
answered on 03 Aug 2018, 07:29 AM
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
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.
0
Komaza
Top achievements
Rank 1
answered on 04 Aug 2018, 05:52 PM

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.

0
Alex Hajigeorgieva
Telerik team
answered on 07 Aug 2018, 01:09 PM
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
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.
0
Alex Hajigeorgieva
Telerik team
answered on 16 Jan 2020, 11:55 AM

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

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
Carlos
Top achievements
Rank 1
Answers by
Vasil
Telerik team
Komaza
Top achievements
Rank 1
Alex Hajigeorgieva
Telerik team
Share this question
or