ColumnMenu how to show applied filter

5 posts, 1 answers
  1. Beau
    Beau avatar
    19 posts
    Member since:
    Mar 2011

    Posted 25 Jun 2013 Link to this post

    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



  2. Answer
    Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2153 posts

    Posted 26 Jun 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Beau
    Beau avatar
    19 posts
    Member since:
    Mar 2011

    Posted 26 Jun 2013 Link to this post

    Dimiter, I could kiss you! 

    Perfect solution, exactly what I was looking for and only after 8 hrs. Wow thanks again.
  5. Saquib
    Saquib avatar
    15 posts
    Member since:
    Mar 2015

    Posted 14 May 2015 in reply to Dimiter Madjarov Link to this post

    Thank you! Dimiter. This exactly what I was looking for.
  6. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2153 posts

    Posted 15 May 2015 Link to this post

    Hello Saquib,

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

    Regards,
    Dimiter Madjarov
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top
UI for ASP.NET MVC is VS 2017 Ready