JavaScript/jQuery Gantt - resourceAssignments
Type:
Default Value: null
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
jQuery
index.js
data.js
$(function() {
$("#gantt").dxGantt({
resourceAssignments: {
dataSource: resourceAssignments,
keyExpr: "key",
resourceIdExpr: "resourceKey",
taskIdExpr: "taskKey"
},
//...
});
});
var resourceAssignments = [{
'key': 0,
'taskKey': 3,
'resourceKey': 1
},
// ...
]; Angular
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"
],
...
},
...
},
...
}
},
...
},
...
}Vue
App.vue
data.js
<template>
<DxGantt ... >
<DxResourceAssignments
:data-source="resourceAssignments"
key-expr="key"
resource-id-expr="resourceKey"
task-id-expr="taskKey" />
<!-- ... -->
</DxGantt>
</template>
<script>
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';
import 'devexpress-gantt/dist/dx-gantt.css';
import {
DxGantt,
DxResourceAssignments,
//...
} from 'devextreme-vue/gantt';
import {
resourceAssignments,
// ...
} from './data.js';
export default {
components: {
DxGantt,
DxResourceAssignments,
//...
},
data() {
return {
resourceAssignments,
//...
};
}
};
</script>
export const resourceAssignments = [{
'key': 0,
'taskKey': 3,
'resourceKey': 1
},
// ...
];React
App.js
data.js
import React from 'react';
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';
import 'devexpress-gantt/dist/dx-gantt.css';
import Gantt, {
ResourceAssignments,
//...
} from 'devextreme-react/gantt';
import {
resourceAssignments,
//...
} from './data.js';
class App extends React.Component {
render() {
return (
<Gantt ... >
<ResourceAssignments
dataSource={resourceAssignments}
keyExpr="key"
resourceIdExpr="resourceKey"
taskIdExpr="taskKey" />
</Gantt>
);
}
}
export default App;
export const resourceAssignments = [{
'key': 0,
'taskKey': 3,
'resourceKey': 1
},
// ...
];dataSource
Default Value: null
Refer to the resourceAssignments property to see how to specify the dataSource property.
resourceIdExpr
Refer to the resourceAssignments property to see how to specify the resourceIdExpr property.
Feedback