$(() => { const dataGrid = $('#gridContainer').dxDataGrid({ height: 440, dataSource: tasks, keyExpr: 'ID', scrolling: { mode: 'virtual', }, sorting: { mode: 'none', }, rowDragging: { allowReordering: true, onReorder(e) { const visibleRows = e.component.getVisibleRows(); const toIndex = tasks.findIndex((item) => item.ID === visibleRows[e.toIndex].data.ID); const fromIndex = tasks.findIndex((item) => item.ID === e.itemData.ID); tasks.splice(fromIndex, 1); tasks.splice(toIndex, 0, e.itemData); e.component.refresh(); }, }, showBorders: true, columns: [{ dataField: 'ID', width: 55, }, { dataField: 'Owner', lookup: { dataSource: employees, valueExpr: 'ID', displayExpr: 'FullName', }, width: 150, }, { dataField: 'AssignedEmployee', caption: 'Assignee', lookup: { dataSource: employees, valueExpr: 'ID', displayExpr: 'FullName', }, width: 150, }, 'Subject'], }).dxDataGrid('instance'); $('#dragIcons').dxCheckBox({ text: 'Show Drag Icons', value: true, onValueChanged(data) { dataGrid.option('rowDragging.showDragIcons', data.value); }, }); });
<!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.4/css/dx.light.css" /> <script src="js/dx.all.js?v=25.1.4"></script> <script src="https://unpkg.com/devextreme-aspnet-data@5.0.0/js/dx.aspnet.data.js"></script> <script src="data.js"></script> <link rel="stylesheet" type="text/css" href="styles.css" /> <script src="index.js"></script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="gridContainer"></div> <div class="options"> <div class="caption">Options</div> <div class="option"> <div id="dragIcons"></div> </div> </div> </div> </body> </html>
.options { padding: 20px; background-color: rgba(191, 191, 191, 0.15); margin-top: 20px; } .caption { font-size: 18px; font-weight: 500; } .option { width: 24%; display: inline-block; margin-top: 10px; }
const employees = [{ ID: 1, FullName: 'John Heart', Department: 'Management', Title: 'CEO', }, { ID: 2, FullName: 'Samantha Bright', Department: 'Management', Title: 'COO', }, { ID: 3, FullName: 'Arthur Miller', Department: 'Management', Title: 'CTO', }, { ID: 4, FullName: 'Robert Reagan', Department: 'Management', Title: 'CMO', }, { ID: 5, FullName: 'Greta Sims', Department: 'Human Resources', Title: 'HR Manager', }, { ID: 6, FullName: 'Brett Wade', Department: 'IT', Title: 'IT Manager', }, { ID: 7, FullName: 'Sandra Johnson', Department: 'Human Resources', Title: 'Controller', }, { ID: 8, FullName: 'Ed Holmes', Department: 'Sales', Title: 'Sales Manager', }, { ID: 9, FullName: 'Barb Banks', Department: 'Support', Title: 'Support Manager', }, { ID: 10, FullName: 'Kevin Carter', Department: 'Shipping', Title: 'Shipping Manager', }, { ID: 11, FullName: 'Cindy Stanwick', Department: 'Human Resources', Title: 'HR Assistant', }, { ID: 12, FullName: 'Sammy Hill', Department: 'Sales', Title: 'Sales Assistant', }, { ID: 13, FullName: 'Davey Jones', Department: 'Shipping', Title: 'Shipping Assistant', }, { ID: 14, FullName: 'Victor Norris', Department: 'Shipping', Title: 'Shipping Assistant', }, { ID: 15, FullName: 'Mary Stern', Department: 'Shipping', Title: 'Shipping Assistant', }, { ID: 16, FullName: 'Robin Cosworth', Department: 'Shipping', Title: 'Shipping Assistant', }, { ID: 17, FullName: 'Kelly Rodriguez', Department: 'Support', Title: 'Support Assistant', }, { ID: 18, FullName: 'James Anderson', Department: 'Support', Title: 'Support Assistant', }, { ID: 19, FullName: 'Antony Remmen', Department: 'Support', Title: 'Support Assistant', }, { ID: 20, FullName: 'Olivia Peyton', Department: 'Sales', Title: 'Sales Assistant', }, { ID: 21, FullName: 'Taylor Riley', Department: 'IT', Title: 'Network Admin', }, { ID: 22, FullName: 'Amelia Harper', Department: 'IT', Title: 'Network Admin', }, { ID: 23, FullName: 'Wally Hobbs', Department: 'IT', Title: 'Programmer', }, { ID: 24, FullName: 'Brad Jameson', Department: 'IT', Title: 'Programmer', }, { ID: 25, FullName: 'Karen Goodson', Department: 'IT', Title: 'Programmer', }, { ID: 26, FullName: 'Marcus Orbison', Department: 'Human Resources', Title: 'Travel Coordinator', }, { ID: 27, FullName: 'Sandy Bright', Department: 'Human Resources', Title: 'Benefits Coordinator', }, { ID: 28, FullName: 'Morgan Kennedy', Department: 'IT', Title: 'Graphic Designer', }, { ID: 29, FullName: 'Violet Bailey', Department: 'IT', Title: 'Jr Graphic Designer', }, { ID: 30, FullName: 'Ken Samuelson', Department: 'Human Resources', Title: 'Ombudsman', }, { ID: 31, FullName: 'Nat Maguiree', Department: 'Support', Title: 'Trainer', }, { ID: 32, FullName: 'Bart Arnaz', Department: 'Engineering', Title: 'Director of Engineering', }, { ID: 33, FullName: 'Leah Simpson', Department: 'Engineering', Title: 'Test Coordinator', }, { ID: 34, FullName: 'Arnie Schwartz', Department: 'Engineering', Title: 'Engineer', }, { ID: 35, FullName: 'Billy Zimmer', Department: 'Engineering', Title: 'Engineer', }, { ID: 36, FullName: 'Samantha Piper', Department: 'Engineering', Title: 'Engineer', }, { ID: 37, FullName: 'Maggie Boxter', Department: 'Engineering', Title: 'Engineer', }, { ID: 38, FullName: 'Terry Bradley', Department: 'Engineering', Title: 'QA Engineer', }, { ID: 39, FullName: 'Gabe Jones', Department: 'Support', Title: 'Retail Coordinator', }, { ID: 40, FullName: 'Lucy Ball', Department: 'Sales', Title: 'Sales Assistant', }, { ID: 41, FullName: 'Jim Packard', Department: 'Sales', Title: 'Retail Sales Manager', }, { ID: 42, FullName: 'Hannah Brookly', Department: 'Sales', Title: 'Online Sales Manager', }, { ID: 43, FullName: 'Harv Mudd', Department: 'Sales', Title: 'Retail Sales Manager', }, { ID: 44, FullName: 'Clark Morgan', Department: 'Sales', Title: 'Retail Sales Manager', }, { ID: 45, FullName: 'Todd Hoffman', Department: 'Sales', Title: 'Retail Sales Manager', }, { ID: 46, FullName: 'Jackie Garmin', Department: 'Support', Title: 'Support Assistant', }, { ID: 47, FullName: 'Lincoln Bartlett', Department: 'Sales', Title: 'Sales Assistant', }, { ID: 48, FullName: 'Brad Farkus', Department: 'Engineering', Title: 'Engineer', }, { ID: 49, FullName: 'Jenny Hobbs', Department: 'Shipping', Title: 'Shipping Assistant', }, { ID: 50, FullName: 'Dallas Lou', Department: 'Shipping', Title: 'Shipping Assistant', }, { ID: 51, FullName: 'Stu Pizaro', Department: 'Engineering', Title: 'Engineer', }]; const statuses = [{ id: 1, name: 'Not Started', }, { id: 2, name: 'In Progress', }, { id: 3, name: 'Deferred', }, { id: 4, name: 'Need Assistance', }, { id: 5, name: 'Completed', }]; const tasks = [ { ID: 1, Subject: 'Prepare 2013 Financial', Status: 5, Owner: 1, AssignedEmployee: 7, OrderIndex: 0, Priority: 3, }, { ID: 2, Subject: 'Prepare 2013 Marketing Plan', Status: 5, Owner: 1, AssignedEmployee: 4, OrderIndex: 1, Priority: 4, }, { ID: 3, Subject: 'Update Personnel Files', Status: 5, Owner: 1, AssignedEmployee: 2, OrderIndex: 2, Priority: 1, }, { ID: 4, Subject: 'Review Health Insurance Options Under the Affordable Care Act', Status: 1, Owner: 1, AssignedEmployee: 2, OrderIndex: 3, Priority: 4, }, { ID: 5, Subject: 'Choose between PPO and HMO Health Plan', Status: 4, Owner: 2, AssignedEmployee: 1, OrderIndex: 4, Priority: 3, }, { ID: 6, Subject: 'Google AdWords Strategy', Status: 1, Owner: 4, AssignedEmployee: 1, OrderIndex: 5, Priority: 2, }, { ID: 7, Subject: 'New Brochures', Status: 1, Owner: 4, AssignedEmployee: 1, OrderIndex: 6, Priority: 1, }, { ID: 8, Subject: '2013 Brochure Designs', Status: 1, Owner: 1, AssignedEmployee: 28, OrderIndex: 7, Priority: 1, }, { ID: 9, Subject: 'Brochure Design Review', Status: 1, Owner: 28, AssignedEmployee: 29, OrderIndex: 8, Priority: 1, }, { ID: 10, Subject: 'Website Re-Design Plan', Status: 5, Owner: 28, AssignedEmployee: 29, OrderIndex: 9, Priority: 2, }, { ID: 11, Subject: 'Rollout of New Website and Marketing Brochures', Status: 5, Owner: 1, AssignedEmployee: 4, OrderIndex: 10, Priority: 2, }, { ID: 12, Subject: 'Update Sales Strategy Documents', Status: 5, Owner: 4, AssignedEmployee: 8, OrderIndex: 11, Priority: 2, }, { ID: 13, Subject: 'Create 2012 Sales Report', Status: 5, Owner: 8, AssignedEmployee: 41, OrderIndex: 12, Priority: 4, }, { ID: 14, Subject: 'Direct vs Online Sales Comparison Report', Status: 5, Owner: 41, AssignedEmployee: 42, OrderIndex: 13, Priority: 3, }, { ID: 15, Subject: 'Review 2012 Sales Report and Approve 2013 Plans', Status: 5, Owner: 41, AssignedEmployee: 4, OrderIndex: 14, Priority: 3, }, { ID: 16, Subject: 'Deliver R&D Plans for 2013', Status: 2, Owner: 1, AssignedEmployee: 3, OrderIndex: 15, Priority: 2, }, { ID: 17, Subject: 'Create 2013 R&D Plans', Status: 5, Owner: 3, AssignedEmployee: 32, OrderIndex: 16, Priority: 0, }, { ID: 18, Subject: '2013 QA Strategy Report', Status: 5, Owner: 32, AssignedEmployee: 33, OrderIndex: 17, Priority: 0, }, { ID: 19, Subject: '2013 Training Events', Status: 5, Owner: 33, AssignedEmployee: 31, OrderIndex: 18, Priority: 0, }, { ID: 20, Subject: 'Approve Hiring of John Jeffers', Status: 5, Owner: 31, AssignedEmployee: 5, OrderIndex: 19, Priority: 0, }, { ID: 21, Subject: 'Non-Compete Agreements', Status: 5, Owner: 5, AssignedEmployee: 2, OrderIndex: 20, Priority: 0, }, { ID: 22, Subject: 'Update NDA Agreement', Status: 5, Owner: 2, AssignedEmployee: 1, OrderIndex: 21, Priority: 0, }, { ID: 23, Subject: 'Update Employee Files with New NDA', Status: 1, Owner: 2, AssignedEmployee: 5, OrderIndex: 22, Priority: 3, }, { ID: 24, Subject: 'Sign Updated NDA', Status: 5, Owner: 5, AssignedEmployee: 6, OrderIndex: 23, Priority: 0, }, { ID: 25, Subject: 'Sign Updated NDA', Status: 5, Owner: 5, AssignedEmployee: 7, OrderIndex: 24, Priority: 0, }, { ID: 26, Subject: 'Sign Updated NDA', Status: 1, Owner: 5, AssignedEmployee: 8, OrderIndex: 25, Priority: 1, }, { ID: 27, Subject: 'Sign Updated NDA', Status: 4, Owner: 5, AssignedEmployee: 9, OrderIndex: 26, Priority: 0, }, { ID: 28, Subject: 'Submit Questions Regarding New NDA', Status: 1, Owner: 9, AssignedEmployee: 17, OrderIndex: 27, Priority: 1, }, { ID: 29, Subject: 'Submit Questions Regarding New NDA', Status: 1, Owner: 9, AssignedEmployee: 18, OrderIndex: 28, Priority: 1, }, { ID: 30, Subject: 'Submit Questions Regarding New NDA', Status: 4, Owner: 9, AssignedEmployee: 19, OrderIndex: 29, Priority: 0, }, { ID: 31, Subject: 'Submit Signed NDA', Status: 5, Owner: 10, AssignedEmployee: 14, OrderIndex: 30, Priority: 0, }, { ID: 32, Subject: 'Submit Signed NDA', Status: 5, Owner: 10, AssignedEmployee: 13, OrderIndex: 31, Priority: 0, }, { ID: 33, Subject: 'Submit Signed NDA', Status: 5, Owner: 10, AssignedEmployee: 15, OrderIndex: 32, Priority: 0, }, { ID: 34, Subject: 'Submit Signed NDA', Status: 5, Owner: 10, AssignedEmployee: 16, OrderIndex: 33, Priority: 0, }, { ID: 35, Subject: 'Update Revenue Projections', Status: 5, Owner: 1, AssignedEmployee: 7, OrderIndex: 34, Priority: 0, }, { ID: 36, Subject: 'Review Revenue Projections', Status: 5, Owner: 7, AssignedEmployee: 8, OrderIndex: 35, Priority: 0, }, { ID: 37, Subject: 'Comment on Revenue Projections', Status: 5, Owner: 7, AssignedEmployee: 41, OrderIndex: 36, Priority: 0, }, { ID: 38, Subject: 'Comment on Revenue Projections', Status: 5, Owner: 7, AssignedEmployee: 42, OrderIndex: 37, Priority: 0, }, { ID: 39, Subject: 'Comment on Revenue Projections', Status: 1, Owner: 7, AssignedEmployee: 45, OrderIndex: 38, Priority: 2, }, { ID: 40, Subject: 'Provide New Health Insurance Docs', Status: 5, Owner: 11, AssignedEmployee: 5, OrderIndex: 39, Priority: 0, }, { ID: 41, Subject: 'Review Changes to Health Insurance Coverage', Status: 5, Owner: 11, AssignedEmployee: 10, OrderIndex: 40, Priority: 0, }, { ID: 42, Subject: 'Scan Health Insurance Forms', Status: 5, Owner: 10, AssignedEmployee: 14, OrderIndex: 41, Priority: 0, }, { ID: 43, Subject: 'Sign Health Insurance Forms', Status: 5, Owner: 14, AssignedEmployee: 15, OrderIndex: 42, Priority: 0, }, { ID: 44, Subject: 'Sign Health Insurance Forms', Status: 5, Owner: 14, AssignedEmployee: 13, OrderIndex: 43, Priority: 0, }, { ID: 45, Subject: 'Sign Health Insurance Forms', Status: 3, Owner: 14, AssignedEmployee: 16, OrderIndex: 44, Priority: 0, }, { ID: 46, Subject: 'Follow up with West Coast Stores', Status: 1, Owner: 9, AssignedEmployee: 18, OrderIndex: 45, Priority: 3, }, { ID: 47, Subject: 'Follow up with East Coast Stores', Status: 1, Owner: 9, AssignedEmployee: 17, OrderIndex: 46, Priority: 3, }, { ID: 48, Subject: 'Send Email to Customers about Recall', Status: 5, Owner: 9, AssignedEmployee: 19, OrderIndex: 47, Priority: 0, }, { ID: 49, Subject: 'Submit Refund Report for 2013 Recall', Status: 5, Owner: 7, AssignedEmployee: 9, OrderIndex: 48, Priority: 0, }, { ID: 50, Subject: 'Give Final Approval for Refunds', Status: 5, Owner: 7, AssignedEmployee: 2, OrderIndex: 49, Priority: 0, }, { ID: 51, Subject: 'Prepare Product Recall Report', Status: 5, Owner: 3, AssignedEmployee: 32, OrderIndex: 50, Priority: 0, }, { ID: 52, Subject: 'Review Product Recall Report by Engineering Team', Status: 5, Owner: 3, AssignedEmployee: 1, OrderIndex: 51, Priority: 0, }, { ID: 53, Subject: 'Create Training Course for New TVs', Status: 5, Owner: 32, AssignedEmployee: 31, OrderIndex: 52, Priority: 0, }, { ID: 54, Subject: 'Review Training Course for any Omissions', Status: 5, Owner: 31, AssignedEmployee: 33, OrderIndex: 53, Priority: 0, }, { ID: 55, Subject: 'Review Overtime Report', Status: 5, Owner: 5, AssignedEmployee: 6, OrderIndex: 54, Priority: 0, }, { ID: 56, Subject: 'Submit Overtime Request Forms', Status: 5, Owner: 6, AssignedEmployee: 21, OrderIndex: 55, Priority: 0, }, { ID: 57, Subject: 'Submit Overtime Request Forms', Status: 5, Owner: 6, AssignedEmployee: 22, OrderIndex: 56, Priority: 0, }, { ID: 58, Subject: 'Submit Overtime Request Forms', Status: 5, Owner: 6, AssignedEmployee: 23, OrderIndex: 57, Priority: 0, }, { ID: 59, Subject: 'Overtime Approval Guidelines', Status: 5, Owner: 6, AssignedEmployee: 2, OrderIndex: 58, Priority: 0, }, { ID: 60, Subject: 'Refund Request Template', Status: 3, Owner: 12, AssignedEmployee: 8, OrderIndex: 59, Priority: 0, }, { ID: 61, Subject: 'Recall Rebate Form', Status: 3, Owner: 12, AssignedEmployee: 8, OrderIndex: 60, Priority: 0, }, { ID: 62, Subject: 'Create Report on Customer Feedback', Status: 5, Owner: 30, AssignedEmployee: 12, OrderIndex: 61, Priority: 0, }, { ID: 63, Subject: 'Review Customer Feedback Report', Status: 5, Owner: 30, AssignedEmployee: 8, OrderIndex: 62, Priority: 0, }, { ID: 64, Subject: 'Customer Feedback Report Analysis', Status: 3, Owner: 8, AssignedEmployee: 1, OrderIndex: 63, Priority: 0, }, { ID: 65, Subject: 'Prepare Shipping Cost Analysis Report', Status: 5, Owner: 8, AssignedEmployee: 10, OrderIndex: 64, Priority: 0, }, { ID: 66, Subject: 'Provide Feedback on Shippers', Status: 5, Owner: 10, AssignedEmployee: 13, OrderIndex: 65, Priority: 0, }, { ID: 67, Subject: 'Provide Feedback on Shippers', Status: 5, Owner: 10, AssignedEmployee: 15, OrderIndex: 66, Priority: 0, }, { ID: 68, Subject: 'Provide Feedback on Shippers', Status: 5, Owner: 10, AssignedEmployee: 16, OrderIndex: 67, Priority: 0, }, { ID: 69, Subject: 'Select Preferred Shipper', Status: 5, Owner: 10, AssignedEmployee: 2, OrderIndex: 68, Priority: 0, }, { ID: 70, Subject: 'Complete Shipper Selection Form', Status: 3, Owner: 2, AssignedEmployee: 1, OrderIndex: 69, Priority: 0, }, { ID: 71, Subject: 'Upgrade Server Hardware', Status: 5, Owner: 22, AssignedEmployee: 6, OrderIndex: 70, Priority: 0, }, { ID: 72, Subject: 'Upgrade Personal Computers', Status: 4, Owner: 21, AssignedEmployee: 6, OrderIndex: 71, Priority: 0, }, { ID: 73, Subject: 'Approve Personal Computer Upgrade Plan', Status: 5, Owner: 6, AssignedEmployee: 2, OrderIndex: 72, Priority: 0, }, { ID: 74, Subject: 'Decide on Mobile Devices to Use in the Field', Status: 5, Owner: 6, AssignedEmployee: 3, OrderIndex: 73, Priority: 0, }, { ID: 75, Subject: 'Upgrade Apps to Windows RT or stay with WinForms', Status: 5, Owner: 24, AssignedEmployee: 6, OrderIndex: 74, Priority: 0, }, { ID: 76, Subject: 'Estimate Time Required to Touch-Enable Apps', Status: 5, Owner: 24, AssignedEmployee: 25, OrderIndex: 75, Priority: 0, }, { ID: 77, Subject: 'Report on Tranistion to Touch-Based Apps', Status: 5, Owner: 6, AssignedEmployee: 23, OrderIndex: 76, Priority: 0, }, { ID: 78, Subject: 'Try New Touch-Enabled WinForms Apps', Status: 5, Owner: 6, AssignedEmployee: 3, OrderIndex: 77, Priority: 0, }, { ID: 79, Subject: 'Rollout New Touch-Enabled WinForms Apps', Status: 4, Owner: 6, AssignedEmployee: 24, OrderIndex: 78, Priority: 0, }, { ID: 80, Subject: 'Site Up-Time Report', Status: 5, Owner: 3, AssignedEmployee: 6, OrderIndex: 79, Priority: 0, }, { ID: 81, Subject: 'Review Site Up-Time Report', Status: 5, Owner: 3, AssignedEmployee: 4, OrderIndex: 80, Priority: 0, }, { ID: 82, Subject: 'Review Online Sales Report', Status: 5, Owner: 4, AssignedEmployee: 1, OrderIndex: 81, Priority: 0, }, { ID: 83, Subject: 'Determine New Online Marketing Strategy', Status: 5, Owner: 4, AssignedEmployee: 8, OrderIndex: 82, Priority: 0, }, { ID: 84, Subject: 'New Online Marketing Strategy', Status: 5, Owner: 8, AssignedEmployee: 42, OrderIndex: 83, Priority: 0, }, { ID: 85, Subject: 'Approve New Online Marketing Strategy', Status: 5, Owner: 8, AssignedEmployee: 4, OrderIndex: 84, Priority: 0, }, { ID: 86, Subject: 'Submit New Website Design', Status: 5, Owner: 8, AssignedEmployee: 28, OrderIndex: 85, Priority: 0, }, { ID: 87, Subject: 'Create Icons for Website', Status: 5, Owner: 28, AssignedEmployee: 29, OrderIndex: 86, Priority: 0, }, { ID: 88, Subject: 'Review PSDs for New Website', Status: 5, Owner: 28, AssignedEmployee: 6, OrderIndex: 87, Priority: 0, }, { ID: 89, Subject: 'Create New Shopping Cart', Status: 5, Owner: 6, AssignedEmployee: 24, OrderIndex: 88, Priority: 0, }, { ID: 90, Subject: 'Create New Product Pages', Status: 5, Owner: 6, AssignedEmployee: 25, OrderIndex: 89, Priority: 0, }, ];
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4