Remove or Hide Filter Operators Dropdown List
2 Answers 740 Views
Rodney
Top achievements
Rank 1
Rodney asked on 11 Oct 2013, 05:53 PM
Is there a way to completely remove or hide the dropdown where it says "Is Equal To", "Does Not Contain", etc?

I am using a data source so this dropdown is not necessary.

Thanks!
Hello Rodney,


I am not exactly sure what are you trying to achieve. Could you please elaborate a bit more? In general at least a single operator is needed in order to specify what type of filtering will be performed.

I am looking forward to hearing from you in order to assist you further.

Regards,
Dimiter Madjarov
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
- by
Dimiter Madjarov
Telerik team
on 14 Oct 2013, 08:05 AM
In order to allow the user to filter the field, I have a dropdown list with Status Names. I want the operator to be "Is Equal to", but I would like to hide that dropdown list that gives the user the option to change operators. The reason that I would like to hide this is because when the user chooses a Status Name the operator "Is Equal To" is assumed, so showing the operator is not necessary. Please let me know if this explains what I am trying to achieve more clearly.

Thanks for your help!
- by
Rodney
Top achievements
Rank 1
on 14 Oct 2013, 04:45 PM

2 Answers, 1 is accepted

Sort by
0
Dimiter Madjarov
Telerik team
answered on 15 Oct 2013, 07:57 AM
Hi Rodney,


Thank you for the additional details. In order to achieve this, you could bind to the filterMenuInit event of the Grid and hide the filterable dropdownlist. The default operator is "Equal to".
E.g.
.Filterable(f => f.Extra(false)
             .Messages(m => m.Info("Items with value equal to:")))
.Events(e => e.FilterMenuInit("filterMenuInit"))

function filterMenuInit(e) {
    var firstValueDropDown = e.container.find("select:eq(0)").data("kendoDropDownList");
 
    setTimeout(function () {
        firstValueDropDown.wrapper.hide();
    });
}

 

Regards,
Dimiter Madjarov
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Thank you! That worked great!

Is there a way to also hide the buttons and make the Filter button behavior fire on the selection of a Status Name and make the Clear button behavior fire on the selection of the optionLabel?
- by
Rodney
Top achievements
Rank 1
on 15 Oct 2013, 02:54 PM
Hi Rodney,


In general such custom modifications are not supported, because they could cause some unexpected behavior, for example with the closing of the filter menu in the current case. Nevertheless you could use some custom approach in the filterMenuInit event to manually implement it i.e. use the e.container parameter to find the buttons and hide them. The filtering and the hiding of the filter menu should be handled manually.


Regards,
Dimiter Madjarov
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
- by
Dimiter Madjarov
Telerik team
on 16 Oct 2013, 11:39 AM
Is there a way to do this on a filter-by-filter basis? This methodology works great if you want to hide the operators for all filters, but if I want to only do this on one filter in the grid how would I do that? 
- by
Jason Mobley
Top achievements
Rank 1
on 07 Mar 2014, 12:44 AM
Hi Jason,


The filterMenuInit event of the Grid receives an e.field parameter which could be used to determine which filter menu was opened and act accordingly.
E.g.
function filterMenuInit(e) {
    if(e.field === "ProductName") {
        var firstValueDropDown = e.container.find("select:eq(0)").data("kendoDropDownList");
  
        setTimeout(function () {
            firstValueDropDown.wrapper.hide();
        });
    }
}

I wish you a great day!

Regards,
Dimiter Madjarov
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
- by
Dimiter Madjarov
Telerik team
on 07 Mar 2014, 11:12 AM

Hi there,

I am trying to set the operator to Is Greater than, but then hide it.  But when the filter is passed to the datasourcerequest object, it then doesn't pick up the value I set in the dropdown.  I assume this is because is isn't visible, but I still want it to pick up the is greater than - is there a way to do this?

- by
Dawn
Top achievements
Rank 1
on 17 Nov 2016, 12:55 PM

Hello Dawn,

You could utilize the new filter event of the Grid. A possible solution would be to prevent the event and manually modify the current filter expression. Here is a sample implementation that you could modify further if needed.

Regards,
Dimiter Madjarov
Telerik by Progress
Kendo UI is ready for Visual Studio 2017 RC! Learn more.
- by
Dimiter Madjarov
Telerik team
on 21 Nov 2016, 08:11 AM

Hi 

How do I achieve the same in React Kendo Grid?

 

Thanks :)

 

- by
Marelie
Top achievements
Rank 1
on 28 Sep 2018, 01:00 AM
Hello, Marelie,

In the native React Grid, currently, we have only a row filtering and there the filter operator menu can be hidden with CSS:

k-filtercell-operator { display: none;}

https://stackblitz.com/edit/react-bdbddu?file=index.html

Or by using the filter cell that will allow modifying the entire filter row:

https://www.telerik.com/kendo-react-ui/components/grid/api/GridColumnProps/#toc-filtercell

https://www.telerik.com/kendo-react-ui/components/grid/filtering/#toc-custom-filter-cell

If the wrapper Grid is used, then the approach will be the same one as shown by Dimiter, as the wrapper is based on the jQuery Grid the same events and code can be used.

Regards,
Stefan
Progress 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
- by
Stefan
Telerik team
on 01 Oct 2018, 08:40 AM
Is there any way to remove filterable menu for specific grid in kendo-react. ? 
- by
Tisson
Top achievements
Rank 1
on 09 Nov 2020, 02:16 PM

Hello, Tisson,

Could you please specify what part of the menu has to be removed?

Providing a screenshot will help us provide more to the point information.

Regards,
Stefan
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

- by
Stefan
Telerik team
on 09 Nov 2020, 02:32 PM
I want remove the filterable menu from the grid column which contains "contains with", "equal to", "not equal" etc.. in Kendo-react for specific grid. 
- by
Tisson
Top achievements
Rank 1
on 10 Nov 2020, 07:52 AM

Hello, Tisson,

There are two options in this case:

1) Use the filterCell prop of the Grid to render only the filter input element inside the cell:

https://www.telerik.com/kendo-react-ui/components/grid/filtering/#custom-filter-cells

2) Use CSS to hide the DropDownList with the options. You can set it only to some Grid by setting a class name to those Grids and using the class in the selector:

    .no-filter .k-filtercell .k-filtercell-operator {
      display: none;
    }
This is an example:

https://stackblitz.com/edit/react-utxibb?file=index.html

Regards,
Stefan
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

- by
Stefan
Telerik team
on 10 Nov 2020, 08:23 AM
0
Ed
Top achievements
Rank 1
answered on 06 Feb 2019, 04:41 PM

Rodney,

I accomplished something similar by adding event handlers to the filter form, discovering that idea from a lengthy search of other posts in the forum. Basically, the filter menu is rendered as a form, so I added my own functionality when filters were applied or cleared.

The grid column supplies a hook via the Filterable().UI() method. You can specify a handler function that will be called when the menu filter is created. That function can replace the input control and call other functions when the filter is applied or cleared. If you want the filter updated immediately after select, use the control's change event, but I didn't want that.

createMyFilter = function (element) {
    // Remove the default datasource attached to the element.
    element.removeAttr("data-bind");
    // Replace the input field.
    var myControl = element.kendoDropDownList({
        dataSource: [ { text: "One", value: 1 }, { text: "Two", value: 2 }, { text: "Three", value: 3 } ],
        dataTextField: "text"
        dataValueField: "value"
        placeholder: "-All-"
    }).data("kendoDropDownList");
 
    // Attach handlers for the filter buttons.
    $(element).closest("form")
        .on("submit", function () {
            // Set new grid filter when form is submitted.
            var grid = $("#Grid").data("kendoGrid");
            var newFilter = { field: "Company", operator: "eq", value: this.value() };
            grid.dataSource.filter(newFilter);
        })
        .on("reset", function () {
            // Clear grid filter when form is reset.
            var grid = $("#Grid").data("kendoGrid");
            grid.dataSource.filter({});
        })
    ;
};
this.value() doesn't give the right result. Use myControl.value().
- by
Ed
Top achievements
Rank 1
on 06 Feb 2019, 06:11 PM
Hello, Ed,

Thank you for sharing the implementation and the findings with the Kendo UI community.

This is highly appreciated.

I have added some Telerik points to your account for sharing this.

Regards,
Stefan
Progress 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
- by
Stefan
Telerik team
on 07 Feb 2019, 07:42 AM
Tags
Grid
Asked by
Rodney
Top achievements
Rank 1
Answers by
Dimiter Madjarov
Telerik team
Ed
Top achievements
Rank 1
Share this question
or