Backend API
$(() => {
function getOrderDay(rowData) {
return (new Date(rowData.OrderDate)).getDay();
}
$('#card-view').dxCardView({
dataSource: orders,
keyExpr: 'OrderNumber',
cardsPerRow: 'auto',
cardMinWidth: 280,
wordWrapEnabled: true,
headerFilter: {
visible: true
},
columns: [{
dataField: 'OrderNumber',
headerFilter: {
groupInterval: 10000,
},
}, {
dataField: 'OrderDate',
dataType: 'date',
calculateFilterExpression(value, selectedFilterOperations, target) {
if (value === 'weekends') {
return [[getOrderDay, '=', 0], 'or', [getOrderDay, '=', 6]];
}
return this.defaultCalculateFilterExpression(value, selectedFilterOperations, target);
},
headerFilter: {
dataSource(data) {
data.dataSource.postProcess = function (results) {
results.push({
text: 'Weekends',
value: 'weekends',
});
return results;
};
},
},
}, {
dataField: 'SaleAmount',
dataType: 'number',
headerFilter: {
dataSource: [{
text: 'Less than $3000',
value: ['SaleAmount', '<', 3000],
}, {
text: '$3000 - $5000',
value: [['SaleAmount', '>=', 3000], ['SaleAmount', '<', 5000]],
}, {
text: '$5000 - $10000',
value: [['SaleAmount', '>=', 5000], ['SaleAmount', '<', 10000]],
}, {
text: '$10000 - $20000',
value: [['SaleAmount', '>=', 10000], ['SaleAmount', '<', 20000]],
}, {
text: 'Greater than $20000',
value: ['SaleAmount', '>=', 20000],
}],
},
}, {
dataField: 'StoreCity',
headerFilter: {
search: {
enabled: true,
editorOptions: {
placeholder: 'Search city or state',
},
searchExpr: ['StoreCity', 'StoreState'],
},
},
}, {
dataField: 'StoreState',
headerFilter: {
search: {
enabled: true,
editorOptions: {
placeholder: 'Search state or city',
},
searchExpr: ['StoreState', 'StoreCity'],
},
},
}, {
dataField: 'Employee',
}],
});
});
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>DevExtreme Demo</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script>
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/25.1.6/css/dx.light.css" />
<script src="js/dx.all.js?v=25.1.6"></script>
<script src="data.js"></script>
<script src="index.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body class="dx-viewport">
<div class="demo-container">
<div id="card-view"></div>
</div>
</body>
</html>
const orders = [{
OrderNumber: 35703,
SaleAmount: 11800,
StoreCity: 'Los Angeles',
StoreState: 'California',
Employee: 'Harv Mudd',
OrderDate: '2014/04/10',
}, {
OrderNumber: 35711,
OrderDate: '2014/01/12',
SaleAmount: 16050,
StoreState: 'California',
StoreCity: 'San Jose',
Employee: 'Jim Packard',
}, {
OrderNumber: 35714,
OrderDate: '2014/01/22',
SaleAmount: 14750,
StoreState: 'Nevada',
StoreCity: 'Las Vegas',
Employee: 'Harv Mudd',
}, {
OrderNumber: 35983,
OrderDate: '2014/02/07',
SaleAmount: 3725,
StoreState: 'Colorado',
StoreCity: 'Denver',
Employee: 'Todd Hoffman',
}, {
OrderNumber: 36987,
OrderDate: '2014/03/11',
SaleAmount: 14200,
StoreState: 'Utah',
StoreCity: 'Salt Lake City',
Employee: 'Clark Morgan',
}, {
OrderNumber: 38466,
OrderDate: '2014/03/01',
SaleAmount: 7800,
StoreState: 'California',
StoreCity: 'Los Angeles',
Employee: 'Harv Mudd',
}, {
OrderNumber: 39420,
OrderDate: '2014/02/15',
SaleAmount: 20500,
StoreState: 'California',
StoreCity: 'San Jose',
Employee: 'Jim Packard',
}, {
OrderNumber: 39874,
OrderDate: '2014/02/04',
SaleAmount: 9050,
StoreState: 'Nevada',
StoreCity: 'Las Vegas',
Employee: 'Harv Mudd',
}, {
OrderNumber: 42847,
OrderDate: '2014/02/15',
SaleAmount: 20400,
StoreState: 'Wyoming',
StoreCity: 'Casper',
Employee: 'Todd Hoffman',
}, {
OrderNumber: 43982,
OrderDate: '2014/05/29',
SaleAmount: 6050,
StoreState: 'Utah',
StoreCity: 'Salt Lake City',
Employee: 'Clark Morgan',
}, {
OrderNumber: 56272,
OrderDate: '2014/05/16',
SaleAmount: 15850,
StoreState: 'Utah',
StoreCity: 'Salt Lake City',
Employee: 'Clark Morgan',
}, {
OrderNumber: 57429,
OrderDate: '2014/04/11',
SaleAmount: 11050,
StoreState: 'Arizona',
StoreCity: 'Phoenix',
Employee: 'Clark Morgan',
}, {
OrderNumber: 58292,
OrderDate: '2014/04/05',
SaleAmount: 13500,
StoreState: 'California',
StoreCity: 'Los Angeles',
Employee: 'Harv Mudd',
}, {
OrderNumber: 62427,
OrderDate: '2014/05/17',
SaleAmount: 23500,
StoreState: 'Nevada',
StoreCity: 'Las Vegas',
Employee: 'Harv Mudd',
}, {
OrderNumber: 65977,
OrderDate: '2014/02/13',
SaleAmount: 2550,
StoreState: 'Wyoming',
StoreCity: 'Casper',
Employee: 'Todd Hoffman',
}, {
OrderNumber: 66947,
OrderDate: '2014/01/06',
SaleAmount: 3500,
StoreState: 'Utah',
StoreCity: 'Salt Lake City',
Employee: 'Clark Morgan',
}, {
OrderNumber: 68428,
OrderDate: '2014/03/13',
SaleAmount: 10500,
StoreState: 'California',
StoreCity: 'Los Angeles',
Employee: 'Harv Mudd',
}, {
OrderNumber: 69477,
OrderDate: '2014/01/22',
SaleAmount: 14200,
StoreState: 'California',
StoreCity: 'Anaheim',
Employee: 'Harv Mudd',
}, {
OrderNumber: 72947,
OrderDate: '2014/03/05',
SaleAmount: 13350,
StoreState: 'Nevada',
StoreCity: 'Las Vegas',
Employee: 'Harv Mudd',
}, {
OrderNumber: 73088,
OrderDate: '2014/01/21',
SaleAmount: 8600,
StoreState: 'Nevada',
StoreCity: 'Reno',
Employee: 'Clark Morgan',
}, {
OrderNumber: 76927,
OrderDate: '2014/04/04',
SaleAmount: 9800,
StoreState: 'Utah',
StoreCity: 'Salt Lake City',
Employee: 'Clark Morgan',
}, {
OrderNumber: 77297,
OrderDate: '2014/01/07',
SaleAmount: 10850,
StoreState: 'Arizona',
StoreCity: 'Phoenix',
Employee: 'Clark Morgan',
}, {
OrderNumber: 84744,
OrderDate: '2014/05/20',
SaleAmount: 4650,
StoreState: 'Nevada',
StoreCity: 'Las Vegas',
Employee: 'Harv Mudd',
}, {
OrderNumber: 85028,
OrderDate: '2014/02/08',
SaleAmount: 2575,
StoreState: 'Nevada',
StoreCity: 'Reno',
Employee: 'Clark Morgan',
}, {
OrderNumber: 87297,
OrderDate: '2014/04/08',
SaleAmount: 14200,
StoreState: 'Wyoming',
StoreCity: 'Casper',
Employee: 'Todd Hoffman',
}, {
OrderNumber: 88027,
OrderDate: '2014/05/18',
SaleAmount: 13650,
StoreState: 'Utah',
StoreCity: 'Salt Lake City',
Employee: 'Clark Morgan',
}, {
OrderNumber: 94726,
OrderDate: '2014/02/23',
SaleAmount: 20500,
StoreState: 'California',
StoreCity: 'San Jose',
Employee: 'Jim Packard',
}, {
OrderNumber: 95266,
OrderDate: '2014/03/18',
SaleAmount: 9050,
StoreState: 'Nevada',
StoreCity: 'Las Vegas',
Employee: 'Harv Mudd',
}, {
OrderNumber: 98477,
OrderDate: '2014/05/08',
SaleAmount: 23500,
StoreState: 'Wyoming',
StoreCity: 'Casper',
Employee: 'Todd Hoffman',
}, {
OrderNumber: 99247,
OrderDate: '2014/02/27',
SaleAmount: 2100,
StoreState: 'Utah',
StoreCity: 'Salt Lake City',
Employee: 'Clark Morgan',
}, {
OrderNumber: 174884,
OrderDate: '2014/03/03',
SaleAmount: 7200,
StoreState: 'Colorado',
StoreCity: 'Denver',
Employee: 'Todd Hoffman',
}, {
OrderNumber: 188877,
OrderDate: '2014/02/14',
SaleAmount: 8750,
StoreState: 'Arizona',
StoreCity: 'Phoenix',
Employee: 'Clark Morgan',
}, {
OrderNumber: 191883,
OrderDate: '2014/02/28',
SaleAmount: 9900,
StoreState: 'California',
StoreCity: 'Los Angeles',
Employee: 'Harv Mudd',
}, {
OrderNumber: 192474,
OrderDate: '2014/02/18',
SaleAmount: 12800,
StoreState: 'California',
StoreCity: 'Anaheim',
Employee: 'Harv Mudd',
}, {
OrderNumber: 193847,
OrderDate: '2014/05/06',
SaleAmount: 14100,
StoreState: 'California',
StoreCity: 'San Diego',
Employee: 'Harv Mudd',
}, {
OrderNumber: 194877,
OrderDate: '2014/03/17',
SaleAmount: 4750,
StoreState: 'California',
StoreCity: 'San Jose',
Employee: 'Jim Packard',
}, {
OrderNumber: 195746,
OrderDate: '2014/02/04',
SaleAmount: 9050,
StoreState: 'Nevada',
StoreCity: 'Las Vegas',
Employee: 'Harv Mudd',
}, {
OrderNumber: 197474,
OrderDate: '2014/01/17',
SaleAmount: 6400,
StoreState: 'Nevada',
StoreCity: 'Reno',
Employee: 'Clark Morgan',
}, {
OrderNumber: 198746,
OrderDate: '2014/02/04',
SaleAmount: 15700,
StoreState: 'Colorado',
StoreCity: 'Denver',
Employee: 'Todd Hoffman',
}, {
OrderNumber: 214222,
OrderDate: '2014/02/03',
SaleAmount: 11050,
StoreState: 'Arizona',
StoreCity: 'Phoenix',
Employee: 'Clark Morgan',
}];
Display Header Filter Icons
Assign true to the headerFilter.visible property to allow users to filter JavaScript CardView fields with header icons. To hide the icon for a specific column, set columns.allowHeaderFiltering to false.
Enable Search UI Within Header Filters
DevExtreme JavaScript CardView supports text-based search (to find specific values in a header filter). Define the search property in the headerFilter object or a columns.headerFilter object to configure this capability.
The search panel checks for values only within the same data field. To expand search to additional fields, use the search.searchExpr property. For example, this demo allows you to enter a state name in the City column's header filter. You can then see a list of all cities within the specified state and select city names that you want to use as a filter.
To apply a comparison operation (used to search header filter values), specify the search.mode property.