Backend API
<template>
<DxCardView
:data-source="tasks"
key-expr="Task_ID"
cards-per-row="auto"
:card-min-width="310"
:word-wrap-enabled="true"
>
<DxSearchPanel
:visible="true"
text="an"
/>
<DxHeaderFilter
:visible="true"
/>
<DxColumn
data-field="Task_Subject"
caption="Subject"
/>
<DxColumn
data-field="Task_Start_Date"
caption="Start Date"
data-type="date"
/>
<DxColumn
data-field="Task_Due_Date"
caption="Due Date"
data-type="date"
/>
<DxColumn
data-field="Task_Priority"
caption="Priority"
/>
<DxColumn
data-field="Task_Status"
caption="Status"
/>
</DxCardView>
</template>
<script setup lang="ts">
import { DxCardView, DxColumn, DxSearchPanel, DxHeaderFilter } from 'devextreme-vue/card-view';
import { tasks } from './data.ts';
</script>
export interface Task {
Task_ID: number;
Task_Assigned_Employee_ID: number;
Task_Owner_ID: number;
Task_Subject: string;
Task_Start_Date: string;
Task_Due_Date: string;
Task_Status: string;
Task_Priority: number;
Task_Completion: number;
}
export const tasks: Task[] = [{
'Task_ID': 1,
'Task_Assigned_Employee_ID': 7,
'Task_Owner_ID': 1,
'Task_Subject': 'Prepare 2023 Financial',
'Task_Start_Date': '2023-01-15T00:00:00',
'Task_Due_Date': '2023-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 2023 Marketing Plan',
'Task_Start_Date': '2023-01-01T00:00:00',
'Task_Due_Date': '2023-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': '2023-02-03T00:00:00',
'Task_Due_Date': '2023-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': '2023-02-12T00:00:00',
'Task_Due_Date': '2023-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': '2023-02-15T00:00:00',
'Task_Due_Date': '2023-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': '2023-02-16T00:00:00',
'Task_Due_Date': '2023-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': '2023-02-17T00:00:00',
'Task_Due_Date': '2023-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': '2023 Brochure Designs',
'Task_Start_Date': '2023-02-19T00:00:00',
'Task_Due_Date': '2023-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': '2023-02-19T00:00:00',
'Task_Due_Date': '2023-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': '2023-02-19T00:00:00',
'Task_Due_Date': '2023-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': '2023-02-20T00:00:00',
'Task_Due_Date': '2023-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': '2023-02-20T00:00:00',
'Task_Due_Date': '2023-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 2022 Sales Report',
'Task_Start_Date': '2023-02-20T00:00:00',
'Task_Due_Date': '2023-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': '2023-02-20T00:00:00',
'Task_Due_Date': '2023-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 2022 Sales Report and Approve 2023 Plans',
'Task_Start_Date': '2023-02-23T00:00:00',
'Task_Due_Date': '2023-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 2023',
'Task_Start_Date': '2023-03-01T00:00:00',
'Task_Due_Date': '2023-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 2023 R&D Plans',
'Task_Start_Date': '2023-03-01T00:00:00',
'Task_Due_Date': '2023-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': '2023 QA Strategy Report',
'Task_Start_Date': '2023-03-02T00:00:00',
'Task_Due_Date': '2023-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': '2023 Training Events',
'Task_Start_Date': '2023-03-02T00:00:00',
'Task_Due_Date': '2023-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': '2023-03-02T00:00:00',
'Task_Due_Date': '2023-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': '2023-03-12T00:00:00',
'Task_Due_Date': '2023-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': '2023-03-14T00:00:00',
'Task_Due_Date': '2023-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': '2023-03-16T00:00:00',
'Task_Due_Date': '2023-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': '2023-03-20T00:00:00',
'Task_Due_Date': '2023-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': '2023-03-20T00:00:00',
'Task_Due_Date': '2023-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': '2023-03-20T00:00:00',
'Task_Due_Date': '2023-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': '2023-03-20T00:00:00',
'Task_Due_Date': '2023-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': '2023-03-21T00:00:00',
'Task_Due_Date': '2023-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': '2023-03-21T00:00:00',
'Task_Due_Date': '2023-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': '2023-03-21T00:00:00',
'Task_Due_Date': '2023-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': '2023-03-22T00:00:00',
'Task_Due_Date': '2023-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': '2023-03-22T00:00:00',
'Task_Due_Date': '2023-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': '2023-03-22T00:00:00',
'Task_Due_Date': '2023-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': '2023-03-22T00:00:00',
'Task_Due_Date': '2023-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': '2023-03-24T00:00:00',
'Task_Due_Date': '2023-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': '2023-03-25T00:00:00',
'Task_Due_Date': '2023-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': '2023-03-25T00:00:00',
'Task_Due_Date': '2023-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': '2023-03-25T00:00:00',
'Task_Due_Date': '2023-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': '2023-03-25T00:00:00',
'Task_Due_Date': '2023-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': '2023-03-28T00:00:00',
'Task_Due_Date': '2023-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': '2023-04-07T00:00:00',
'Task_Due_Date': '2023-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': '2023-04-15T00:00:00',
'Task_Due_Date': '2023-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': '2023-04-16T00:00:00',
'Task_Due_Date': '2023-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': '2023-04-16T00:00:00',
'Task_Due_Date': '2023-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': '2023-04-16T00:00:00',
'Task_Due_Date': '2023-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': '2023-04-18T00:00:00',
'Task_Due_Date': '2024-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': '2023-04-18T00:00:00',
'Task_Due_Date': '2024-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': '2023-04-18T00:00:00',
'Task_Due_Date': '2023-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 2023 Recall',
'Task_Start_Date': '2023-04-25T00:00:00',
'Task_Due_Date': '2023-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': '2023-05-05T00:00:00',
'Task_Due_Date': '2023-05-15T00:00:00',
'Task_Status': 'Completed',
'Task_Priority': 2,
'Task_Completion': 100,
}];
import { createApp } from 'vue';
import App from './App.vue';
createApp(App).mount('#app');
<!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">
<div id="app" />
</div>
<script src="bundles/vendor/vue.vendor.js"></script>
<script src="./bundle.js"></script>
</body>
</html>
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.