JavaScript/jQuery Gantt - resourceAssignments

Configures resource assignments.

Type:

Object

Default Value: null

View Demo

Resource assignments define relationship between tasks and resources.

Use the dataSource property to bind the UI component to a data source, which contains resource assignments. If the field names in your data source differ from the 'id', 'resourceId' and 'taskId' default names, use the keyExpr, resourceIdExpr and/or taskIdExpr properties to map data fields.

See Also
app.component.html
app.component.ts
app.module.ts
app.service.ts
angular.json
  • <dx-gantt ... >
  • <dxo-resource-assignments
  • [dataSource]="resourceAssignments"
  • keyExpr="key"
  • resourceIdExpr="resourceKey"
  • taskIdExpr="taskKey">
  • </dxo-resource-assignments>
  • <!-- ... -->
  • </dx-gantt>
  • import { Component } from '@angular/core';
  •  
  • @Component({
  • selector: 'app-root',
  • templateUrl: './app.component.html',
  • styleUrls: ['./app.component.css']
  • })
  •  
  • export class AppComponent {
  • resourceAssignments: ResourceAssignment[];
  • // ...
  •  
  • constructor(service: Service) {
  • this.resourceAssignments = service.getResourceAssignments();
  • // ...
  • }
  • }
  • import { BrowserModule } from '@angular/platform-browser';
  • import { NgModule } from '@angular/core';
  • import { AppComponent } from './app.component';
  • import { DxGanttModule } from 'devextreme-angular';
  • import { Service, ResourceAssignment, ... } from './app.service';
  •  
  • @NgModule({
  • imports: [
  • BrowserModule,
  • DxGanttModule
  • ],
  • declarations: [AppComponent],
  • bootstrap: [AppComponent]
  • })
  • export class AppModule { }
  • import { Injectable } from '@angular/core';
  •  
  • export class ResourceAssignment {
  • id: number;
  • taskId: number;
  • resourceId: number;
  • }
  •  
  • const resourceAssignments: ResourceAssignment[] = [{
  • 'key': 0,
  • 'taskKey': 3,
  • 'resourceKey': 1
  • },
  • // ...
  • ];
  • @Injectable()
  • export class Service {
  • getResourceAssignments(): ResourceAssignment[] {
  • return resourceAssignments;
  • }
  • }
  • {
  • "projects": {
  • "ProjectName": {
  • "architect": {
  • "build": {
  • "options": {
  • "styles": [
  • "node_modules/devextreme/dist/css/dx.common.css",
  • "node_modules/devextreme/dist/css/dx.light.css",
  • "node_modules/devexpress-gantt/dist/dx-gantt.css",
  • "src/styles.css"
  • ],
  • ...
  • },
  • ...
  • },
  • ...
  • }
  • },
  • ...
  • },
  • ...
  • }

dataSource

Binds the UI component to the data source, which contains resource assignments.

Default Value: null

Refer to the resourceAssignments property to see how to specify the dataSource property.

keyExpr

Specifies the data field that provides keys for resource assignments.

Type:

String

|

Function

Default Value: 'id'

Refer to the resourceAssignments property to see how to specify the keyExpr property.

resourceIdExpr

Specifies the data field that provides resource IDs.

Type:

String

|

Function

Default Value: 'resourceId'

Refer to the resourceAssignments property to see how to specify the resourceIdExpr property.

taskIdExpr

Specifies the data field that provides task IDs.

Type:

String

|

Function

Default Value: 'taskId'

Refer to the resourceAssignments property to see how to specify the taskIdExpr property.