New to Kendo UI for Vue? Start a free 30-day trial
Style the filtered columns in the Kendo UI for Vue Native Grid.
Environment
| Product Version | 3.6.3 |
| Product | Progress® Kendo UI for Vue Native |
Description
This Knowledge base(KB) article demonstrates how we can customize the template of a specific locked Native Grid column by defining a custom cell template.
KB sections
Solution description
This Knowledge Base(KB) article shows how you can apply a custom CSS style to the headers of the filtered columns inside the Native Grid. To achieve the desired scenario, the Grid columns are defined as a computed property as follows:
columns: function () {
const columns = [
{
field: 'ProductID',
filterable: false,
title: 'Product ID',
width: '50px',
},
{ field: 'ProductName', title: 'Product Name' },
{ field: 'FirstOrderedOn', filter: 'date', title: 'First Ordered On' },
{ field: 'UnitPrice', filter: 'numeric', title: 'Unit Price' },
{ field: 'Discontinued', filter: 'boolean', title: 'Discontinued' },
].map((col) => {
return this.isFiltered(col)
? {
...col,
headerClassName: 'filtered',
}
: col;
});
return columns;
}The above definition adds the filtered CSS class to the header of the filtered columns, based on the result of the following isFiltered method:
isFiltered(col) {
const filters = this.filter ? this.filter.filters : [];
return filters.findIndex((f) => f.field === col.field) >= 0;
}The styles that will be applied to the Grid's header are defined in the following class:
.filtered {
background-color: red;
}Runnable example
Example
View Source
Change Theme:
