Backend API
<dx-card-view
id="cardView"
[dataSource]="orders"
keyExpr="ID"
[filterValue]="filterValue"
cardsPerRow="auto"
[cardMinWidth]="310"
>
<dxo-card-view-header-filter [visible]="true"></dxo-card-view-header-filter>
<dxo-card-view-filter-panel [visible]="true"></dxo-card-view-filter-panel>
<dxo-card-view-filter-builder
[customOperations]="customOperations"
></dxo-card-view-filter-builder>
<dxi-card-view-column dataField="OrderNumber">
<dxo-card-view-column-header-filter
[groupInterval]="10000"
></dxo-card-view-column-header-filter>
</dxi-card-view-column>
<dxi-card-view-column
dataField="OrderDate"
dataType="date"
></dxi-card-view-column>
<dxi-card-view-column
dataField="DeliveryDate"
dataType="date"
></dxi-card-view-column>
<dxi-card-view-column dataField="SaleAmount" dataType="number">
<dxo-card-view-column-header-filter
[dataSource]="saleAmountHeaderFilterDataSource"
></dxo-card-view-column-header-filter>
</dxi-card-view-column>
<dxi-card-view-column
dataField="CustomerStoreCity"
caption="City"
></dxi-card-view-column>
<dxi-card-view-column dataField="Employee"></dxi-card-view-column>
</dx-card-view>
import { bootstrapApplication } from '@angular/platform-browser';
import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
import { DxCardViewModule } from 'devextreme-angular/ui/card-view';
import { Order, Service } from './app.service';
if (!/localhost/.test(document.location.host)) {
enableProdMode();
}
function getOrderDay({ OrderDate }: Order): number {
return (new Date(OrderDate)).getDay();
}
@Component({
styleUrls: [`app/app.component.css`],
selector: 'demo-app',
templateUrl: './app.component.html',
providers: [Service],
imports: [
DxCardViewModule,
],
})
export class AppComponent {
filterValue = [['Employee', '=', 'Clark Morgan'], 'and', ['DeliveryDate', 'weekends']];
customOperations = [{
name: 'weekends',
caption: 'Weekends',
dataTypes: ['date'],
icon: 'check',
hasValue: false,
calculateFilterExpression() {
return [[getOrderDay, '=', 0], 'or', [getOrderDay, '=', 6]];
},
}];
saleAmountHeaderFilterDataSource = [
{
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],
},
];
orders: Order[];
constructor(service: Service) {
this.orders = service.getOrders();
}
}
bootstrapApplication(AppComponent, {
providers: [
provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
],
});
import { Injectable } from '@angular/core';
export interface Order {
ID: number;
OrderNumber: number;
SaleAmount: number;
CustomerStoreCity: string;
Employee: string;
OrderDate: string;
DeliveryDate: string;
Terms: string;
}
const orders: Order[] = [{
ID: 1,
OrderNumber: 35703,
OrderDate: '2024/04/10',
DeliveryDate: '2024/04/13',
SaleAmount: 11800,
Terms: '15 Days',
CustomerStoreCity: 'Los Angeles, CA',
Employee: 'Harv Mudd',
}, {
ID: 4,
OrderNumber: 35711,
OrderDate: '2024/01/12',
DeliveryDate: '2024/01/13',
SaleAmount: 16050,
Terms: '15 Days',
CustomerStoreCity: 'San Jose, CA',
Employee: 'Jim Packard',
}, {
ID: 5,
OrderNumber: 35714,
OrderDate: '2024/01/22',
DeliveryDate: '2024/01/27',
SaleAmount: 14750,
Terms: '15 Days',
CustomerStoreCity: 'Las Vegas, NV',
Employee: 'Harv Mudd',
}, {
ID: 7,
OrderNumber: 35983,
OrderDate: '2024/02/07',
DeliveryDate: '2024/02/10',
SaleAmount: 3725,
Terms: '15 Days',
CustomerStoreCity: 'Denver, CO',
Employee: 'Todd Hoffman',
}, {
ID: 11,
OrderNumber: 38466,
OrderDate: '2024/03/01',
DeliveryDate: '2024/03/03',
SaleAmount: 7800,
Terms: '15 Days',
CustomerStoreCity: 'Los Angeles, CA',
Employee: 'Harv Mudd',
}, {
ID: 14,
OrderNumber: 39420,
OrderDate: '2024/02/15',
DeliveryDate: '2024/02/17',
SaleAmount: 20500,
Terms: '15 Days',
CustomerStoreCity: 'San Jose, CA',
Employee: 'Jim Packard',
}, {
ID: 15,
OrderNumber: 39874,
OrderDate: '2024/02/04',
DeliveryDate: '2024/02/10',
SaleAmount: 9050,
Terms: '30 Days',
CustomerStoreCity: 'Las Vegas, NV',
Employee: 'Harv Mudd',
}, {
ID: 18,
OrderNumber: 42847,
OrderDate: '2024/02/15',
DeliveryDate: '2024/02/17',
SaleAmount: 20400,
Terms: '30 Days',
CustomerStoreCity: 'Casper, WY',
Employee: 'Todd Hoffman',
}, {
ID: 30,
OrderNumber: 57429,
OrderDate: '2024/05/16',
DeliveryDate: '2024/05/19',
SaleAmount: 11050,
Terms: '30 Days',
CustomerStoreCity: 'Phoenix, AZ',
Employee: 'Clark Morgan',
}, {
ID: 32,
OrderNumber: 58292,
OrderDate: '2024/05/13',
DeliveryDate: '2024/05/19',
SaleAmount: 13500,
Terms: '15 Days',
CustomerStoreCity: 'Los Angeles, CA',
Employee: 'Harv Mudd',
}, {
ID: 36,
OrderNumber: 62427,
OrderDate: '2024/01/27',
DeliveryDate: '2024/02/03',
SaleAmount: 23500,
Terms: '15 Days',
CustomerStoreCity: 'Las Vegas, NV',
Employee: 'Harv Mudd',
}, {
ID: 39,
OrderNumber: 65977,
OrderDate: '2024/02/05',
DeliveryDate: '2024/02/10',
SaleAmount: 2550,
Terms: '15 Days',
CustomerStoreCity: 'Casper, WY',
Employee: 'Todd Hoffman',
}, {
ID: 42,
OrderNumber: 68428,
OrderDate: '2024/04/10',
DeliveryDate: '2024/04/14',
SaleAmount: 10500,
Terms: '15 Days',
CustomerStoreCity: 'Los Angeles, CA',
Employee: 'Harv Mudd',
}, {
ID: 43,
OrderNumber: 69477,
OrderDate: '2024/03/09',
DeliveryDate: '2024/03/10',
SaleAmount: 14200,
Terms: '15 Days',
CustomerStoreCity: 'Anaheim, CA',
Employee: 'Harv Mudd',
}, {
ID: 46,
OrderNumber: 72947,
OrderDate: '2024/01/14',
DeliveryDate: '2024/01/20',
SaleAmount: 13350,
Terms: '30 Days',
CustomerStoreCity: 'Las Vegas, NV',
Employee: 'Harv Mudd',
}, {
ID: 47,
OrderNumber: 73088,
OrderDate: '2024/03/25',
DeliveryDate: '2024/03/31',
SaleAmount: 8600,
Terms: '30 Days',
CustomerStoreCity: 'Reno, NV',
Employee: 'Clark Morgan',
}, {
ID: 51,
OrderNumber: 77297,
OrderDate: '2024/04/30',
DeliveryDate: '2024/05/05',
SaleAmount: 10850,
Terms: '30 Days',
CustomerStoreCity: 'Phoenix, AZ',
Employee: 'Clark Morgan',
}, {
ID: 56,
OrderNumber: 84744,
OrderDate: '2024/02/10',
DeliveryDate: '2024/02/17',
SaleAmount: 4650,
Terms: '30 Days',
CustomerStoreCity: 'Las Vegas, NV',
Employee: 'Harv Mudd',
}, {
ID: 57,
OrderNumber: 85028,
OrderDate: '2024/05/17',
DeliveryDate: '2024/05/19',
SaleAmount: 2575,
Terms: '30 Days',
CustomerStoreCity: 'Reno, NV',
Employee: 'Clark Morgan',
}, {
ID: 59,
OrderNumber: 87297,
OrderDate: '2024/04/21',
DeliveryDate: '2024/04/28',
SaleAmount: 14200,
Terms: '30 Days',
CustomerStoreCity: 'Casper, WY',
Employee: 'Todd Hoffman',
}, {
ID: 65,
OrderNumber: 94726,
OrderDate: '2024/05/22',
DeliveryDate: '2024/05/26',
SaleAmount: 20500,
Terms: '15 Days',
CustomerStoreCity: 'San Jose, CA',
Employee: 'Jim Packard',
}, {
ID: 66,
OrderNumber: 95266,
OrderDate: '2024/03/10',
DeliveryDate: '2024/03/17',
SaleAmount: 9050,
Terms: '15 Days',
CustomerStoreCity: 'Las Vegas, NV',
Employee: 'Harv Mudd',
}, {
ID: 69,
OrderNumber: 98477,
OrderDate: '2024/01/01',
DeliveryDate: '2024/01/06',
SaleAmount: 23500,
Terms: '15 Days',
CustomerStoreCity: 'Casper, WY',
Employee: 'Todd Hoffman',
}, {
ID: 78,
OrderNumber: 174884,
OrderDate: '2024/04/10',
DeliveryDate: '2024/04/14',
SaleAmount: 7200,
Terms: '30 Days',
CustomerStoreCity: 'Denver, CO',
Employee: 'Todd Hoffman',
}, {
ID: 81,
OrderNumber: 188877,
OrderDate: '2024/02/11',
DeliveryDate: '2024/02/17',
SaleAmount: 8750,
Terms: '30 Days',
CustomerStoreCity: 'Phoenix, AZ',
Employee: 'Clark Morgan',
}, {
ID: 82,
OrderNumber: 191883,
OrderDate: '2024/02/05',
DeliveryDate: '2024/02/10',
SaleAmount: 9900,
Terms: '30 Days',
CustomerStoreCity: 'Los Angeles, CA',
Employee: 'Harv Mudd',
}, {
ID: 83,
OrderNumber: 192474,
OrderDate: '2024/01/21',
DeliveryDate: '2024/01/27',
SaleAmount: 12800,
Terms: '30 Days',
CustomerStoreCity: 'Anaheim, CA',
Employee: 'Harv Mudd',
}, {
ID: 84,
OrderNumber: 193847,
OrderDate: '2024/03/21',
DeliveryDate: '2024/03/24',
SaleAmount: 14100,
Terms: '30 Days',
CustomerStoreCity: 'San Diego, CA',
Employee: 'Harv Mudd',
}, {
ID: 85,
OrderNumber: 194877,
OrderDate: '2024/03/06',
DeliveryDate: '2024/03/10',
SaleAmount: 4750,
Terms: '30 Days',
CustomerStoreCity: 'San Jose, CA',
Employee: 'Jim Packard',
}, {
ID: 86,
OrderNumber: 195746,
OrderDate: '2024/05/26',
DeliveryDate: '2024/06/02',
SaleAmount: 9050,
Terms: '30 Days',
CustomerStoreCity: 'Las Vegas, NV',
Employee: 'Harv Mudd',
}, {
ID: 87,
OrderNumber: 197474,
OrderDate: '2024/03/02',
DeliveryDate: '2024/03/03',
SaleAmount: 6400,
Terms: '30 Days',
CustomerStoreCity: 'Reno, NV',
Employee: 'Clark Morgan',
}, {
ID: 88,
OrderNumber: 198746,
OrderDate: '2024/05/09',
DeliveryDate: '2024/05/12',
SaleAmount: 15700,
Terms: '30 Days',
CustomerStoreCity: 'Denver, CO',
Employee: 'Todd Hoffman',
}, {
ID: 91,
OrderNumber: 214222,
OrderDate: '2024/02/08',
DeliveryDate: '2024/02/10',
SaleAmount: 11050,
Terms: '30 Days',
CustomerStoreCity: 'Phoenix, AZ',
Employee: 'Clark Morgan',
}];
@Injectable()
export class Service {
getOrders() {
return orders;
}
}
<!DOCTYPE html>
<html 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" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/26.1.5/css/dx.light.css" />
</head>
<body class="dx-viewport">
<div class="demo-container">
<demo-app>Loading...</demo-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/zone.js@0.16.2/bundles/zone.umd.js"></script>
<script src="./bundle.js" type="module"></script>
</body>
</html>
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.