How to hide filter icon when custom filter is set?

[Shaheen]

Hi,
I have a project implementing kendo grid UI for asp.net mvc. It has a common .Filterable() as:
.Filterable(ftb =>
{
    ftb.Mode(GridFilterMode.Row);
    ftb.Extra(false);
    ftb.Operators(operators => operators.ForString(str => str.Clear().IsEqualTo("Is equal")
                                                                    .StartsWith("Contains")
                                                                    .IsNotEqualTo("Is not equal"))
                                        .ForDate(str => str.Clear().IsEqualTo("Is equal")
                                                                    .IsNotEqualTo("Is not equal")
                                                                    .IsLessThan("Is less than")
                                                                    .IsGreaterThan("Is greater than")
                                                                    .IsLessThanOrEqualTo("Is less than or equal to")
                                                                    .IsGreaterThanOrEqualTo("Is greater than or equal to"))
                                        .ForNumber(str => str.Clear().IsEqualTo("Is equal")
                                                                    .IsNotEqualTo("Is not equal")
                                                                    .IsLessThan("Is less than")
                                                                    .IsGreaterThan("Is greater than")
                                                                    .IsLessThanOrEqualTo("Is less than or equal to")
                                                                    .IsGreaterThanOrEqualTo("Is greater than or equal to")));
})
However, for 1 particular column, I have set .Filterable(ftb => ftb.Cell(cell => cell.Template("nameOfMyDropDownList")));
The custom filter is populated using JS. The thing is, I want to get rid of the Filter Icon that gets displayed along with the dropdown since it does not make sense to have the filter icon there when we can have a custom filter dropdown. 
I tried adding a class to the element to be hidden. But the class name doesn't get added. 

[Anton Mironov]

Hi Shaheen,

Thank you for the code snippets and the details provided.

In order to achieve the desired behavior, I invested time in replicating the pointed behavior on my side.

I used the same filter and column configurations:

        @(Html.Kendo().Grid<TelerikMvcApp13.Models.OrderViewModel>()
            .Name("grid")
            .Columns(columns =>
            {
                columns.Bound(p => p.OrderID).Filterable(false);
                columns.Bound(p => p.Freight);
                columns.Bound(p => p.OrderDate).Format("{0:MM/dd/yyyy}");
                columns.Bound(p => p.ShipName).Filterable(ftb => ftb.Cell(cell => cell.Template("nameOfMyDropDownList")));
                columns.Bound(p => p.ShipCity);
            })
            .Pageable()
            .Sortable()
            .Scrollable()
            .Filterable(ftb =>
            {
                ftb.Mode(GridFilterMode.Row);
                ftb.Extra(false);
                ftb.Operators(operators => operators.ForString(str => str.Clear().IsEqualTo("Is equal")
                                                                                .StartsWith("Contains")
                                                                                .IsNotEqualTo("Is not equal"))
                                                    .ForDate(str => str.Clear().IsEqualTo("Is equal")
                                                                                .IsNotEqualTo("Is not equal")
                                                                                .IsLessThan("Is less than")
                                                                                .IsGreaterThan("Is greater than")
                                                                                .IsLessThanOrEqualTo("Is less than or equal to")
                                                                                .IsGreaterThanOrEqualTo("Is greater than or equal to"))
                                                    .ForNumber(str => str.Clear().IsEqualTo("Is equal")
                                                                                .IsNotEqualTo("Is not equal")
                                                                                .IsLessThan("Is less than")
                                                                                .IsGreaterThan("Is greater than")
                                                                                .IsLessThanOrEqualTo("Is less than or equal to")
                                                                                .IsGreaterThanOrEqualTo("Is greater than or equal to")));
            })
            .HtmlAttributes(new { style = "height:550px;" })
            .DataSource(dataSource => dataSource
                .Ajax()
                .PageSize(20)
                .Read(read => read.Action("Orders_Read", "Grid"))
            )
        )

And here is the "nameOfMyDropDownList" function for populating the filters for the "ShipName" field in my Grid:

    function nameOfMyDropDownList(args) {
        args.element.kendoDropDownList({
            dataSource: args.dataSource,
            dataTextField: "ShipName",
            dataValueField: "ShipName",
            valuePrimitive: true
        });
    }

The result:

For hiding the filter icon, I am using the document.ready scope and the proper jQuery selector. The selector is constructed by pointing to the dropdown-operator kendo class("k-dropdown-operator") and the aria-label for the field("Ship Name").

Here is an example:

    $(document).ready(function () {

        setTimeout(function () {
            $(".k-dropdown-operator[aria-label='Ship Name']").css("display", "none");
        })
    })

And the result:

Give a try to the approach above and let me know if further assistance is needed.

Kind Regards,
Anton Mironov
Progress Telerik