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
$(() => {
$('#card-view').dxCardView({
dataSource: employees,
keyExpr: 'id',
cardsPerRow: 'auto',
cardMinWidth: 350,
height: 840,
cardCover: {
imageExpr: ({ picture }) => picture,
altExpr: ({ fullName }) => `Photo of ${fullName}`,
},
editing: {
allowAdding: true,
allowUpdating: true,
allowDeleting: true,
popup: {
title: 'Employee Info',
showTitle: true,
width: 700,
height: 525,
},
form: {
items: [
{
caption: 'Personal Data',
itemType: 'group',
colCount: 2,
colSpan: 2,
items: ['firstName', 'lastName', 'birthDate', 'picture'],
}, {
caption: 'Main Info',
itemType: 'group',
colCount: 2,
colSpan: 2,
items: ['hireDate', 'title', 'department', {
dataField: 'notes',
editorType: 'dxTextArea',
colSpan: 2,
editorOptions: {
height: 100,
},
}],
}, {
caption: 'Contacts',
itemType: 'group',
colCount: 2,
colSpan: 2,
items: [
{
dataField: 'address',
colSpan: 2,
}, 'city', 'zipcode', 'mobilePhone', 'email',
],
},
],
},
},
searchPanel: {
visible: true,
},
columns: [
{
caption: 'Full Name',
calculateFieldValue({firstName, lastName}) {
return `${firstName} ${lastName}`;
},
},
{
dataField: 'birthDate',
dataType: 'date',
},
{
dataField: 'hireDate',
dataType: 'date',
},
{
caption: 'Position',
dataField: 'title',
},
'department',
'address',
'mobilePhone',
'email',
{
dataField: 'notes',
visible: false,
},
{
dataField: 'firstName',
visible: false,
},
{
dataField: 'lastName',
visible: false,
},
{
dataField: 'city',
visible: false,
},
{
dataField: 'zipcode',
visible: false,
},
{
dataField: 'picture',
visible: false,
},
],
});
});
<!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 employees = [{
"id": 3,
"firstName": "Arthur",
"lastName": "Miller",
"fullName": "Arthur Miller",
"prefix": "Mr.",
"title": "CTO",
"address": "3800 Homer St.",
"city": "Los Angeles",
"stateID": 5,
"zipcode": 90031,
"email": "arthurm@dx-email.com",
"skype": "arthurm_DX_skype",
"mobilePhone": "+1 (310) 555-8583",
"homePhone": "3105556542",
"birthDate": "1972-07-11T00:00:00",
"hireDate": "2007-12-18T00:00:00",
"departmentID": 6,
"department": "Management",
"status": "Salaried",
"notes": "Arthur has been a prominent figure in the AV industry for decades. His love for technology is unmatched.\r\n\r\nIn his free time, Arthur races cars and jumps out of airplanes (with a parachute).",
"pictureName": "Arthur Miller.jpg",
"picture": "../../../../images/employees/new/Arthur Miller.jpg"
},
{
"id": 4,
"firstName": "Robert",
"lastName": "Reagan",
"fullName": "Robert Reagan",
"prefix": "Mr.",
"title": "CMO",
"address": "4 Westmoreland Pl.",
"city": "Pasadena",
"stateID": 5,
"zipcode": 91103,
"email": "robertr@dx-email.com",
"skype": "robertr_DX_skype",
"mobilePhone": "+1 (818) 555-2387",
"homePhone": "8185552438",
"birthDate": "1974-09-07T00:00:00",
"hireDate": "2002-11-08T00:00:00",
"departmentID": 6,
"department": "Management",
"status": "Salaried",
"notes": "Robert was recently voted the CMO of the year by CMO Magazine. He is a proud member of the DevAV Management Team.\r\n\r\nRobert is a championship BBQ chef, so when you get the chance ask him for his secret recipe.",
"pictureName": "Robert Reagan.jpg",
"picture": "../../../../images/employees/new/Robert Reagan.jpg"
},
{
"id": 5,
"firstName": "Greta",
"lastName": "Sims",
"fullName": "Greta Sims",
"prefix": "Ms.",
"title": "HR Manager",
"address": "1700 S Grandview Dr.",
"city": "Alhambra",
"stateID": 5,
"zipcode": 91803,
"email": "gretas@dx-email.com",
"skype": "gretas_DX_skype",
"mobilePhone": "+1 (818) 555-6546",
"homePhone": "8185550976",
"birthDate": "1977-11-22T00:00:00",
"hireDate": "1998-04-23T00:00:00",
"departmentID": 5,
"department": "Human Resources",
"status": "Salaried",
"notes": "Greta has been DevAV's HR Manager since 2003. She joined DevAV from Sonee Corp.\r\n\r\nGreta is currently training for the NYC marathon. Her best marathon time is 4 hours. Go Greta.",
"pictureName": "Greta Sims.jpg",
"picture": "../../../../images/employees/new/Greta Sims.jpg"
},
{
"id": 6,
"firstName": "Brett",
"lastName": "Wade",
"fullName": "Brett Wade",
"prefix": "Mr.",
"title": "IT Manager",
"address": "1120 Old Mill Rd.",
"city": "San Marino",
"stateID": 5,
"zipcode": 91108,
"email": "brettw@dx-email.com",
"skype": "brettw_DX_skype",
"mobilePhone": "+1 (626) 555-0358",
"homePhone": "6265555985",
"birthDate": "1968-12-01T00:00:00",
"hireDate": "2009-03-06T00:00:00",
"departmentID": 7,
"department": "IT",
"status": "Salaried",
"notes": "Brett came to DevAv from Microsoft and has led our IT department since 2012.\r\n\r\nWhen he is not working hard for DevAV, he coaches Little League (he was a high school pitcher).",
"pictureName": "Brett Wade.jpg",
"picture": "../../../../images/employees/new/Brett Wade.jpg"
},
{
"id": 7,
"firstName": "Sandra",
"lastName": "Johnson",
"fullName": "Sandra Johnson",
"prefix": "Mrs.",
"title": "Controller",
"address": "4600 N Virginia Rd.",
"city": "Long Beach",
"stateID": 5,
"zipcode": 90807,
"email": "sandraj@dx-email.com",
"skype": "sandraj_DX_skype",
"mobilePhone": "+1 (562) 555-2082",
"homePhone": "5625558272",
"birthDate": "1974-11-15T00:00:00",
"hireDate": "2005-05-11T00:00:00",
"departmentID": 5,
"department": "Human Resources",
"status": "Salaried",
"notes": "Sandra is a CPA and has been our controller since 2008. She loves to interact with staff so if you've not met her, be certain to say hi.\r\n\r\nSandra has 2 daughters both of whom are accomplished gymnasts.",
"pictureName": "Sandra Johnson.jpg",
"picture": "../../../../images/employees/new/Sandra Johnson.jpg"
},
{
"id": 8,
"firstName": "Edward",
"lastName": "Holmes",
"fullName": "Ed Holmes",
"prefix": "Dr.",
"title": "Sales Manager",
"address": "23200 Pacific Coast Hwy",
"city": "Malibu",
"stateID": 5,
"zipcode": 90265,
"email": "edwardh@dx-email.com",
"skype": "edwardh_DX_skype",
"mobilePhone": "+1 (310) 555-1288",
"homePhone": "3105556098",
"birthDate": "1973-07-14T00:00:00",
"hireDate": "2005-06-19T00:00:00",
"departmentID": 1,
"department": "Sales",
"status": "Salaried",
"notes": "As Ed likes to say, he can sell ice to eskimos. He has been selling AV products his entire life. He was promoted to Sales Manager in 2011.\r\n\r\nEd's 2 boys are on the high school football team (Go Malibu High!)",
"pictureName": "Ed Holmes.jpg",
"picture": "../../../../images/employees/new/Ed Holmes.jpg"
},
{
"id": 9,
"firstName": "Barbara",
"lastName": "Banks",
"fullName": "Barb Banks",
"prefix": "Mrs.",
"title": "Support Manager",
"address": "17985 Pacific Coast Hwy",
"city": "Pacific Palisades",
"stateID": 5,
"zipcode": 90272,
"email": "barbarab@dx-email.com",
"skype": "barbarab_DX_skype",
"mobilePhone": "+1 (310) 555-3355",
"homePhone": "3105559792",
"birthDate": "1979-04-14T00:00:00",
"hireDate": "2002-08-07T00:00:00",
"departmentID": 2,
"department": "Support",
"status": "Salaried",
"notes": "Barb has been DevAV's support manager for nearly 3 years. You can usually find her behind her desk working hard to solve customer problems.\r\n\r\nIn her spare time, Barb loves to play chess and checkers.",
"pictureName": "Barb Banks.jpg",
"picture": "../../../../images/employees/new/Barb Banks.jpg"
},
{
"id": 10,
"firstName": "Kevin",
"lastName": "Carter",
"fullName": "Kevin Carter",
"prefix": "Mr.",
"title": "Shipping Manager",
"address": "424 N Main St.",
"city": "Los Angeles",
"stateID": 5,
"zipcode": 90012,
"email": "kevinc@dx-email.com",
"skype": "kevinc_DX_skype",
"mobilePhone": "+1 (213) 555-2840",
"homePhone": "2135558038",
"birthDate": "1978-01-09T00:00:00",
"hireDate": "2009-08-11T00:00:00",
"departmentID": 3,
"department": "Shipping",
"status": "Salaried",
"notes": "Kevin is our hard-working shipping manager and has been helping that department work like clockwork for 18 months.\r\n\r\nWhen not in the office, he is usually on the basketball court playing pick-up games.",
"pictureName": "Kevin Carter.jpg",
"picture": "../../../../images/employees/new/Kevin Carter.jpg"
},
{
"id": 11,
"firstName": "Cynthia",
"lastName": "Stanwick",
"fullName": "Cindy Stanwick",
"prefix": "Ms.",
"title": "HR Assistant",
"address": "2211 Bonita Dr.",
"city": "Glendale",
"stateID": 5,
"zipcode": 91208,
"email": "cindys@dx-email.com",
"skype": "cindys_DX_skype",
"mobilePhone": "+1 (818) 555-6655",
"homePhone": "8185550828",
"birthDate": "1985-06-05T00:00:00",
"hireDate": "2008-03-24T00:00:00",
"departmentID": 5,
"department": "Human Resources",
"status": "Salaried",
"notes": "Cindy joined us in 2008 and has been in the HR department for 2 years. \r\n\r\nShe was recently awarded employee of the month. Way to go Cindy!",
"pictureName": "Cindy Stanwick.jpg",
"picture": "../../../../images/employees/new/Cindy Stanwick.jpg"
},
{
"id": 12,
"firstName": "Sam",
"lastName": "Hill",
"fullName": "Sammy Hill",
"prefix": "Mr.",
"title": "Sales Assistant",
"address": "645 Prospect Crescent",
"city": "Pasadena",
"stateID": 5,
"zipcode": 91103,
"email": "sammyh@dx-email.com",
"skype": "sammyh_DX_skype",
"mobilePhone": "+1 (626) 555-7292",
"homePhone": "6265543168",
"birthDate": "1984-02-17T00:00:00",
"hireDate": "2012-02-01T00:00:00",
"departmentID": 1,
"department": "Sales",
"status": "Salaried",
"notes": "Sammy is proud to be a member of the DevAV team. He joined the team in 2012 and has been in the sales department from the beginning.\r\n\r\nHe has just picked up golf so you can find him on the links every weekend.",
"pictureName": "Sammy Hill.jpg",
"picture": "../../../../images/employees/new/Sammy Hill.jpg"
},
{
"id": 13,
"firstName": "David",
"lastName": "Jones",
"fullName": "Davey Jones",
"prefix": "Mr.",
"title": "Shipping Assistant",
"address": "391 S Orange Grove Blvd.",
"city": "Pasadena",
"stateID": 5,
"zipcode": 91184,
"email": "davidj@dx-email.com",
"skype": "davidj_DX_skype",
"mobilePhone": "+1 (626) 555-0281",
"homePhone": "6265554422",
"birthDate": "1983-03-06T00:00:00",
"hireDate": "2011-04-24T00:00:00",
"departmentID": 3,
"department": "Shipping",
"status": "Salaried",
"notes": "Davey Jones - yes, he was named after the singer. Though he does not sing, he does do a great job in the shipping department.\r\n\r\nHe is a DJ in his spare time, so if you are having a party, make sure to inquire about his services.",
"pictureName": "Davey Jones.jpg",
"picture": "../../../../images/employees/new/Davey Jones.jpg"
},
{
"id": 14,
"firstName": "Victor",
"lastName": "Norris",
"fullName": "Victor Norris",
"prefix": "Mr.",
"title": "Shipping Assistant",
"address": "811 West 7th St.",
"city": "Los Angeles",
"stateID": 5,
"zipcode": 90017,
"email": "victorn@dx-email.com",
"skype": "victorn_DX_skype",
"mobilePhone": "+1 (213) 555-9278",
"homePhone": "2135552827",
"birthDate": "1986-07-23T00:00:00",
"hireDate": "2012-07-23T00:00:00",
"departmentID": 3,
"department": "Shipping",
"status": "Salaried",
"notes": "Victor Norris came to us directly from College where he was a sum cum laude.\r\n\r\nHe loves chemistry and is working on converting lead into gold. Good luck Victor.",
"pictureName": "Victor Norris.jpg",
"picture": "../../../../images/employees/new/Victor Norris.jpg"
},
{
"id": 15,
"firstName": "Mary",
"lastName": "Stern",
"fullName": "Mary Stern",
"prefix": "Ms.",
"title": "Shipping Assistant",
"address": "113 N Cedar St.",
"city": "Glendale",
"stateID": 5,
"zipcode": 91206,
"email": "marys@dx-email.com",
"skype": "marys_DX_skype",
"mobilePhone": "+1 (818) 555-7857",
"homePhone": "8185558375",
"birthDate": "1982-04-08T00:00:00",
"hireDate": "2012-08-12T00:00:00",
"departmentID": 3,
"department": "Shipping",
"status": "Salaried",
"notes": "Mary works with DevAV on a part-time basis. The rest of her day is spent raising her newborn. \r\n\r\nMary was a champion swimmer in high school and qualified for the Olympics.",
"pictureName": "Mary Stern.jpg",
"picture": "../../../../images/employees/new/Mary Stern.jpg"
},
{
"id": 16,
"firstName": "Robin",
"lastName": "Cosworth",
"fullName": "Robin Cosworth",
"prefix": "Mrs.",
"title": "Shipping Assistant",
"address": "501 N Main St.",
"city": "Los Angeles",
"stateID": 5,
"zipcode": 90012,
"email": "robinc@dx-email.com",
"skype": "robinc_DX_skype",
"mobilePhone": "+1 (818) 555-0942",
"homePhone": "8185559266",
"birthDate": "1981-06-12T00:00:00",
"hireDate": "2012-09-01T00:00:00",
"departmentID": 3,
"department": "Shipping",
"status": "Salaried",
"notes": "Robin Cosworth is another new hire for DevAV's shipping department.\r\n\r\nRobin was voted most likely to succeed in high school. If you meet her, you'll know why…one of the smartest people around.",
"pictureName": "Robin Cosworth.jpg",
"picture": "../../../../images/employees/new/Robin Cosworth.jpg"
},
{
"id": 17,
"firstName": "Kelly",
"lastName": "Rodriguez",
"fullName": "Kelly Rodriguez",
"prefix": "Ms.",
"title": "Support Assistant",
"address": "1601 W Mountain St.",
"city": "Glendale",
"stateID": 5,
"zipcode": 91201,
"email": "kellyr@dx-email.com",
"skype": "kellyr_DX_skype",
"mobilePhone": "+1 (818) 555-9248",
"homePhone": "8185559792",
"birthDate": "1988-05-11T00:00:00",
"hireDate": "2012-10-13T00:00:00",
"departmentID": 2,
"department": "Support",
"status": "Salaried",
"notes": "Kelly loves people and that's why she joined DevAV's support department. One of the funniest people in the company, she does stand-up on the weekends at the Laugh Factory.",
"pictureName": "Kelly Rodriguez.jpg",
"picture": "../../../../images/employees/new/Kelly Rodriguez.jpg"
},
{
"id": 18,
"firstName": "James",
"lastName": "Anderson",
"fullName": "James Anderson",
"prefix": "Mr.",
"title": "Support Assistant",
"address": "4800 Hollywood Blvd",
"city": "Los Angeles",
"stateID": 5,
"zipcode": 90027,
"email": "jamesa@dx-email.com",
"skype": "jamesa_DX_skype",
"mobilePhone": "+1 (323) 555-4702",
"homePhone": "3235552087",
"birthDate": "1987-01-29T00:00:00",
"hireDate": "2012-10-18T00:00:00",
"departmentID": 2,
"department": "Support",
"status": "Salaried",
"notes": "James joined DevAV in 2012 and has been helping our customers ever since.\r\n\r\nIn his free time, he loves to build websites and watch college basketball games.",
"pictureName": "James Anderson.jpg",
"picture": "../../../../images/employees/new/James Anderson.jpg"
},
{
"id": 19,
"firstName": "Anthony",
"lastName": "Remmen",
"fullName": "Antony Remmen",
"prefix": "Mr.",
"title": "Support Assistant",
"address": "1542 S Beacon St",
"city": "San Pedro",
"stateID": 5,
"zipcode": 90731,
"email": "anthonyr@dx-email.com",
"skype": "anthonyr_DX_skype",
"mobilePhone": "+1 (310) 555-6625",
"homePhone": "3105550009",
"birthDate": "1986-02-19T00:00:00",
"hireDate": "2013-01-19T00:00:00",
"departmentID": 2,
"department": "Support",
"status": "Salaried",
"notes": "Anthony is shy and did not want to share any personal information for his profile. \r\n\r\nHe is a proud member of our support team so do talk to him when you get the chance. Let's get him to open up.",
"pictureName": "Antony Remmen.jpg",
"picture": "../../../../images/employees/new/Antony Remmen.jpg"
},
{
"id": 20,
"firstName": "Olivia",
"lastName": "Peyton",
"fullName": "Olivia Peyton",
"prefix": "Mrs.",
"title": "Sales Assistant",
"address": "807 W Paseo Del Mar",
"city": "San Pedro",
"stateID": 5,
"zipcode": 90731,
"email": "oliviap@dx-email.com",
"skype": "oliviap_DX_skype",
"mobilePhone": "+1 (310) 555-2728",
"homePhone": "3105558247",
"birthDate": "1981-06-03T00:00:00",
"hireDate": "2012-05-14T00:00:00",
"departmentID": 1,
"department": "Sales",
"status": "Salaried",
"notes": "Olivia loves to sell. She has been selling DevAV products since 2012. \r\n\r\nOlivia was homecoming queen in high school. She is expecting her first child in 6 months. Good Luck Olivia.",
"pictureName": "Olivia Peyton.jpg",
"picture": "../../../../images/employees/new/Olivia Peyton.jpg"
},
{
"id": 21,
"firstName": "Taylor",
"lastName": "Riley",
"fullName": "Taylor Riley",
"prefix": "Mr.",
"title": "Network Admin",
"address": "7776 Torreyson Dr",
"city": "West Hollywood",
"stateID": 5,
"zipcode": 90046,
"email": "taylorr@dx-email.com",
"skype": "taylorr_DX_skype",
"mobilePhone": "+1 (310) 555-7276",
"homePhone": "3105552134",
"birthDate": "1982-08-14T00:00:00",
"hireDate": "2012-04-14T00:00:00",
"departmentID": 7,
"department": "IT",
"status": "Salaried",
"notes": "If you are like the rest of us at DevAV, then you've probably reached out for help from Taylor. He does a great job as a member of our IT department.",
"pictureName": "Taylor Riley.jpg",
"picture": "../../../../images/employees/new/Taylor Riley.jpg"
},
{
"id": 22,
"firstName": "Amelia",
"lastName": "Harper",
"fullName": "Amelia Harper",
"prefix": "Mrs.",
"title": "Network Admin",
"address": "527 W 7th St",
"city": "Los Angeles",
"stateID": 5,
"zipcode": 90014,
"email": "ameliah@dx-email.com",
"skype": "ameliah_DX_skype",
"mobilePhone": "+1 (213) 555-4276",
"homePhone": "2135553792",
"birthDate": "1983-11-19T00:00:00",
"hireDate": "2011-02-10T00:00:00",
"departmentID": 7,
"department": "IT",
"status": "Salaried",
"notes": "Amelia (like Taylor) is a member of our hard-working network admin team. She loves to help so don’t hesistate to ask her for assistance.\r\n\r\nIn her spare time, Amelia coaches young tennis players at the park.",
"pictureName": "Amelia Harper.jpg",
"picture": "../../../../images/employees/new/new/Amelia Harper.jpg"
},
{
"id": 23,
"firstName": "Walter",
"lastName": "Hobbs",
"fullName": "Wally Hobbs",
"prefix": "Mr.",
"title": "Programmer",
"address": "10385 Shadow Oak Dr",
"city": "Chatsworth",
"stateID": 5,
"zipcode": 91311,
"email": "wallyh@dx-email.com",
"skype": "wallyh_DX_skype",
"mobilePhone": "+1 (818) 555-8872",
"homePhone": "8185552478",
"birthDate": "1984-12-24T00:00:00",
"hireDate": "2011-02-17T00:00:00",
"departmentID": 7,
"department": "IT",
"status": "Salaried",
"notes": "Walter has been developing apps and websites for DevAV since 2011. His passion is software and if you ever walk by his desk, you'll know why.\r\n\r\nWally once worked 72 hours straight - writing code and fixing bugs.",
"pictureName": "Wally Hobbs.jpg",
"picture": "../../../../images/employees/new/Wally Hobbs.jpg"
},
{
"id": 24,
"firstName": "Bradley",
"lastName": "Jameson",
"fullName": "Brad Jameson",
"prefix": "Mr.",
"title": "Programmer",
"address": "1100 Pico St",
"city": "San Fernando",
"stateID": 5,
"zipcode": 91340,
"email": "bradleyj@dx-email.com",
"skype": "bradleyj_DX_skype",
"mobilePhone": "+1 (818) 555-4646",
"homePhone": "8185559098",
"birthDate": "1988-10-12T00:00:00",
"hireDate": "2011-03-02T00:00:00",
"departmentID": 7,
"department": "IT",
"status": "Salaried",
"notes": "Brad works with Walter and together, they are a 1-2 punch unlike any other. \r\n\r\nHe once ran a marathon and then realized that running is not something he should ever do again.",
"pictureName": "Brad Jameson.jpg",
"picture": "../../../../images/employees/new/Brad Jameson.jpg"
},
{
"id": 25,
"firstName": "Karen",
"lastName": "Goodson",
"fullName": "Karen Goodson",
"prefix": "Miss",
"title": "Programmer",
"address": "309 Monterey Rd",
"city": "South Pasadena",
"stateID": 5,
"zipcode": 91030,
"email": "kareng@dx-email.com",
"skype": "kareng_DX_skype",
"mobilePhone": "+1 (626) 555-0908",
"homePhone": "6265550822",
"birthDate": "1987-04-26T00:00:00",
"hireDate": "2011-03-14T00:00:00",
"departmentID": 7,
"department": "IT",
"status": "Salaried",
"notes": "Karen likes to remind everyone that she is not grumpy…she just has a lot of work to do.\r\n\r\nA part of DevAV's programmer team, she likes to surf during the weekends.",
"pictureName": "Karen Goodson.jpg",
"picture": "../../../../images/employees/new/Karen Goodson.jpg"
},
{
"id": 26,
"firstName": "Marcus",
"lastName": "Orbison",
"fullName": "Marcus Orbison",
"prefix": "Mr.",
"title": "Travel Coordinator",
"address": "501 N Main St",
"city": "Los Angeles",
"stateID": 5,
"zipcode": 90012,
"email": "marcuso@dx-email.com",
"skype": "marcuso_DX_skype",
"mobilePhone": "+1 (213) 555-7098",
"homePhone": "2135552608",
"birthDate": "1982-03-02T00:00:00",
"hireDate": "2005-05-19T00:00:00",
"departmentID": 5,
"department": "Human Resources",
"status": "Salaried",
"notes": "Marcus is our travel coordinator and spends most of his work day trying to save DevAV money on travel costs.\r\n\r\nHe recommends that everyone sign up for a frequent flier account and rack up those miles.",
"pictureName": "Marcus Orbison.jpg",
"picture": "../../../../images/employees/new/Marcus Orbison.jpg"
},
{
"id": 27,
"firstName": "Sandra",
"lastName": "Bright",
"fullName": "Sandy Bright",
"prefix": "Ms.",
"title": "Benefits Coordinator",
"address": "7570 McGroarty Ter",
"city": "Tujunga",
"stateID": 5,
"zipcode": 91042,
"email": "sandrab@dx-email.com",
"skype": "sandrab_DX_skype",
"mobilePhone": "+1 (818) 555-0524",
"homePhone": "8185555072",
"birthDate": "1983-09-11T00:00:00",
"hireDate": "2005-06-04T00:00:00",
"departmentID": 5,
"department": "Human Resources",
"status": "Salaried",
"notes": "Sandy is here to answer any of your benefits related questions. She works directly with DevAV's HR manager so let her know what you need.\r\n\r\nSandy's daughter recently won a spelling bee. Congrats to you and your daughter Sandy.",
"pictureName": "Sandy Bright.jpg",
"picture": "../../../../images/employees/new/Sandy Bright.jpg"
},
{
"id": 28,
"firstName": "Morgan",
"lastName": "Kennedy",
"fullName": "Morgan Kennedy",
"prefix": "Mrs.",
"title": "Graphic Designer",
"address": "11222 Dilling St",
"city": "San Fernando Valley",
"stateID": 5,
"zipcode": 91604,
"email": "morgank@dx-email.com",
"skype": "morgank_DX_skype",
"mobilePhone": "+1 (818) 555-8238",
"homePhone": "8185553973",
"birthDate": "1984-07-17T00:00:00",
"hireDate": "2012-01-11T00:00:00",
"departmentID": 7,
"department": "IT",
"status": "Salaried",
"notes": "Morgan is our graphic designer and we are so lucky to have such a dedicated person on our team.\r\n\r\nMorgan designs wedding invitations on her spare time. Her portfolio is amazing.",
"pictureName": "Morgan Kennedy.jpg",
"picture": "../../../../images/employees/new/Morgan Kennedy.jpg"
},
{
"id": 29,
"firstName": "Violet",
"lastName": "Bailey",
"fullName": "Violet Bailey",
"prefix": "Ms.",
"title": "Jr Graphic Designer",
"address": "1418 Descanso Dr",
"city": "La Canada",
"stateID": 5,
"zipcode": 91011,
"email": "violetb@dx-email.com",
"skype": "violetb_DX_skype",
"mobilePhone": "+1 (818) 555-2478",
"homePhone": "8185553085",
"birthDate": "1985-06-10T00:00:00",
"hireDate": "2012-01-19T00:00:00",
"departmentID": 7,
"department": "IT",
"status": "Salaried",
"notes": "Violet joined us after graduating from the Art Institute as a jr designer.\r\n\r\nViolet's favorte painter is Picasso. Ask her to tell you why she loves Picasso.",
"pictureName": "Violet Bailey.jpg",
"picture": "../../../../images/employees/new/Violet Bailey.jpg"
},
{
"id": 30,
"firstName": "Kent",
"lastName": "Samuelson",
"fullName": "Ken Samuelson",
"prefix": "Dr.",
"title": "Ombudsman",
"address": "12100 Mora Dr",
"city": "Santa Fe Springs",
"stateID": 5,
"zipcode": 90670,
"email": "kents@dx-email.com",
"skype": "kents_DX_skype",
"mobilePhone": "+1 (562) 555-9282",
"homePhone": "5625559248",
"birthDate": "1972-09-11T00:00:00",
"hireDate": "2009-04-22T00:00:00",
"departmentID": 5,
"department": "Human Resources",
"status": "Salaried",
"notes": "As our ombudsman, Kent is on the front-lines solving customer problems and helping our partners address issues out in the field.\r\n\r\nHe is a classically trained musician and is a member of the Chamber Orchestra.",
"pictureName": "Ken Samuelson.jpg",
"picture": "../../../../images/employees/new/Ken Samuelson.jpg"
},
{
"id": 31,
"firstName": "Natalie",
"lastName": "Maguirre",
"fullName": "Nat Maguiree",
"prefix": "Mrs.",
"title": "Trainer",
"address": "6400 E Bixby Hill Rd",
"city": "Long Beach",
"stateID": 5,
"zipcode": 90815,
"email": "nataliem@dx-email.com",
"skype": "nataliem_DX_skype",
"mobilePhone": "+1 (562) 555-8377",
"homePhone": "5625552829",
"birthDate": "1977-10-07T00:00:00",
"hireDate": "2008-06-19T00:00:00",
"departmentID": 2,
"department": "Support",
"status": "Salaried",
"notes": "Natalie travels the US and teaches our partners how to explain the benefits of our products to customers.\r\n\r\nShe is a proud wife and mom and volunteers her time at the elementary school.",
"pictureName": "Nat Maguiree.jpg",
"picture": "../../../../images/employees/new/Nat Maguiree.jpg"
},
{
"id": 32,
"firstName": "Bart",
"lastName": "Arnaz",
"fullName": "Bart Arnaz",
"prefix": "Mr.",
"title": "Director of Engineering",
"address": "13109 Old Myford Rd",
"city": "Irvine",
"stateID": 5,
"zipcode": 92602,
"email": "barta@dx-email.com",
"skype": "barta_DX_skype",
"mobilePhone": "+1 (714) 555-2000",
"homePhone": "7145556629",
"birthDate": "1979-11-01T00:00:00",
"hireDate": "2008-06-29T00:00:00",
"departmentID": 4,
"department": "Engineering",
"status": "Salaried",
"notes": "Without Bart, we'd have no products to sell. As Director of Engineering, he is responsible for so much of what we do.\r\n\r\nBart is a father of 2 little girls and hopes one day that they'll play professional ice hockey.",
"pictureName": "Bart Arnaz.jpg",
"picture": "../../../../images/employees/new/Bart Arnaz.jpg"
},
{
"id": 33,
"firstName": "Leah",
"lastName": "Simpson",
"fullName": "Leah Simpson",
"prefix": "Mrs.",
"title": "Test Coordinator",
"address": "6755 Newlin Ave",
"city": "Whittier",
"stateID": 5,
"zipcode": 90601,
"email": "leahs@dx-email.com",
"skype": "leahs_DX_skype",
"mobilePhone": "+1 (562) 559-5830",
"homePhone": "5625557372",
"birthDate": "1983-04-19T00:00:00",
"hireDate": "2009-02-14T00:00:00",
"departmentID": 4,
"department": "Engineering",
"status": "Salaried",
"notes": "Leah is DevAV's test coordinator and is focused on helping our company deliver rock-solid AV products.\r\n\r\nLeah set a record in high school for the fastest 100m sprint for 11th graders. Amazing!",
"pictureName": "Leah Simpson.jpg",
"picture": "../../../../images/employees/new/Leah Simpson.jpg"
},
{
"id": 34,
"firstName": "Arnold",
"lastName": "Schwartz",
"fullName": "Arnie Schwartz",
"prefix": "Mr.",
"title": "Engineer",
"address": "125 W Elm St",
"city": "Brea",
"stateID": 5,
"zipcode": 92821,
"email": "arnolds@dx-email.com",
"skype": "arnolds_DX_skype",
"mobilePhone": "+1 (714) 555-8882",
"homePhone": "7145551834",
"birthDate": "1985-02-28T00:00:00",
"hireDate": "2009-02-19T00:00:00",
"departmentID": 4,
"department": "Engineering",
"status": "Salaried",
"notes": "Arnold works with Bart and is responsible for some of our best selling AV products.\r\n\r\nArnold's oldest son has hopes of joining DevAV when he grows up. We'd love to have him on-board someday!",
"pictureName": "Arnie Schwartz.jpg",
"picture": "../../../../images/employees/new/Arnie Schwartz.jpg"
},
{
"id": 35,
"firstName": "William",
"lastName": "Zimmer",
"fullName": "Billy Zimmer",
"prefix": "Mr.",
"title": "Engineer",
"address": "1325 Prospect Dr",
"city": "Redlands",
"stateID": 5,
"zipcode": 92373,
"email": "williamz@dx-email.com",
"skype": "william_DX_skype",
"mobilePhone": "+1 (909) 555-6939",
"homePhone": "9095558268",
"birthDate": "1986-06-16T00:00:00",
"hireDate": "2009-01-15T00:00:00",
"departmentID": 4,
"department": "Engineering",
"status": "Salaried",
"notes": "Billy graduated from CalTech and so he is a smart cookie. If you ever talk to him, ask him about his GPA.\r\n\r\nBilly says his only hobby is reading engineering books. Come'on Billy have some fun!",
"pictureName": "Billy Zimmer.jpg",
"picture": "../../../../images/employees/new/Billy Zimmer.jpg"
},
{
"id": 36,
"firstName": "Samantha",
"lastName": "Piper",
"fullName": "Samantha Piper",
"prefix": "Ms.",
"title": "Engineer",
"address": "200 E Ave 43",
"city": "Los Angeles",
"stateID": 5,
"zipcode": 90031,
"email": "samanthap@dx-email.com",
"skype": "samanthap_DX_skype",
"mobilePhone": "+1 (323) 555-4512",
"homePhone": "3235558338",
"birthDate": "1984-12-01T00:00:00",
"hireDate": "2008-01-22T00:00:00",
"departmentID": 4,
"department": "Engineering",
"status": "Salaried",
"notes": "Samantha Piper has been selected Employee of the Year 7 times. The reasons are many, but perhaps most important, she works on some of the best products on the planet.",
"pictureName": "Samantha Piper.jpg",
"picture": "../../../../images/employees/new/Samantha Piper.jpg"
},
{
"id": 37,
"firstName": "Margaret",
"lastName": "Boxter",
"fullName": "Maggie Boxter",
"prefix": "Mrs.",
"title": "Engineer",
"address": "3101 W Harvard St",
"city": "Santa Ana",
"stateID": 5,
"zipcode": 92704,
"email": "margaretb@dx-email.com",
"skype": "margaretb_DX_skype",
"mobilePhone": "+1 (714) 555-7239",
"homePhone": "7145550827",
"birthDate": "1987-11-22T00:00:00",
"hireDate": "2009-03-01T00:00:00",
"departmentID": 4,
"department": "Engineering",
"status": "Salaried",
"notes": "Maggie is an MIT graduate and has been with DevAV since 2009. \r\n\r\nIn her spare time, Maggie loves to experiment for home automation systems.",
"pictureName": "Maggie Boxter.jpg",
"picture": "../../../../images/employees/new/Maggie Boxter.jpg"
},
{
"id": 38,
"firstName": "Terry",
"lastName": "Bradley",
"fullName": "Terry Bradley",
"prefix": "Mr.",
"title": "QA Engineer",
"address": "4595 Cochran St",
"city": "Simi Valley",
"stateID": 5,
"zipcode": 93063,
"email": "terryb@dx-email.com",
"skype": "terryb_DX_skype",
"mobilePhone": "+1 (805) 555-2788",
"homePhone": "8055551882",
"birthDate": "1984-01-09T00:00:00",
"hireDate": "2007-10-18T00:00:00",
"departmentID": 4,
"department": "Engineering",
"status": "Salaried",
"notes": "Quality is everything and we are lucky to have Terry in our QA team. He is an extremely hard working individual and loves work almost as much as he loves eating.",
"pictureName": "Terry Bradley.jpg",
"picture": "../../../../images/employees/new/Terry Bradley.jpg"
},
{
"id": 39,
"firstName": "Gabriel",
"lastName": "Jones",
"fullName": "Gabe Jones",
"prefix": "Mr.",
"title": "Retail Coordinator",
"address": "1008 Elden Way",
"city": "Beverly Hills",
"stateID": 5,
"zipcode": 90210,
"email": "gabrielj@dx-email.com",
"skype": "gabrielj_DX_skype",
"mobilePhone": "+1 (310) 555-5395",
"homePhone": "3105558372",
"birthDate": "1987-12-29T00:00:00",
"hireDate": "2005-08-14T00:00:00",
"departmentID": 2,
"department": "Support",
"status": "Salaried",
"notes": "Gabriel has been in retail sales for a very long time and can give you lots of ideas on how to save money when buying products at retail stores.\r\n\r\nGabe is a proud father and a dedicated husband.",
"pictureName": "Gabe Jones.jpg",
"picture": "../../../../images/employees/new/Gabe Jones.jpg"
},
{
"id": 40,
"firstName": "Lucy",
"lastName": "Ball",
"fullName": "Lucy Ball",
"prefix": "Ms.",
"title": "Sales Assistant",
"address": "203 Chautauqua Blvd",
"city": "Pacific Palisades",
"stateID": 5,
"zipcode": 90272,
"email": "lucyb@dx-email.com",
"skype": "lucyb_DX_skype",
"mobilePhone": "+1 (310) 555-3357",
"homePhone": "3105552426",
"birthDate": "1986-08-09T00:00:00",
"hireDate": "2006-07-19T00:00:00",
"departmentID": 1,
"department": "Sales",
"status": "Salaried",
"notes": "Lucy Ball is not just a sales assistant…She IS the ultimate sales assistant.\r\n\r\nIn her spare time, Lucy loves to act and has hopes of having her own sitcom someday.",
"pictureName": "Lucy Ball.jpg",
"picture": "../../../../images/employees/new/Lucy Ball.jpg"
},
{
"id": 41,
"firstName": "James",
"lastName": "Packard",
"fullName": "Jim Packard",
"prefix": "Mr.",
"title": "Retail Sales Manager",
"address": "3801 Chester Ave",
"city": "Bakersfield",
"stateID": 5,
"zipcode": 93301,
"email": "jamesp@dx-email.com",
"skype": "jamesp_DX_skype",
"mobilePhone": "+1 (661) 555-8224",
"homePhone": "6615557577",
"birthDate": "1985-06-22T00:00:00",
"hireDate": "2010-11-11T00:00:00",
"departmentID": 1,
"department": "Sales",
"status": "Commission",
"notes": "What would we do without Jim. As the point-person for all retail sales, he has generated more money for DevAV than any other team-member.\r\n\r\nJim used to be a shot-putter in College and almost set the national record in his senior year.",
"pictureName": "Jim Packard.jpg",
"picture": "../../../../images/employees/new/Jim Packard.jpg"
},
{
"id": 42,
"firstName": "Hannah",
"lastName": "Brooklyn",
"fullName": "Hannah Brookly",
"prefix": "Mrs.",
"title": "Online Sales Manager",
"address": "536 Marsh Street",
"city": "San Luis Obispo",
"stateID": 5,
"zipcode": 93401,
"email": "hannahb@dx-email.com",
"skype": "hannahb_DX_skype",
"mobilePhone": "+1 (805) 555-3627",
"homePhone": "8055557247",
"birthDate": "1984-07-02T00:00:00",
"hireDate": "2011-01-08T00:00:00",
"departmentID": 1,
"department": "Sales",
"status": "Commission",
"notes": "Hannah loves selling products online and if you take a look at our website, you can see how much energy she devotes to our company.\r\n\r\nWe are lucky to have you on our team. Stop working so hard!",
"pictureName": "Hannah Brookly.jpg",
"picture": "../../../../images/employees/new/Hannah Brookly.jpg"
},
{
"id": 43,
"firstName": "Harvey",
"lastName": "Mudd",
"fullName": "Harv Mudd",
"prefix": "Mr.",
"title": "Retail Sales Manager",
"address": "351 Pacific St",
"city": "Monterey",
"stateID": 5,
"zipcode": 93940,
"email": "harveym@dx-email.com",
"skype": "harveym_DX_skype",
"mobilePhone": "+1 (831) 555-3895",
"homePhone": "8315555379",
"birthDate": "1989-05-11T00:00:00",
"hireDate": "2012-03-18T00:00:00",
"departmentID": 1,
"department": "Sales",
"status": "Commission",
"notes": "Harv went to college to become a dentist but decided to switch to sales when he went to buy his first car. \r\n\r\nHarv is an avid surfer and can be seen at the beach whenver the weather allows.",
"pictureName": "Harv Mudd.jpg",
"picture": "../../../../images/employees/new/Harv Mudd.jpg"
},
{
"id": 44,
"firstName": "Clark",
"lastName": "Morgan",
"fullName": "Clark Morgan",
"prefix": "Mr.",
"title": "Retail Sales Manager",
"address": "4202 Alhambra Ave",
"city": "Martinez",
"stateID": 5,
"zipcode": 94553,
"email": "clarkm@dx-email.com",
"skype": "clarkm_DX_skype",
"mobilePhone": "+1 (925) 555-2525",
"homePhone": "9255553752",
"birthDate": "1988-04-07T00:00:00",
"hireDate": "2012-04-11T00:00:00",
"departmentID": 1,
"department": "Sales",
"status": "Commission",
"notes": "Clark says he joined DevAV because we are the best in the industry. He is excited to see what the future holds for our company. \r\n\r\nClark once ran a mile in under 4 minutes (he says he can do it in 5 minutes now).",
"pictureName": "Clark Morgan.jpg",
"picture": "../../../../images/employees/new/Clark Morgan.jpg"
},
{
"id": 45,
"firstName": "Todd",
"lastName": "Hoffman",
"fullName": "Todd Hoffman",
"prefix": "Mr.",
"title": "Retail Sales Manager",
"address": "2647 Arroyo Rd",
"city": "Livermore",
"stateID": 5,
"zipcode": 94550,
"email": "toddh@dx-email.com",
"skype": "toddh_DX_skype",
"mobilePhone": "+1 (925) 555-3579",
"homePhone": "9255554728",
"birthDate": "1987-03-25T00:00:00",
"hireDate": "2012-04-19T00:00:00",
"departmentID": 1,
"department": "Sales",
"status": "Commission",
"notes": "Todd Hoffman loves to make money and has always held commission only positions.\r\n\r\nIf you ever see Todd, ask him to tell you his fishing trip story…It's very funny.",
"pictureName": "Todd Hoffman.jpg",
"picture": "../../../../images/employees/new/Todd Hoffman.jpg"
},
{
"id": 46,
"firstName": "Jack",
"lastName": "Garmin",
"fullName": "Jackie Garmin",
"prefix": "Mr.",
"title": "Support Assistant",
"address": "807 West Paseo Del Mar",
"city": "Los Angeles",
"stateID": 5,
"zipcode": 90731,
"email": "jackg@dx-email.com",
"skype": "jackg_DX_skype",
"mobilePhone": "+1 (213) 555-1824",
"homePhone": "2135552828",
"birthDate": "1988-09-11T00:00:00",
"hireDate": "2009-03-17T00:00:00",
"departmentID": 2,
"department": "Support",
"status": "Salaried",
"notes": "Jack is on probation due to sloppy work. We hope to see him back at his desk shortly.\r\n\r\nPlease remember, sloppy work is not something we tolerate.",
"pictureName": "Jackie Garmin.jpg",
"picture": "../../../../images/employees/new/Jackie Garmin.jpg"
},
{
"id": 47,
"firstName": "Lincoln",
"lastName": "Bartlett",
"fullName": "Lincoln Bartlett",
"prefix": "Mr.",
"title": "Sales Assistant",
"address": "800 N Alameda St",
"city": "Los Angeles",
"stateID": 5,
"zipcode": 90012,
"email": "lincolnb@dx-email.com",
"skype": "lincoln_DX_skype",
"mobilePhone": "+1 (213) 555-8272",
"homePhone": "2135552587",
"birthDate": "1990-08-02T00:00:00",
"hireDate": "2012-05-11T00:00:00",
"departmentID": 1,
"department": "Sales",
"status": "Salaried",
"notes": "Lincoln is on probation due to poor performance. We hope to see him back at his desk shortly.\r\n\r\nPlease remember, poor performance Is not something we tolerate.",
"pictureName": "Lincoln Bartlett.jpg",
"picture": "../../../../images/employees/new/Lincoln Bartlett.jpg"
},
{
"id": 48,
"firstName": "Brad",
"lastName": "Farkus",
"fullName": "Brad Farkus",
"prefix": "Mr.",
"title": "Engineer",
"address": "1635 Woods Drive",
"city": "Los Angeles",
"stateID": 5,
"zipcode": 90069,
"email": "bradf@dx-email.com",
"skype": "brad_DX_skype",
"mobilePhone": "+1 (213) 555-3626",
"homePhone": "2135552747",
"birthDate": "1991-03-17T00:00:00",
"hireDate": "2010-04-15T00:00:00",
"departmentID": 4,
"department": "Engineering",
"status": "Terminated",
"notes": null,
"pictureName": "Brad Farkus.jpg",
"picture": "../../../../images/employees/new/Brad Farkus.jpg"
},
{
"id": 49,
"firstName": "Jennifer",
"lastName": "Hobbs",
"fullName": "Jenny Hobbs",
"prefix": "Ms.",
"title": "Shipping Assistant",
"address": "205 Chautauqua Boulevard",
"city": "Los Angeles",
"stateID": 5,
"zipcode": 90069,
"email": "jennyh@dx-email.com",
"skype": "jenny_DX_skype",
"mobilePhone": "+1 (310) 555-2668",
"homePhone": "3105550850",
"birthDate": "1992-07-14T00:00:00",
"hireDate": "2011-12-11T00:00:00",
"departmentID": 3,
"department": "Shipping",
"status": "Terminated",
"notes": null,
"pictureName": "Jenny Hobbs.jpg",
"picture": "../../../../images/employees/new/Jenny Hobbs.jpg"
},
{
"id": 50,
"firstName": "Dallas",
"lastName": "Lou",
"fullName": "Dallas Lou",
"prefix": "Mr.",
"title": "Shipping Assistant",
"address": "1 Bunker Hill",
"city": "Los Angeles",
"stateID": 5,
"zipcode": 90013,
"email": "dallas@dx-email.com",
"skype": "dallas_DX_skype",
"mobilePhone": "+1 (213) 555-8357",
"homePhone": "2135550835",
"birthDate": "1994-08-19T00:00:00",
"hireDate": "2012-06-18T00:00:00",
"departmentID": 3,
"department": "Shipping",
"status": "Terminated",
"notes": null,
"pictureName": "Dallas Lou.jpg",
"picture": "../../../../images/employees/new/Dallas Lou.jpg"
},
{
"id": 51,
"firstName": "Stu",
"lastName": "Pizaro",
"fullName": "Stu Pizaro",
"prefix": "Mr.",
"title": "Engineer",
"address": "200 N. Spring St",
"city": "Los Angeles",
"stateID": 5,
"zipcode": 90012,
"email": "stu@dx-email.com",
"skype": "stu_DX_skype",
"mobilePhone": "+1 (213) 555-2552",
"homePhone": "2135550988",
"birthDate": "1985-09-11T00:00:00",
"hireDate": "2011-07-19T00:00:00",
"departmentID": 4,
"department": "Engineering",
"status": "Terminated",
"notes": null,
"pictureName": "Stu Pizaro.jpg",
"picture": "../../../../images/employees/new/Stu Pizaro.jpg"
}];
To enable card editing, set the following editing properties to true:
- editing.allowUpdating
- editing.allowAdding
- editing.allowDeleting
JavaScript CardView uses DevExtreme Form and Popup components to display the form and the popup. Default configurations are defined automatically. If these configurations do not meet your requirements, you can redefine them in the editing object's form and popup properties as demonstrated in this demo.