ColumnMenu how to show applied filter

[Beau]

How can I highlight that a filter has been applied to a column after I enable the option to choose columns using .ColumnMenu()

Refer to the attached screen shots No ColumnMenu Filter.png and No ColumnMenu Filter Applied.png when I don't have the .ColumnMenu() applied a user can visually see that a filter has been applied.

Below is the MVC Helper config for completeness:

@(Html.Kendo().Grid(Model)
    .Name("Grid")
    .Columns(columns =>
    {
        columns.Bound(f => f.FluidID).Width(50).Title("ID").Hidden();
        columns.Bound(f => f.Name).Width(150).Title("Name");
        columns.Bound(f => f.Code).Width(150).Title("Code");
        columns.Bound(f => f.Grade).Width(150).Title("Grade");
        columns.Bound(f => f.Manufacturer).Width(150).Title("Manufacturer");
    })
    .Deferred()
    .Resizable(resize => resize.Columns(true))
    .Reorderable(reorder => reorder.Columns(true))
    .Groupable()
    .Pageable()
    .Sortable()
    //.ColumnMenu() <-- Once enabled, there is no visual cues to highlight that a filter is applied
    .Scrollable(s => s.Height("auto"))
    .Navigatable()
    .Filterable()
    .Events(e => e
            .DataBound("grid_dataBound")
        )
    .DataSource(dataSource => dataSource
        .Ajax()
        .ServerOperation(true)
        .Read(read => read.Action("GetJsonData", "FluidKendo"))
    )
)

Once I enable .ColumnMenu() the filtering options are contained in a submenu item and the user is unable to visually see if a column filter has been applied. Refer to ColumnMenu.png and ColumnMenu Filter Applied.png.

I want users to be able to choose columns and highlight when filtering is applied to columns. Is there any way I can achieve this?

Is there any other way I can enable grid column selection without enabling .ColumnMenu(). I have tried: http://stackoverflow.com/questions/13637475/how-to-show-kendo-grids-columnmenu-using-script but the grid .ColumnMenu() option needs to be enabled for this to work which defeats the purpose.

Maybe there is an options to show as text, what filter options have been applied, hook into an event? 

Thanks,
Beau

[Dimiter Madjarov]

Hi Beau,


Thank you for the screenshots and for clarifying the problem. Currently highlighting the column menu icon, when a filter is applied is not supported. Nevertheless this functionality could be manually implemented in the dataBound event handler by adding the k-state-active class if needed.
E.g.

function dataBound(e) {
    var filter = this.dataSource.filter();
    this.thead.find(".k-header-column-menu.k-state-active").removeClass("k-state-active");
    if (filter) {
        var filteredMembers = {};
        setFilteredMembers(filter, filteredMembers);
        this.thead.find("th[data-field]").each(function () {
            var cell = $(this);
            var filtered = filteredMembers[cell.data("field")];
            if (filtered) {
                cell.find(".k-header-column-menu").addClass("k-state-active");
            }
        });
    }
}


function setFilteredMembers(filter, members) {
    if (filter.filters) {
        for (var i = 0; i < filter.filters.length; i++) {
            setFilteredMembers(filter.filters[i], members);
        }
    }
    else {
        members[filter.field] = true;
    }
}

I hope that this approach will work in the current scenario. I wish you a great day!

 

Regards,
Dimiter Madjarov
Telerik

[Beau]

Dimiter, I could kiss you! 

Perfect solution, exactly what I was looking for and only after 8 hrs. Wow thanks again.

[Saquib]

Thank you! Dimiter. This exactly what I was looking for.

[Dimiter Madjarov]

Hello Saquib,

I am glad the post was helpful. Have a great day!

Regards,
Dimiter Madjarov
Telerik