Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Backend API
$(() => {
function getOrderDay(rowData) {
return (new Date(rowData.OrderDate)).getDay();
}
$('#card-view').dxCardView({
dataSource: orders,
keyExpr: 'ID',
cardsPerRow: 'auto',
cardMinWidth: 310,
headerFilter: {
visible: true,
},
filterPanel: {
visible: true,
},
filterValue: [['Employee', '=', 'Clark Morgan'], 'and', ['DeliveryDate', 'weekends']],
filterBuilder: {
customOperations: [{
name: 'weekends',
caption: 'Weekends',
dataTypes: ['date'],
icon: 'check',
hasValue: false,
calculateFilterExpression() {
return [[getOrderDay, '=', 0], 'or', [getOrderDay, '=', 6]];
},
}],
},
columns: [{
dataField: 'OrderNumber',
headerFilter: {
groupInterval: 10000,
},
}, {
dataField: 'OrderDate',
dataType: 'date',
}, {
dataField: 'DeliveryDate',
dataType: 'date',
}, {
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: 'CustomerStoreCity',
caption: 'City',
}, {
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.3/css/dx.light.css" />
<script src="js/dx.all.js"></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 = [{
ID: 1,
OrderNumber: 35703,
OrderDate: '2017/04/10',
DeliveryDate: '2017/04/13',
SaleAmount: 11800,
Terms: '15 Days',
CustomerStoreCity: 'Los Angeles, CA',
Employee: 'Harv Mudd',
}, {
ID: 4,
OrderNumber: 35711,
OrderDate: '2017/01/12',
DeliveryDate: '2017/01/13',
SaleAmount: 16050,
Terms: '15 Days',
CustomerStoreCity: 'San Jose, CA',
Employee: 'Jim Packard',
}, {
ID: 5,
OrderNumber: 35714,
OrderDate: '2017/01/22',
DeliveryDate: '2017/01/27',
SaleAmount: 14750,
Terms: '15 Days',
CustomerStoreCity: 'Las Vegas, NV',
Employee: 'Harv Mudd',
}, {
ID: 7,
OrderNumber: 35983,
OrderDate: '2017/02/07',
DeliveryDate: '2017/02/10',
SaleAmount: 3725,
Terms: '15 Days',
CustomerStoreCity: 'Denver, CO',
Employee: 'Todd Hoffman',
}, {
ID: 11,
OrderNumber: 38466,
OrderDate: '2017/03/01',
DeliveryDate: '2017/03/03',
SaleAmount: 7800,
Terms: '15 Days',
CustomerStoreCity: 'Los Angeles, CA',
Employee: 'Harv Mudd',
}, {
ID: 14,
OrderNumber: 39420,
OrderDate: '2017/02/15',
DeliveryDate: '2017/02/17',
SaleAmount: 20500,
Terms: '15 Days',
CustomerStoreCity: 'San Jose, CA',
Employee: 'Jim Packard',
}, {
ID: 15,
OrderNumber: 39874,
OrderDate: '2017/02/04',
DeliveryDate: '2017/02/10',
SaleAmount: 9050,
Terms: '30 Days',
CustomerStoreCity: 'Las Vegas, NV',
Employee: 'Harv Mudd',
}, {
ID: 18,
OrderNumber: 42847,
OrderDate: '2017/02/15',
DeliveryDate: '2017/02/17',
SaleAmount: 20400,
Terms: '30 Days',
CustomerStoreCity: 'Casper, WY',
Employee: 'Todd Hoffman',
}, {
ID: 30,
OrderNumber: 57429,
OrderDate: '2017/05/16',
DeliveryDate: '2017/05/19',
SaleAmount: 11050,
Terms: '30 Days',
CustomerStoreCity: 'Phoenix, AZ',
Employee: 'Clark Morgan',
}, {
ID: 32,
OrderNumber: 58292,
OrderDate: '2017/05/13',
DeliveryDate: '2017/05/19',
SaleAmount: 13500,
Terms: '15 Days',
CustomerStoreCity: 'Los Angeles, CA',
Employee: 'Harv Mudd',
}, {
ID: 36,
OrderNumber: 62427,
OrderDate: '2017/01/27',
DeliveryDate: '2017/02/03',
SaleAmount: 23500,
Terms: '15 Days',
CustomerStoreCity: 'Las Vegas, NV',
Employee: 'Harv Mudd',
}, {
ID: 39,
OrderNumber: 65977,
OrderDate: '2017/02/05',
DeliveryDate: '2017/02/10',
SaleAmount: 2550,
Terms: '15 Days',
CustomerStoreCity: 'Casper, WY',
Employee: 'Todd Hoffman',
}, {
ID: 42,
OrderNumber: 68428,
OrderDate: '2017/04/10',
DeliveryDate: '2017/04/14',
SaleAmount: 10500,
Terms: '15 Days',
CustomerStoreCity: 'Los Angeles, CA',
Employee: 'Harv Mudd',
}, {
ID: 43,
OrderNumber: 69477,
OrderDate: '2017/03/09',
DeliveryDate: '2017/03/10',
SaleAmount: 14200,
Terms: '15 Days',
CustomerStoreCity: 'Anaheim, CA',
Employee: 'Harv Mudd',
}, {
ID: 46,
OrderNumber: 72947,
OrderDate: '2017/01/14',
DeliveryDate: '2017/01/20',
SaleAmount: 13350,
Terms: '30 Days',
CustomerStoreCity: 'Las Vegas, NV',
Employee: 'Harv Mudd',
}, {
ID: 47,
OrderNumber: 73088,
OrderDate: '2017/03/25',
DeliveryDate: '2017/03/31',
SaleAmount: 8600,
Terms: '30 Days',
CustomerStoreCity: 'Reno, NV',
Employee: 'Clark Morgan',
}, {
ID: 51,
OrderNumber: 77297,
OrderDate: '2017/04/30',
DeliveryDate: '2017/05/05',
SaleAmount: 10850,
Terms: '30 Days',
CustomerStoreCity: 'Phoenix, AZ',
Employee: 'Clark Morgan',
}, {
ID: 56,
OrderNumber: 84744,
OrderDate: '2017/02/10',
DeliveryDate: '2017/02/17',
SaleAmount: 4650,
Terms: '30 Days',
CustomerStoreCity: 'Las Vegas, NV',
Employee: 'Harv Mudd',
}, {
ID: 57,
OrderNumber: 85028,
OrderDate: '2017/05/17',
DeliveryDate: '2017/05/19',
SaleAmount: 2575,
Terms: '30 Days',
CustomerStoreCity: 'Reno, NV',
Employee: 'Clark Morgan',
}, {
ID: 59,
OrderNumber: 87297,
OrderDate: '2017/04/21',
DeliveryDate: '2017/04/28',
SaleAmount: 14200,
Terms: '30 Days',
CustomerStoreCity: 'Casper, WY',
Employee: 'Todd Hoffman',
}, {
ID: 65,
OrderNumber: 94726,
OrderDate: '2017/05/22',
DeliveryDate: '2017/05/26',
SaleAmount: 20500,
Terms: '15 Days',
CustomerStoreCity: 'San Jose, CA',
Employee: 'Jim Packard',
}, {
ID: 66,
OrderNumber: 95266,
OrderDate: '2017/03/10',
DeliveryDate: '2017/03/17',
SaleAmount: 9050,
Terms: '15 Days',
CustomerStoreCity: 'Las Vegas, NV',
Employee: 'Harv Mudd',
}, {
ID: 69,
OrderNumber: 98477,
OrderDate: '2017/01/01',
DeliveryDate: '2017/01/06',
SaleAmount: 23500,
Terms: '15 Days',
CustomerStoreCity: 'Casper, WY',
Employee: 'Todd Hoffman',
}, {
ID: 78,
OrderNumber: 174884,
OrderDate: '2017/04/10',
DeliveryDate: '2017/04/14',
SaleAmount: 7200,
Terms: '30 Days',
CustomerStoreCity: 'Denver, CO',
Employee: 'Todd Hoffman',
}, {
ID: 81,
OrderNumber: 188877,
OrderDate: '2017/02/11',
DeliveryDate: '2017/02/17',
SaleAmount: 8750,
Terms: '30 Days',
CustomerStoreCity: 'Phoenix, AZ',
Employee: 'Clark Morgan',
}, {
ID: 82,
OrderNumber: 191883,
OrderDate: '2017/02/05',
DeliveryDate: '2017/02/10',
SaleAmount: 9900,
Terms: '30 Days',
CustomerStoreCity: 'Los Angeles, CA',
Employee: 'Harv Mudd',
}, {
ID: 83,
OrderNumber: 192474,
OrderDate: '2017/01/21',
DeliveryDate: '2017/01/27',
SaleAmount: 12800,
Terms: '30 Days',
CustomerStoreCity: 'Anaheim, CA',
Employee: 'Harv Mudd',
}, {
ID: 84,
OrderNumber: 193847,
OrderDate: '2017/03/21',
DeliveryDate: '2017/03/24',
SaleAmount: 14100,
Terms: '30 Days',
CustomerStoreCity: 'San Diego, CA',
Employee: 'Harv Mudd',
}, {
ID: 85,
OrderNumber: 194877,
OrderDate: '2017/03/06',
DeliveryDate: '2017/03/10',
SaleAmount: 4750,
Terms: '30 Days',
CustomerStoreCity: 'San Jose, CA',
Employee: 'Jim Packard',
}, {
ID: 86,
OrderNumber: 195746,
OrderDate: '2017/05/26',
DeliveryDate: '2017/06/02',
SaleAmount: 9050,
Terms: '30 Days',
CustomerStoreCity: 'Las Vegas, NV',
Employee: 'Harv Mudd',
}, {
ID: 87,
OrderNumber: 197474,
OrderDate: '2017/03/02',
DeliveryDate: '2017/03/03',
SaleAmount: 6400,
Terms: '30 Days',
CustomerStoreCity: 'Reno, NV',
Employee: 'Clark Morgan',
}, {
ID: 88,
OrderNumber: 198746,
OrderDate: '2017/05/09',
DeliveryDate: '2017/05/12',
SaleAmount: 15700,
Terms: '30 Days',
CustomerStoreCity: 'Denver, CO',
Employee: 'Todd Hoffman',
}, {
ID: 91,
OrderNumber: 214222,
OrderDate: '2017/02/08',
DeliveryDate: '2017/02/10',
SaleAmount: 11050,
Terms: '30 Days',
CustomerStoreCity: 'Phoenix, AZ',
Employee: 'Clark Morgan',
}];
To display the filter panel, set the filterPanel.visible property to true.
A click within the combined filter calls the integrated filter builder. You can configure its settings in the filterBuilder object. In this demo, this object is used to add beforeNoon and afterNoon custom filter operations.
The integrated filter builder displays in a DevExtreme Popup component. You can configure the filter builder popup with the filterBuilderPopup object.