How to Remove or Hide Filter Operators Dropdown List

Question

The filterMenuInit event isn't firing on my grid. I want the AccountNumber field to have a filter, however I want to completely remove or hide the dropdown where it says "Is Equal To", "Does Not Contain", etc. The code to remove the dropdown is in the filterMenuInit configuration but the function isn't firing when the grid loads. Here is my code:

<div id="grid"></div>
    <script>
        $(document).ready(function() {
            $("#grid").kendoGrid({
                dataSource: {
                    transport: {
                        read: "/api/client"
                    },
                    schema: {
                        model: {
                            fields: {
                                ClientID: { type: "number" },
                                Name: { type: "string" },
                                Branch: { type: "string" },
                                Department: { type: "string" },
                                AccountNumber: { type: "number" }
                            }
                        }
                    },
                    pageSize: 20,
                    serverPaging: false,
                    serverFiltering: false,
                    serverSorting: true
                },
                height: 500,
                scrollable: true,
                filterable: {
                    mode: "row",
                    extra: "false"
                },
                filterMenuInit: function(e) {
                    if (e.field === "AccountNumber") {
                    var firstValueDropDown = e.container.find("select:eq(0)").data("kendoDropDownList");

                        setTimeout(function () {
                            firstValueDropDown.wrapper.hide();
                        })
                    }
                },
                sortable: false,
                pageable: true,
                columns: [{
                    field: "AccountNumber",
                    width: "150px",
                    title: "Account #"
                }, {
                    field: "Branch",
                    filterable: false,
                    width: "100px",
                    title: "Branch"
                }, {
                    field: "Department",
                    filterable: false,
                    width: "100px",
                    title: "Department"
                }, {
                    field: "Name",
                    template: '<a href="/client/#=ClientID#">#=Name#</a>',
                    title: "Client Name"
                }, {
                    filterable: "false",
                    template: '<span class="glyphicon glyphicon-file"></span><a href="/client/#=ClientID#/invoice">View Invoices</a>',
                    width: "150px"
                }, {
                    filterable: "false",
                    template: '<span class="glyphicon glyphicon-list-alt"></span> <a href="/client/#=ClientID#/workorder">View Work Orders</a>',
                    width: "150px"
                }
            ]
            });
        });
    </script>

Entered debug mode in the browser and the event never fires so the dropdown remains active.

Answer 1

you can use following code at you column definition

filterable: {
    cell: {
        showOperators: false
    }
}

or you can define in schema that it is number, it will solve it as well

Here is demo