更改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中過濾列標題的顏色

回答

相關問題