Hide filter button in header for one column (but keep cell filter)

[Robert]

I have a column with only two possible values, and I have put a kendoDropDownList in the filter cell for that column. Now the filter button above, in the main header cell, makes no sense. How can I hide just the one button?

See attached image.

This  is the code that initializes the column:

           

field: 'IsInstr',
                title: 'Instr',
                width: 70,
                headerAttributes: {
                    "title": "Instrument or Component",
                },
                filterable: {
                    extra: false,
                    cell: {
                        template: function (input) {
                            input.kendoDropDownList({
                                autoBind:false,
                                dataTextField: "text",
                                dataValueField: "value",
                                valuePrimitive: true,
                                dataSource: instValus,
                                text: 'Both'
                            });
                        },
                        showOperators: false,
                        inputWidth: 75
                    }
                },

[Robert]

OK, this works:

1.var tbl = $($('#gridDiv1 table')[0]).find('tr th.k-header');

2.var filtButn = $($(tbl).filter(function () { return $(this).attr('data-field') === "IsInstr"; })[0]).find('.k-filter')[0];

3.$(filtButn).css('display', 'none');

But there must be some cleaner way???

Bob

[Kiril Nikolov]

Hello Robert,

As the functionality that you are looking for is not supported out of the box, you will need to find a custom way to achieve this. The easiest way is to use jQuery to change the display property, so I do not see a reason why not to use your approach.

Regards,
Kiril Nikolov
Telerik