更改Kendo Grid中过滤列标题的颜色

我正在做一个使用Kendo控件的项目，并且我正在使用一个Kendo网格。我的要求是当我为一列应用过滤时，我想更改过滤列标题的颜色。我的剑道电网代码：更改Kendo Grid中过滤列标题的颜色

var grid = $("#grid").kendoGrid({ 
     dataSource: { 
      type   : "odata", 
      transport  : { 
       read: "http://demos.kendoui.com/service/Northwind.svc/Orders" 
      }, 
      schema   : { 
       model: { 
        fields: { 
         OrderID : { type: "number" }, 
         Freight : { type: "number" }, 
         ShipName : { type: "string" }, 
         OrderDate: { type: "date" }, 
         ShipCity : { type: "string" } 
        } 
       } 
      }, 
      pageSize  : 10 
     }, 
     filterable: true, 
     sortable : true, 
     pageable : true, 
     columns : [ 
      { 
       field  : "OrderID", 
       filterable: false 
      }, 
      "Freight", 
      { 
       field : "OrderDate", 
       title : "Order Date", 
       width : 100, 
       format: "{0:MM/dd/yyyy}" 
      }, 
      { 
       field: "ShipName", 
       title: "Ship Name", 
       width: 200 
      }, 
      { 
       field: "ShipCity", 
       title: "Ship City" 
      } 
     ] 
    }).data("kendoGrid");

来源

2013-03-14 user2049357

有人回复我求你...... – user2049357 2013-03-14 10:50:20

当筛选网格中的过滤器图标实际上改变了颜色，但你想整个头部的改变？

我看不到网格上的任何配置可以让你指定这个或任何你可以挂钩的过滤器事件，但是这并不会使它变得不可能。

查看网格中发生的情况，当您过滤一列时，会在列标题的过滤器图标中添加一个额外的.k-state-active类。我们可以应用一些CSS来很容易地改变该类的背景颜色，但它不适用于整个标题（父TH元素），并且CSS中没有父级选择器。

我认为为了做到这一点，您可能必须重写Kendo FilterMenu小部件的刷新功能，将其替换为您自己的函数，然后调用原始函数。完成此操作后，您可以扩展FilterMenu以向整个标题添加额外的类。

// Grab old refresh function 
var filterMenu = kendo.ui.FilterMenu.fn; 
filterMenu.oldRefresh = filterMenu.refresh; 

// Replace it with our own 
filterMenu.refresh = function() { 
    filterMenu.oldRefresh.apply(this, arguments); 

    // Add an additional class to the column header 
    if (this.link.hasClass('k-state-active')) { 
     this.link.parent().addClass('k-state-active'); 
    } else { 
     this.link.parent().removeClass('k-state-active'); 
    } 
};

然后，您可以使用CSS调整网格标题中.k-state-active的背景颜色。

#grid thead .k-state-active { 
    background-color: crimson; 
}

你可以看到它在行动here

来源

2013-03-15 10:33:25 nukefusion

太感谢你了它的做工精细 – user2049357 2013-03-15 12:30:46

不幸接受的答案仅当你kendogrid有属性columnMenu: false。如果您的列菜单处于活动状态，则不会添加k-state-active类。你可以在这里看到它：http://demos.kendoui.com/web/grid/column-menu.html。

解决方案 在kendogrid声明中设置dataBound: dataBound和调用这个函数

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;   
    } 
}

现在将正确的k-state-active类添加到.k-header-column-menu过滤柱

来源：http://www.kendoui.com/forums/kendo-ui-complete-for-asp-net-mvc/grid/columnmenu-how-to-show-applied-filter.aspx#wGDLlf8GqkuGtkRiIx2Azg

在另一方面，如果你像我一样，喜欢只突出的菜单图标，你可以做，查找包含菜单图标子跨度，因此转产

this.thead.find(".k-header-column-menu.k-state-active").removeClass("k-state-active");

到：

this.thead.find(".k-header-column-menu > span").removeClass("k-state-selected");

，当然还有线

cell.find(".k-header-column-menu").addClass("k-state-active");

到：

cell.find(".k-header-column-menu").find("span").addClass("k-state-selected");

在我的例子，我使用内置k-state-selected类

来源

2013-12-22 21:49:14 Vland

更改Kendo Grid中过滤列标题的颜色

回答

相关问题