Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Unfortunately the accepted answer works only when your kendogrid has the property <code>columnMenu: false</code>. If you have the column menu active no <code>k-state-active</code> class is added. you can see it here: <a href="http://demos.kendoui.com/web/grid/column-menu.html" rel="nofollow">http://demos.kendoui.com/web/grid/column-menu.html</a>. </p> <hr> <p><strong>Solution</strong> set the <code>dataBound: dataBound</code> in the kendogrid declaration and call this function</p> <pre><code>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 &lt; filter.filters.length; i++) { setFilteredMembers(filter.filters[i], members); } } else { members[filter.field] = true; } } </code></pre> <p>Now it will correctly add the <code>k-state-active</code> class to the <code>.k-header-column-menu</code> filtered column</p> <p><em>source: <a href="http://www.kendoui.com/forums/kendo-ui-complete-for-asp-net-mvc/grid/columnmenu-how-to-show-applied-filter.aspx#wGDLlf8GqkuGtkRiIx2Azg" rel="nofollow">http://www.kendoui.com/forums/kendo-ui-complete-for-asp-net-mvc/grid/columnmenu-how-to-show-applied-filter.aspx#wGDLlf8GqkuGtkRiIx2Azg</a></em></p> <hr> <p>On the other hand if you, like me, prefer to <strong>highlight only the menu icon</strong>, you can do that finding the child-span containing the menu icon, therefore changing the line </p> <pre><code>this.thead.find(".k-header-column-menu.k-state-active").removeClass("k-state-active"); </code></pre> <p>to:</p> <pre><code>this.thead.find(".k-header-column-menu &gt; span").removeClass("k-state-selected"); </code></pre> <p>and of course the line</p> <pre><code>cell.find(".k-header-column-menu").addClass("k-state-active"); </code></pre> <p>to:</p> <pre><code>cell.find(".k-header-column-menu").find("span").addClass("k-state-selected"); </code></pre> <p>In my example I'm using the builtin <code>k-state-selected</code> class</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload