Remove or Hide Filter Operators Dropdown List

[Rodney]

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!

[Dimiter Madjarov]

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

[Rodney]

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!

[Dimiter Madjarov]

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

[Rodney]

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?

[Dimiter Madjarov]

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

[Jason Mobley]

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? 

[Dimiter Madjarov]

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

[Dawn]

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?

[Dimiter Madjarov]

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

[Molly]

Hi 

How do I achieve the same in React Kendo Grid?

 

Thanks :)

 

[Stefan]

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

[Tisson]

Is there any way to remove filterable menu for specific grid in kendo-react. ? 

[Stefan]

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

[Tisson]

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. 

[Stefan]

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

[Ed]

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({});
        })
    ;
};

[Ed]

this.value() doesn't give the right result. Use myControl.value().

[Stefan]

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