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
$(() => {
const cardView = $('#card-view').dxCardView({
dataSource: employees,
keyExpr: 'ID',
cardsPerRow: 'auto',
cardMinWidth: 300,
columnChooser: {
enabled: true,
mode: 'select',
height: '340px',
search: {
enabled: true,
},
selection: {
allowSelectAll: true,
selectByClick: true,
},
},
searchPanel: {
visible: true,
},
cardCover: {
imageExpr: ({ First_Name, Last_Name }) => `../../../../images/employees/new/${First_Name} ${Last_Name}.jpg`,
altExpr: ({ First_Name, Last_Name }) => `Photo of ${First_Name} ${Last_Name}`,
},
columns: [
{
caption: 'Full Name',
calculateFieldValue(data) {
return `${data.First_Name} ${data.Last_Name}`;
},
allowHiding: false,
},
{
dataField: 'Birth_Date',
dataType: 'date',
},
{
dataField: 'Hire_Date',
dataType: 'date',
},
'Position',
'Department',
'State',
'City',
{
dataField: 'Phone',
allowHiding: false,
},
{
dataField: 'Email',
visible: false,
}
],
}).dxCardView('instance');
function renderOptions() {
$('#column-chooser-mode').dxSelectBox({
dataSource: ['dragAndDrop', 'select'],
value: cardView.option('columnChooser.mode'),
onValueChanged: ({value}) => {
cardView.option('columnChooser.mode', value);
renderOptions();
},
inputAttr: {
'aria-label': 'Column Chooser Mode',
},
});
$('#search-enabled').dxCheckBox({
text: 'Search Enabled',
value: cardView.option('columnChooser.search.enabled') ?? false,
onValueChanged: ({value}) => {
cardView.option('columnChooser.search.enabled', value);
},
});
$('#allow-select-all').dxCheckBox({
text: 'Allow Select All',
value: cardView.option('columnChooser.selection.allowSelectAll') ?? false,
onValueChanged: ({value}) => {
cardView.option('columnChooser.selection.allowSelectAll', value);
},
disabled: cardView.option('columnChooser.mode') !== 'select',
});
$('#select-by-click').dxCheckBox({
text: 'Select By Click On Item',
value: cardView.option('columnChooser.selection.selectByClick') ?? false,
onValueChanged: ({value}) => {
cardView.option('columnChooser.selection.selectByClick', value);
},
disabled: cardView.option('columnChooser.mode') !== 'select',
});
$('#allow-column-reordering').dxCheckBox({
text: 'Allow Column Reordering',
value: cardView.option('allowColumnReordering') ?? false,
onValueChanged: ({value}) => {
cardView.option('allowColumnReordering', value);
},
});
}
renderOptions();
});
<!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 class="options-panel">
<div class="caption">Options</div>
<div class="options-container">
<div class="option"> <span>Column Chooser Mode:</span><div id="column-chooser-mode"></div> </div>
<div class="option"> <div id="search-enabled"></div> </div>
<div class="option"> <div id="allow-select-all"></div> </div>
<div class="option"> <div id="select-by-click"></div> </div>
<div class="option"> <div id="allow-column-reordering"></div> </div>
</div>
</div>
<div id="card-view"></div>
</div>
</body>
</html>
.options-panel {
margin-top: 20px;
padding: 20px;
background-color: rgba(191, 191, 191, 0.15);
}
.options-container {
display: flex;
flex-wrap: wrap;
align-items: center;
}
.caption {
font-size: 18px;
font-weight: 500;
}
.option {
margin: 10px;
display: flex;
align-items: center;
width: fit-content;
}
.option > .dx-selectbox {
width: 200px;
display: inline-block;
vertical-align: middle;
}
.option > span {
margin-right: 10px;
}
const employees = [{
'ID': 3,
'First_Name': 'Arthur',
'Last_Name': 'Miller',
'Position': 'CTO',
'Address': '3800 Homer St.',
'City': 'Los Angeles',
'Email': 'arthurm@dx-email.com',
'Skype': 'arthurm_DX_skype',
'Phone': '3105558583',
'Birth_Date': '1972-07-11T00:00:00',
'Hire_Date': '2007-12-18T00:00:00',
'Department': 'Management',
'State': 'California'
}, {
'ID': 4,
'First_Name': 'Robert',
'Last_Name': 'Reagan',
'Position': 'CMO',
'Address': '4 Westmoreland Pl.',
'City': 'Pasadena',
'Email': 'robertr@dx-email.com',
'Skype': 'robertr_DX_skype',
'Phone': '8185552387',
'Birth_Date': '1974-09-07T00:00:00',
'Hire_Date': '2002-11-08T00:00:00',
'Department': 'Management',
'State': 'California'
}, {
'ID': 5,
'First_Name': 'Greta',
'Last_Name': 'Sims',
'Position': 'HR Manager',
'Address': '1700 S Grandview Dr.',
'City': 'Alhambra',
'Email': 'gretas@dx-email.com',
'Skype': 'gretas_DX_skype',
'Phone': '8185556546',
'Birth_Date': '1977-11-22T00:00:00',
'Hire_Date': '1998-04-23T00:00:00',
'Department': 'Human Resources',
'State': 'California'
}, {
'ID': 6,
'First_Name': 'Brett',
'Last_Name': 'Wade',
'Position': 'IT Manager',
'Address': '1120 Old Mill Rd.',
'City': 'San Marino',
'Email': 'brettw@dx-email.com',
'Skype': 'brettw_DX_skype',
'Phone': '6265550358',
'Birth_Date': '1968-12-01T00:00:00',
'Hire_Date': '2009-03-06T00:00:00',
'Department': 'IT',
'State': 'California'
}, {
'ID': 7,
'First_Name': 'Sandra',
'Last_Name': 'Johnson',
'Position': 'Controller',
'Address': '4600 N Virginia Rd.',
'City': 'Long Beach',
'Email': 'sandraj@dx-email.com',
'Skype': 'sandraj_DX_skype',
'Phone': '5625552082',
'Birth_Date': '1974-11-15T00:00:00',
'Hire_Date': '2005-05-11T00:00:00',
'Department': 'Human Resources',
'State': 'California'
}, {
'ID': 10,
'First_Name': 'Kevin',
'Last_Name': 'Carter',
'Position': 'Shipping Manager',
'Address': '424 N Main St.',
'City': 'Los Angeles',
'Email': 'kevinc@dx-email.com',
'Skype': 'kevinc_DX_skype',
'Phone': '2135552840',
'Birth_Date': '1978-01-09T00:00:00',
'Hire_Date': '2009-08-11T00:00:00',
'Department': 'Shipping',
'State': 'California'
}, {
'ID': 14,
'First_Name': 'Victor',
'Last_Name': 'Norris',
'Position': 'Shipping Assistant',
'Address': '811 West 7th St.',
'City': 'Los Angeles',
'Email': 'victorn@dx-email.com',
'Skype': 'victorn_DX_skype',
'Phone': '2135559278',
'Birth_Date': '1986-07-23T00:00:00',
'Hire_Date': '2012-07-23T00:00:00',
'Department': 'Shipping',
'State': 'California'
}, {
'ID': 15,
'First_Name': 'Mary',
'Last_Name': 'Stern',
'Position': 'Shipping Assistant',
'Address': '113 N Cedar St.',
'City': 'Glendale',
'Email': 'marys@dx-email.com',
'Skype': 'marys_DX_skype',
'Phone': '8185557857',
'Birth_Date': '1982-04-08T00:00:00',
'Hire_Date': '2012-08-12T00:00:00',
'Department': 'Shipping',
'State': 'California'
}, {
'ID': 16,
'First_Name': 'Robin',
'Last_Name': 'Cosworth',
'Position': 'Shipping Assistant',
'Address': '501 N Main St.',
'City': 'Los Angeles',
'Email': 'robinc@dx-email.com',
'Skype': 'robinc_DX_skype',
'Phone': '8185550942',
'Birth_Date': '1981-06-12T00:00:00',
'Hire_Date': '2012-09-01T00:00:00',
'Department': 'Shipping',
'State': 'California'
}, {
'ID': 17,
'First_Name': 'Kelly',
'Last_Name': 'Rodriguez',
'Position': 'Support Assistant',
'Address': '1601 W Mountain St.',
'City': 'Glendale',
'Email': 'kellyr@dx-email.com',
'Skype': 'kellyr_DX_skype',
'Phone': '8185559248',
'Birth_Date': '1988-05-11T00:00:00',
'Hire_Date': '2012-10-13T00:00:00',
'Department': 'Support',
'State': 'California'
}, {
'ID': 18,
'First_Name': 'James',
'Last_Name': 'Anderson',
'Position': 'Support Assistant',
'Address': '4800 Hollywood Blvd',
'City': 'Los Angeles',
'Email': 'jamesa@dx-email.com',
'Skype': 'jamesa_DX_skype',
'Phone': '3235554702',
'Birth_Date': '1987-01-29T00:00:00',
'Hire_Date': '2012-10-18T00:00:00',
'Department': 'Support',
'State': 'California'
}, {
'ID': 20,
'First_Name': 'Olivia',
'Last_Name': 'Peyton',
'Position': 'Sales Assistant',
'Address': '807 W Paseo Del Mar',
'City': 'San Pedro',
'Email': 'oliviap@dx-email.com',
'Skype': 'oliviap_DX_skype',
'Phone': '3105552728',
'Birth_Date': '1981-06-03T00:00:00',
'Hire_Date': '2012-05-14T00:00:00',
'Department': 'Sales',
'State': 'California'
}, {
'ID': 21,
'First_Name': 'Taylor',
'Last_Name': 'Riley',
'Position': 'Network Admin',
'Address': '7776 Torreyson Dr',
'City': 'West Hollywood',
'Email': 'taylorr@dx-email.com',
'Skype': 'taylorr_DX_skype',
'Phone': '3105557276',
'Birth_Date': '1982-08-14T00:00:00',
'Hire_Date': '2012-04-14T00:00:00',
'Department': 'IT',
'State': 'California'
}, {
'ID': 22,
'First_Name': 'Amelia',
'Last_Name': 'Harper',
'Position': 'Network Admin',
'Address': '527 W 7th St',
'City': 'Los Angeles',
'Email': 'ameliah@dx-email.com',
'Skype': 'ameliah_DX_skype',
'Phone': '2135554276',
'Birth_Date': '1983-11-19T00:00:00',
'Hire_Date': '2011-02-10T00:00:00',
'Department': 'IT',
'State': 'California'
}, {
'ID': 25,
'First_Name': 'Karen',
'Last_Name': 'Goodson',
'Position': 'Programmer',
'Address': '309 Monterey Rd',
'City': 'South Pasadena',
'Email': 'kareng@dx-email.com',
'Skype': 'kareng_DX_skype',
'Phone': '6265550908',
'Birth_Date': '1987-04-26T00:00:00',
'Hire_Date': '2011-03-14T00:00:00',
'Department': 'IT',
'State': 'California'
}, {
'ID': 26,
'First_Name': 'Marcus',
'Last_Name': 'Orbison',
'Position': 'Travel Coordinator',
'Address': '501 N Main St',
'City': 'Los Angeles',
'Email': 'marcuso@dx-email.com',
'Skype': 'marcuso_DX_skype',
'Phone': '2135557098',
'Birth_Date': '1982-03-02T00:00:00',
'Hire_Date': '2005-05-19T00:00:00',
'Department': 'Human Resources',
'State': 'California'
}, {
'ID': 28,
'First_Name': 'Morgan',
'Last_Name': 'Kennedy',
'Position': 'Graphic Designer',
'Address': '11222 Dilling St',
'City': 'San Fernando Valley',
'Email': 'morgank@dx-email.com',
'Skype': 'morgank_DX_skype',
'Phone': '8185558238',
'Birth_Date': '1984-07-17T00:00:00',
'Hire_Date': '2012-01-11T00:00:00',
'Department': 'IT',
'State': 'California'
}, {
'ID': 29,
'First_Name': 'Violet',
'Last_Name': 'Bailey',
'Position': 'Jr Graphic Designer',
'Address': '1418 Descanso Dr',
'City': 'La Canada',
'Email': 'violetb@dx-email.com',
'Skype': 'violetb_DX_skype',
'Phone': '8185552478',
'Birth_Date': '1985-06-10T00:00:00',
'Hire_Date': '2012-01-19T00:00:00',
'Department': 'IT',
'State': 'California'
}, {
'ID': 32,
'First_Name': 'Bart',
'Last_Name': 'Arnaz',
'Position': 'Director of Engineering',
'Address': '13109 Old Myford Rd',
'City': 'Irvine',
'Email': 'barta@dx-email.com',
'Skype': 'barta_DX_skype',
'Phone': '7145552000',
'Birth_Date': '1979-11-01T00:00:00',
'Hire_Date': '2008-06-29T00:00:00',
'Department': 'Engineering',
'State': 'California'
}, {
'ID': 33,
'First_Name': 'Leah',
'Last_Name': 'Simpson',
'Position': 'Test Coordinator',
'Address': '6755 Newlin Ave',
'City': 'Whittier',
'Email': 'leahs@dx-email.com',
'Skype': 'leahs_DX_skype',
'Phone': '5625595830',
'Birth_Date': '1983-04-19T00:00:00',
'Hire_Date': '2009-02-14T00:00:00',
'Department': 'Engineering',
'State': 'California'
}, {
'ID': 36,
'First_Name': 'Samantha',
'Last_Name': 'Piper',
'Position': 'Engineer',
'Address': '200 E Ave 43',
'City': 'Los Angeles',
'Email': 'samanthap@dx-email.com',
'Skype': 'samanthap_DX_skype',
'Phone': '3235554512',
'Birth_Date': '1984-12-01T00:00:00',
'Hire_Date': '2008-01-22T00:00:00',
'Department': 'Engineering',
'State': 'California'
}, {
'ID': 38,
'First_Name': 'Terry',
'Last_Name': 'Bradley',
'Position': 'QA Engineer',
'Address': '4595 Cochran St',
'City': 'Simi Valley',
'Email': 'terryb@dx-email.com',
'Skype': 'terryb_DX_skype',
'Phone': '8055552788',
'Birth_Date': '1984-01-09T00:00:00',
'Hire_Date': '2007-10-18T00:00:00',
'Department': 'Engineering',
'State': 'California'
}, {
'ID': 40,
'First_Name': 'Lucy',
'Last_Name': 'Ball',
'Position': 'Sales Assistant',
'Address': '203 Chautauqua Blvd',
'City': 'Pacific Palisades',
'Email': 'lucyb@dx-email.com',
'Skype': 'lucyb_DX_skype',
'Phone': '3105553357',
'Birth_Date': '1986-08-09T00:00:00',
'Hire_Date': '2006-07-19T00:00:00',
'Department': 'Sales',
'State': 'California'
}, {
'ID': 44,
'First_Name': 'Clark',
'Last_Name': 'Morgan',
'Position': 'Retail Sales Manager',
'Address': '4202 Alhambra Ave',
'City': 'Martinez',
'Email': 'clarkm@dx-email.com',
'Skype': 'clarkm_DX_skype',
'Phone': '9255552525',
'Birth_Date': '1988-04-07T00:00:00',
'Hire_Date': '2012-04-11T00:00:00',
'Department': 'Sales',
'State': 'California'
}, {
'ID': 45,
'First_Name': 'Todd',
'Last_Name': 'Hoffman',
'Position': 'Retail Sales Manager',
'Address': '2647 Arroyo Rd',
'City': 'Livermore',
'Email': 'toddh@dx-email.com',
'Skype': 'toddh_DX_skype',
'Phone': '9255553579',
'Birth_Date': '1987-03-25T00:00:00',
'Hire_Date': '2012-04-19T00:00:00',
'Department': 'Sales',
'State': 'California'
}, {
'ID': 47,
'First_Name': 'Lincoln',
'Last_Name': 'Bartlett',
'Position': 'Sales Assistant',
'Address': '800 N Alameda St',
'City': 'Los Angeles',
'Email': 'lincolnb@dx-email.com',
'Skype': 'lincoln_DX_skype',
'Phone': '2135558272',
'Birth_Date': '1990-08-02T00:00:00',
'Hire_Date': '2012-05-11T00:00:00',
'Department': 'Sales',
'State': 'California'
}, {
'ID': 48,
'First_Name': 'Brad',
'Last_Name': 'Farkus',
'Position': 'Engineer',
'Address': '1635 Woods Drive',
'City': 'Los Angeles',
'Email': 'bradf@dx-email.com',
'Skype': 'brad_DX_skype',
'Phone': '2135553626',
'Birth_Date': '1991-03-17T00:00:00',
'Hire_Date': '2010-04-15T00:00:00',
'Department': 'Engineering',
'State': 'California'
}, {
'ID': 50,
'First_Name': 'Dallas',
'Last_Name': 'Lou',
'Position': 'Shipping Assistant',
'Address': '1 Bunker Hill',
'City': 'Los Angeles',
'Email': 'dallas@dx-email.com',
'Skype': 'dallas_DX_skype',
'Phone': '2135558357',
'Birth_Date': '1994-08-19T00:00:00',
'Hire_Date': '2012-06-18T00:00:00',
'Department': 'Shipping',
'State': 'California'
}, {
'ID': 51,
'First_Name': 'Stu',
'Last_Name': 'Pizaro',
'Position': 'Engineer',
'Address': '200 N. Spring St',
'City': 'Los Angeles',
'Email': 'stu@dx-email.com',
'Skype': 'stu_DX_skype',
'Phone': '2135552552',
'Birth_Date': '1985-09-11T00:00:00',
'Hire_Date': '2011-07-19T00:00:00',
'Department': 'Engineering',
'State': 'California'
}];
To display the JavaScript CardView Column Chooser, click the column chooser icon in the JavaScript CardView toolbar. You can specify the column chooser's position with the columnChooser.position property.
If the column chooser contains multiple hidden columns, assign true to the search.enabled property to enable DevExtreme’s field search UI.
In this demo, use the checkboxes above the JavaScript CardView to toggle search and selection features.
To hide a field programmatically, change the columns[].visible property to false.