<div id="data-grid-demo">
<dx-data-grid
#dataGrid
id="gridContainer"
[height]="440"
[dataSource]="tasks"
[showBorders]="true">
<dxo-row-dragging
[allowReordering]="true"
[onReorder]="onReorder"
[showDragIcons]="showDragIcons"
></dxo-row-dragging>
<dxo-scrolling mode="virtual"></dxo-scrolling>
<dxo-sorting mode="none"></dxo-sorting>
<dxi-column dataField="ID" [width]="55"></dxi-column>
<dxi-column dataField="Owner" [width]="150">
<dxo-lookup
[dataSource]="employees"
valueExpr="ID"
displayExpr="FullName"
></dxo-lookup>
</dxi-column>
<dxi-column
dataField="AssignedEmployee"
caption="Assignee"
[width]="150">
<dxo-lookup
[dataSource]="employees"
valueExpr="ID"
displayExpr="FullName"
></dxo-lookup>
</dxi-column>
<dxi-column dataField="Subject"></dxi-column>
</dx-data-grid>
<div class="options">
<div class="caption">Options</div>
<div class="option">
<dx-check-box
[(value)]="showDragIcons"
text="Show Drag Icons">
</dx-check-box>
</div>
</div>
</div>
import { NgModule, Component, enableProdMode, ViewChild } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { DxDataGridModule, DxCheckBoxModule } from 'devextreme-angular';
import { Service, Employee, Task, Status } from './app.service';
if(!/localhost/.test(document.location.host)) {
enableProdMode();
}
@Component({
selector: 'demo-app',
templateUrl: 'app/app.component.html',
styleUrls: ['app/app.component.css'],
providers: [Service]
})
export class AppComponent {
tasks: Array<Task>;
employees: Array<Employee>;
statuses: Array<Status>;
showDragIcons: boolean;
constructor(service: Service) {
this.tasks = service.getTasks();
this.employees = service.getEmployees();
this.statuses = service.getStatuses();
this.showDragIcons = true;
this.onReorder = this.onReorder.bind(this);
}
onReorder(e) {
var visibleRows = e.component.getVisibleRows(),
toIndex = this.tasks.indexOf(visibleRows[e.toIndex].data),
fromIndex = this.tasks.indexOf(e.itemData);
this.tasks.splice(fromIndex, 1);
this.tasks.splice(toIndex, 0, e.itemData);
}
}
@NgModule({
imports: [
BrowserModule,
DxDataGridModule,
DxCheckBoxModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
platformBrowserDynamic().bootstrapModule(AppModule);
.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;
}
import { Injectable } from '@angular/core';
export class Task {
ID: number;
Subject: string;
Status: number;
Owner: number;
AssignedEmployee: Array<number>;
OrderIndex: number;
Priority: number;
}
export class Employee {
ID: number;
FullName: string;
Department: string;
Title: string;
}
export class Status {
id: number;
name: string;
}
let 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",
}],
statuses = [{
id: 1, name: "Not Started"
}, {
id: 2, name: "In Progress"
}, {
id: 3, name: "Deferred"
}, {
id: 4, name: "Need Assistance"
}, {
id: 5, name: "Completed"
}],
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 Ommissions",
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
}];
@Injectable()
export class Service {
getTasks(): Task[] {
return tasks;
}
getEmployees(): Employee[] {
return employees;
}
getStatuses(): Status[] {
return statuses;
}
}
// In real applications, you should not transpile code in the browser. You can see how to create your own application with Angular and DevExtreme here:
// https://js.devexpress.com/Documentation/Guide/Angular_Components/Getting_Started/Create_a_DevExtreme_Application/
System.config({
transpiler: 'ts',
typescriptOptions: {
module: "system",
emitDecoratorMetadata: true,
experimentalDecorators: true
},
meta: {
'typescript': {
"exports": "ts"
},
'devextreme/localization.js': {
"esModule": true
}
},
paths: {
'npm:': 'https://unpkg.com/'
},
map: {
'ts': 'npm:plugin-typescript@8.0.0/lib/plugin.js',
'typescript': 'npm:typescript@3.5.3/lib/typescript.js',
'@angular': 'npm:@angular',
'tslib': 'npm:tslib@2.1.0/tslib.js',
'rxjs': 'npm:rxjs@6.4.0',
'rrule': 'npm:rrule@2.6.6/dist/es5/rrule.js',
'luxon': 'npm:luxon@1.25.0/build/global/luxon.min.js',
'es6-object-assign': 'npm:es6-object-assign@1.1.0',
'devextreme': 'npm:devextreme@20.2.5',
'jszip': 'npm:jszip@3.5.0/dist/jszip.min.js',
'devextreme-quill': 'npm:devextreme-quill@0.9.8/dist/dx-quill.min.js',
'devexpress-diagram': 'npm:devexpress-diagram@2.0.11',
'devexpress-gantt': 'npm:devexpress-gantt@2.0.18',
'devextreme-angular': 'npm:devextreme-angular@20.2.5',
'preact': 'npm:preact@10.5.11/dist/preact.js',
'preact/hooks': 'npm:preact@10.5.11/hooks/dist/hooks.js'
},
packages: {
'app': {
main: './app.component.ts',
defaultExtension: 'ts'
},
'devextreme': {
defaultExtension: 'js'
},
'devextreme/events/utils': {
main: 'index'
},
'devextreme/events': {
main: 'index'
},
'es6-object-assign': {
main: './index.js',
defaultExtension: 'js'
}
},
packageConfigPaths: [
"npm:@angular/*/package.json",
"npm:@angular/common/*/package.json",
"npm:rxjs/package.json",
"npm:rxjs/operators/package.json",
"npm:devextreme-angular/*/package.json",
"npm:devextreme-angular/ui/*/package.json",
"npm:devextreme-angular/package.json",
"npm:devexpress-diagram/package.json",
"npm:devexpress-gantt/package.json",
]
});
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<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=1.0" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.2.5/css/dx.common.css" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.2.5/css/dx.light.css" />
<script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script>
<script src="https://unpkg.com/zone.js@0.10.2/dist/zone.js"></script>
<script src="https://unpkg.com/reflect-metadata@0.1.3/Reflect.js"></script>
<script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></script>
<script src="config.js"></script>
<script>
System.import('app').catch(console.error.bind(console));
</script>
</head>
<body class="dx-viewport">
<div class="demo-container">
<demo-app>Loading...</demo-app>
</div>
</body>
</html>