Backend API
$(() => {
$('#card-view').dxCardView({
dataSource: tasks,
keyExpr: 'Task_ID',
cardsPerRow: 'auto',
cardMinWidth: 310,
wordWrapEnabled: true,
columns: [
{
dataField: 'Task_Subject',
caption: 'Subject',
},
{
dataField: 'Task_Start_Date',
dataType: 'date',
caption: 'Start Date',
},
{
dataField: 'Task_Due_Date',
dataType: 'date',
caption: 'Due Date',
},
{
dataField: 'Task_Priority',
caption: 'Priority',
},
{
dataField: 'Task_Status',
caption: 'Status',
},
],
headerFilter: {
visible: true,
},
searchPanel: {
visible: true,
text: 'an'
},
});
});
<!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 tasks = [{
'Task_ID': 1,
'Task_Assigned_Employee_ID': 7,
'Task_Owner_ID': 1,
'Task_Subject': 'Prepare 2013 Financial',
'Task_Start_Date': '2013-01-15T00:00:00',
'Task_Due_Date': '2013-01-31T00:00:00',
'Task_Status': 'Completed',
'Task_Priority': 4,
'Task_Completion': 100,
}, {
'Task_ID': 2,
'Task_Assigned_Employee_ID': 4,
'Task_Owner_ID': 1,
'Task_Subject': 'Prepare 3013 Marketing Plan',
'Task_Start_Date': '2013-01-01T00:00:00',
'Task_Due_Date': '2013-01-31T00:00:00',
'Task_Status': 'Completed',
'Task_Priority': 4,
'Task_Completion': 100,
}, {
'Task_ID': 3,
'Task_Assigned_Employee_ID': 2,
'Task_Owner_ID': 1,
'Task_Subject': 'Update Personnel Files',
'Task_Start_Date': '2013-02-03T00:00:00',
'Task_Due_Date': '2013-02-28T00:00:00',
'Task_Status': 'Completed',
'Task_Priority': 4,
'Task_Completion': 100,
}, {
'Task_ID': 4,
'Task_Assigned_Employee_ID': 2,
'Task_Owner_ID': 1,
'Task_Subject': 'Review Health Insurance Options Under the Affordable Care Act',
'Task_Start_Date': '2013-02-12T00:00:00',
'Task_Due_Date': '2013-04-25T00:00:00',
'Task_Status': 'In Progress',
'Task_Priority': 4,
'Task_Completion': 50,
}, {
'Task_ID': 5,
'Task_Assigned_Employee_ID': 1,
'Task_Owner_ID': 2,
'Task_Subject': 'Choose between PPO and HMO Health Plan',
'Task_Start_Date': '2013-02-15T00:00:00',
'Task_Due_Date': '2013-04-15T00:00:00',
'Task_Status': 'In Progress',
'Task_Priority': 4,
'Task_Completion': 75,
}, {
'Task_ID': 6,
'Task_Assigned_Employee_ID': 1,
'Task_Owner_ID': 4,
'Task_Subject': 'Google AdWords Strategy',
'Task_Start_Date': '2013-02-16T00:00:00',
'Task_Due_Date': '2013-02-28T00:00:00',
'Task_Status': 'Completed',
'Task_Priority': 4,
'Task_Completion': 100,
}, {
'Task_ID': 7,
'Task_Assigned_Employee_ID': 1,
'Task_Owner_ID': 4,
'Task_Subject': 'New Brochures',
'Task_Start_Date': '2013-02-17T00:00:00',
'Task_Due_Date': '2013-02-24T00:00:00',
'Task_Status': 'Completed',
'Task_Priority': 2,
'Task_Completion': 100,
}, {
'Task_ID': 8,
'Task_Assigned_Employee_ID': 28,
'Task_Owner_ID': 1,
'Task_Subject': '2013 Brochure Designs',
'Task_Start_Date': '2013-02-19T00:00:00',
'Task_Due_Date': '2013-02-24T00:00:00',
'Task_Status': 'Completed',
'Task_Priority': 3,
'Task_Completion': 100,
}, {
'Task_ID': 9,
'Task_Assigned_Employee_ID': 29,
'Task_Owner_ID': 28,
'Task_Subject': 'Brochure Design Review',
'Task_Start_Date': '2013-02-19T00:00:00',
'Task_Due_Date': '2013-02-22T00:00:00',
'Task_Status': 'Completed',
'Task_Priority': 2,
'Task_Completion': 100,
}, {
'Task_ID': 10,
'Task_Assigned_Employee_ID': 29,
'Task_Owner_ID': 28,
'Task_Subject': 'Website Re-Design Plan',
'Task_Start_Date': '2013-02-19T00:00:00',
'Task_Due_Date': '2013-02-24T00:00:00',
'Task_Status': 'Completed',
'Task_Priority': 4,
'Task_Completion': 100,
}, {
'Task_ID': 11,
'Task_Assigned_Employee_ID': 4,
'Task_Owner_ID': 1,
'Task_Subject': 'Rollout of New Website and Marketing Brochures',
'Task_Start_Date': '2013-02-20T00:00:00',
'Task_Due_Date': '2013-02-28T00:00:00',
'Task_Status': 'Completed',
'Task_Priority': 4,
'Task_Completion': 100,
}, {
'Task_ID': 12,
'Task_Assigned_Employee_ID': 8,
'Task_Owner_ID': 4,
'Task_Subject': 'Update Sales Strategy Documents',
'Task_Start_Date': '2013-02-20T00:00:00',
'Task_Due_Date': '2013-02-22T00:00:00',
'Task_Status': 'Completed',
'Task_Priority': 2,
'Task_Completion': 100,
}, {
'Task_ID': 13,
'Task_Assigned_Employee_ID': 41,
'Task_Owner_ID': 8,
'Task_Subject': 'Create 2012 Sales Report',
'Task_Start_Date': '2013-02-20T00:00:00',
'Task_Due_Date': '2013-02-21T00:00:00',
'Task_Status': 'Completed',
'Task_Priority': 2,
'Task_Completion': 100,
}, {
'Task_ID': 14,
'Task_Assigned_Employee_ID': 42,
'Task_Owner_ID': 41,
'Task_Subject': 'Direct vs Online Sales Comparison Report',
'Task_Start_Date': '2013-02-20T00:00:00',
'Task_Due_Date': '2013-02-22T00:00:00',
'Task_Status': 'Completed',
'Task_Priority': 4,
'Task_Completion': 100,
}, {
'Task_ID': 15,
'Task_Assigned_Employee_ID': 4,
'Task_Owner_ID': 41,
'Task_Subject': 'Review 2012 Sales Report and Approve 2013 Plans',
'Task_Start_Date': '2013-02-23T00:00:00',
'Task_Due_Date': '2013-02-28T00:00:00',
'Task_Status': 'Completed',
'Task_Priority': 2,
'Task_Completion': 100,
}, {
'Task_ID': 16,
'Task_Assigned_Employee_ID': 3,
'Task_Owner_ID': 1,
'Task_Subject': 'Deliver R&D Plans for 2013',
'Task_Start_Date': '2013-03-01T00:00:00',
'Task_Due_Date': '2013-03-10T00:00:00',
'Task_Status': 'Completed',
'Task_Priority': 4,
'Task_Completion': 100,
}, {
'Task_ID': 17,
'Task_Assigned_Employee_ID': 32,
'Task_Owner_ID': 3,
'Task_Subject': 'Create 2013 R&D Plans',
'Task_Start_Date': '2013-03-01T00:00:00',
'Task_Due_Date': '2013-03-07T00:00:00',
'Task_Status': 'Completed',
'Task_Priority': 2,
'Task_Completion': 100,
}, {
'Task_ID': 18,
'Task_Assigned_Employee_ID': 33,
'Task_Owner_ID': 32,
'Task_Subject': '2013 QA Strategy Report',
'Task_Start_Date': '2013-03-02T00:00:00',
'Task_Due_Date': '2013-03-05T00:00:00',
'Task_Status': 'Completed',
'Task_Priority': 2,
'Task_Completion': 100,
}, {
'Task_ID': 19,
'Task_Assigned_Employee_ID': 31,
'Task_Owner_ID': 33,
'Task_Subject': '2013 Training Events',
'Task_Start_Date': '2013-03-02T00:00:00',
'Task_Due_Date': '2013-03-04T00:00:00',
'Task_Status': 'Completed',
'Task_Priority': 4,
'Task_Completion': 100,
}, {
'Task_ID': 20,
'Task_Assigned_Employee_ID': 5,
'Task_Owner_ID': 31,
'Task_Subject': 'Approve Hiring of John Jeffers',
'Task_Start_Date': '2013-03-02T00:00:00',
'Task_Due_Date': '2013-03-12T00:00:00',
'Task_Status': 'Completed',
'Task_Priority': 2,
'Task_Completion': 100,
}, {
'Task_ID': 21,
'Task_Assigned_Employee_ID': 2,
'Task_Owner_ID': 5,
'Task_Subject': 'Non-Compete Agreements',
'Task_Start_Date': '2013-03-12T00:00:00',
'Task_Due_Date': '2013-03-14T00:00:00',
'Task_Status': 'Completed',
'Task_Priority': 1,
'Task_Completion': 100,
}, {
'Task_ID': 22,
'Task_Assigned_Employee_ID': 1,
'Task_Owner_ID': 2,
'Task_Subject': 'Update NDA Agreement',
'Task_Start_Date': '2013-03-14T00:00:00',
'Task_Due_Date': '2013-03-16T00:00:00',
'Task_Status': 'Completed',
'Task_Priority': 4,
'Task_Completion': 100,
}, {
'Task_ID': 23,
'Task_Assigned_Employee_ID': 5,
'Task_Owner_ID': 2,
'Task_Subject': 'Update Employee Files with New NDA',
'Task_Start_Date': '2013-03-16T00:00:00',
'Task_Due_Date': '2013-03-26T00:00:00',
'Task_Status': 'Need Assistance',
'Task_Priority': 2,
'Task_Completion': 90,
}, {
'Task_ID': 24,
'Task_Assigned_Employee_ID': 6,
'Task_Owner_ID': 5,
'Task_Subject': 'Sign Updated NDA',
'Task_Start_Date': '2013-03-20T00:00:00',
'Task_Due_Date': '2013-03-25T00:00:00',
'Task_Status': 'Completed',
'Task_Priority': 3,
'Task_Completion': 100,
}, {
'Task_ID': 25,
'Task_Assigned_Employee_ID': 7,
'Task_Owner_ID': 5,
'Task_Subject': 'Sign Updated NDA',
'Task_Start_Date': '2013-03-20T00:00:00',
'Task_Due_Date': '2013-03-25T00:00:00',
'Task_Status': 'Completed',
'Task_Priority': 3,
'Task_Completion': 100,
}, {
'Task_ID': 26,
'Task_Assigned_Employee_ID': 8,
'Task_Owner_ID': 5,
'Task_Subject': 'Sign Updated NDA',
'Task_Start_Date': '2013-03-20T00:00:00',
'Task_Due_Date': '2013-03-25T00:00:00',
'Task_Status': 'Need Assistance',
'Task_Priority': 3,
'Task_Completion': 25,
}, {
'Task_ID': 27,
'Task_Assigned_Employee_ID': 9,
'Task_Owner_ID': 5,
'Task_Subject': 'Sign Updated NDA',
'Task_Start_Date': '2013-03-20T00:00:00',
'Task_Due_Date': '2013-03-25T00:00:00',
'Task_Status': 'In Progress',
'Task_Priority': 3,
'Task_Completion': 100,
}, {
'Task_ID': 28,
'Task_Assigned_Employee_ID': 17,
'Task_Owner_ID': 9,
'Task_Subject': 'Submit Questions Regarding New NDA',
'Task_Start_Date': '2013-03-21T00:00:00',
'Task_Due_Date': '2013-03-24T00:00:00',
'Task_Status': 'Completed',
'Task_Priority': 4,
'Task_Completion': 100,
}, {
'Task_ID': 29,
'Task_Assigned_Employee_ID': 18,
'Task_Owner_ID': 9,
'Task_Subject': 'Submit Questions Regarding New NDA',
'Task_Start_Date': '2013-03-21T00:00:00',
'Task_Due_Date': '2013-03-24T00:00:00',
'Task_Status': 'Completed',
'Task_Priority': 4,
'Task_Completion': 100,
}, {
'Task_ID': 30,
'Task_Assigned_Employee_ID': 19,
'Task_Owner_ID': 9,
'Task_Subject': 'Submit Questions Regarding New NDA',
'Task_Start_Date': '2013-03-21T00:00:00',
'Task_Due_Date': '2013-03-24T00:00:00',
'Task_Status': 'Need Assistance',
'Task_Priority': 4,
'Task_Completion': 25,
}, {
'Task_ID': 31,
'Task_Assigned_Employee_ID': 14,
'Task_Owner_ID': 10,
'Task_Subject': 'Submit Signed NDA',
'Task_Start_Date': '2013-03-22T00:00:00',
'Task_Due_Date': '2013-03-24T00:00:00',
'Task_Status': 'Completed',
'Task_Priority': 3,
'Task_Completion': 100,
}, {
'Task_ID': 32,
'Task_Assigned_Employee_ID': 13,
'Task_Owner_ID': 10,
'Task_Subject': 'Submit Signed NDA',
'Task_Start_Date': '2013-03-22T00:00:00',
'Task_Due_Date': '2013-03-24T00:00:00',
'Task_Status': 'Completed',
'Task_Priority': 3,
'Task_Completion': 100,
}, {
'Task_ID': 33,
'Task_Assigned_Employee_ID': 15,
'Task_Owner_ID': 10,
'Task_Subject': 'Submit Signed NDA',
'Task_Start_Date': '2013-03-22T00:00:00',
'Task_Due_Date': '2013-03-24T00:00:00',
'Task_Status': 'Completed',
'Task_Priority': 3,
'Task_Completion': 100,
}, {
'Task_ID': 34,
'Task_Assigned_Employee_ID': 16,
'Task_Owner_ID': 10,
'Task_Subject': 'Submit Signed NDA',
'Task_Start_Date': '2013-03-22T00:00:00',
'Task_Due_Date': '2013-03-24T00:00:00',
'Task_Status': 'Completed',
'Task_Priority': 3,
'Task_Completion': 100,
}, {
'Task_ID': 35,
'Task_Assigned_Employee_ID': 7,
'Task_Owner_ID': 1,
'Task_Subject': 'Update Revenue Projections',
'Task_Start_Date': '2013-03-24T00:00:00',
'Task_Due_Date': '2013-04-07T00:00:00',
'Task_Status': 'Completed',
'Task_Priority': 2,
'Task_Completion': 100,
}, {
'Task_ID': 36,
'Task_Assigned_Employee_ID': 8,
'Task_Owner_ID': 7,
'Task_Subject': 'Review Revenue Projections',
'Task_Start_Date': '2013-03-25T00:00:00',
'Task_Due_Date': '2013-04-06T00:00:00',
'Task_Status': 'Completed',
'Task_Priority': 4,
'Task_Completion': 100,
}, {
'Task_ID': 37,
'Task_Assigned_Employee_ID': 41,
'Task_Owner_ID': 7,
'Task_Subject': 'Comment on Revenue Projections',
'Task_Start_Date': '2013-03-25T00:00:00',
'Task_Due_Date': '2013-04-03T00:00:00',
'Task_Status': 'Completed',
'Task_Priority': 3,
'Task_Completion': 100,
}, {
'Task_ID': 38,
'Task_Assigned_Employee_ID': 42,
'Task_Owner_ID': 7,
'Task_Subject': 'Comment on Revenue Projections',
'Task_Start_Date': '2013-03-25T00:00:00',
'Task_Due_Date': '2013-04-03T00:00:00',
'Task_Status': 'Completed',
'Task_Priority': 3,
'Task_Completion': 100,
}, {
'Task_ID': 39,
'Task_Assigned_Employee_ID': 45,
'Task_Owner_ID': 7,
'Task_Subject': 'Comment on Revenue Projections',
'Task_Start_Date': '2013-03-25T00:00:00',
'Task_Due_Date': '2013-04-03T00:00:00',
'Task_Status': 'Deferred',
'Task_Priority': 3,
'Task_Completion': 25,
}, {
'Task_ID': 40,
'Task_Assigned_Employee_ID': 5,
'Task_Owner_ID': 11,
'Task_Subject': 'Provide New Health Insurance Docs',
'Task_Start_Date': '2013-03-28T00:00:00',
'Task_Due_Date': '2013-04-07T00:00:00',
'Task_Status': 'Completed',
'Task_Priority': 2,
'Task_Completion': 100,
}, {
'Task_ID': 41,
'Task_Assigned_Employee_ID': 10,
'Task_Owner_ID': 11,
'Task_Subject': 'Review Changes to Health Insurance Coverage',
'Task_Start_Date': '2013-04-07T00:00:00',
'Task_Due_Date': '2013-04-30T00:00:00',
'Task_Status': 'Completed',
'Task_Priority': 2,
'Task_Completion': 100,
}, {
'Task_ID': 42,
'Task_Assigned_Employee_ID': 14,
'Task_Owner_ID': 10,
'Task_Subject': 'Scan Health Insurance Forms',
'Task_Start_Date': '2013-04-15T00:00:00',
'Task_Due_Date': '2013-04-20T00:00:00',
'Task_Status': 'Completed',
'Task_Priority': 2,
'Task_Completion': 100,
}, {
'Task_ID': 43,
'Task_Assigned_Employee_ID': 15,
'Task_Owner_ID': 14,
'Task_Subject': 'Sign Health Insurance Forms',
'Task_Start_Date': '2013-04-16T00:00:00',
'Task_Due_Date': '2013-04-19T00:00:00',
'Task_Status': 'Completed',
'Task_Priority': 4,
'Task_Completion': 100,
}, {
'Task_ID': 44,
'Task_Assigned_Employee_ID': 13,
'Task_Owner_ID': 14,
'Task_Subject': 'Sign Health Insurance Forms',
'Task_Start_Date': '2013-04-16T00:00:00',
'Task_Due_Date': '2013-04-19T00:00:00',
'Task_Status': 'Completed',
'Task_Priority': 4,
'Task_Completion': 100,
}, {
'Task_ID': 45,
'Task_Assigned_Employee_ID': 16,
'Task_Owner_ID': 14,
'Task_Subject': 'Sign Health Insurance Forms',
'Task_Start_Date': '2013-04-16T00:00:00',
'Task_Due_Date': '2013-04-19T00:00:00',
'Task_Status': 'Deferred',
'Task_Priority': 4,
'Task_Completion': 100,
}, {
'Task_ID': 46,
'Task_Assigned_Employee_ID': 18,
'Task_Owner_ID': 9,
'Task_Subject': 'Follow up with West Coast Stores',
'Task_Start_Date': '2013-04-18T00:00:00',
'Task_Due_Date': '2014-02-04T00:00:00',
'Task_Status': 'In Progress',
'Task_Priority': 3,
'Task_Completion': 95,
}, {
'Task_ID': 47,
'Task_Assigned_Employee_ID': 17,
'Task_Owner_ID': 9,
'Task_Subject': 'Follow up with East Coast Stores',
'Task_Start_Date': '2013-04-18T00:00:00',
'Task_Due_Date': '2014-01-04T00:00:00',
'Task_Status': 'In Progress',
'Task_Priority': 3,
'Task_Completion': 85,
}, {
'Task_ID': 48,
'Task_Assigned_Employee_ID': 19,
'Task_Owner_ID': 9,
'Task_Subject': 'Send Email to Customers about Recall',
'Task_Start_Date': '2013-04-18T00:00:00',
'Task_Due_Date': '2013-04-30T00:00:00',
'Task_Status': 'Completed',
'Task_Priority': 4,
'Task_Completion': 100,
}, {
'Task_ID': 49,
'Task_Assigned_Employee_ID': 9,
'Task_Owner_ID': 7,
'Task_Subject': 'Submit Refund Report for 2013 Recall',
'Task_Start_Date': '2013-04-25T00:00:00',
'Task_Due_Date': '2013-05-05T00:00:00',
'Task_Status': 'Completed',
'Task_Priority': 3,
'Task_Completion': 100,
}, {
'Task_ID': 50,
'Task_Assigned_Employee_ID': 2,
'Task_Owner_ID': 7,
'Task_Subject': 'Give Final Approval for Refunds',
'Task_Start_Date': '2013-05-05T00:00:00',
'Task_Due_Date': '2013-05-15T00:00:00',
'Task_Status': 'Completed',
'Task_Priority': 2,
'Task_Completion': 100,
}];
Numeric, date, and Boolean values match if they are equal to the search query. String values match if they contain the query. Search for string values is case-insensitive.
To specify a search query in code, set the searchPanel.text property or call the searchByText(text) method.