Remove operator dropdown from Kendo grid filter menu

Question

How do you remove the operator dropdown from Kendo grid filter menu? I have a dropdown list below that contains values for the user to choose from, so it is rather pointless to have a box above that that says is equal to.

Answer 1

This question has already been answered in the Kendo forums: Kendo forum - Use dropdownlist in grid column filter

It's good to search there always before elsewhere. Basically you get the header filter and hide the dropdown. I've taken the liberty to modify the fiddle in the forum because the find header jquery selector was a bit "cucoo". And you can use normal kendo config instead of creating manually the combo

filterable: {
    ui: function(){ ... }
}

The main thing is to hide and modify the help.

// Find the Role filter menu.
var filterMenu = _grid.thead.find("th[data-field='roleTitle']").data("kendoFilterMenu");

filterMenu.form.find("div.k-filter-help-text").text("Select an item from the list:");
filterMenu.form.find("span.k-dropdown:first").css("display", "none");

Find it here: JSFiddle - Dropdown filter in kendo grid

Answer 2

I did mine by declaring a function to call when building the UI. It should be much easier than hunting around for classes.

{
   field: "Status",
   title: "Status",
   filterable: {
      extra: false,
      ui: statusFilter
   }
}


function statusFilter(element) {

    // finds the closest form so we can start manipulating things.
    var form = element.closest("form");  

    // changes the help text. (you might want to localise this)
    form.find(".k-filter-help-text:first").text("Select an item from the list:");

    // removes the dropdown list containing the operators (contains etc)
    form.find("select").remove();

    // Adds a new dropdownlist with all the options you want to select from
    element.kendoDropDownList({ ...... });

}