JavaScript/jQuery Gantt - resourceAssignments
Configures resource assignments.
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.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.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.light.css';
import 'devexpress-gantt/dist/dx-gantt.css';
import Gantt, {
ResourceAssignments,
//...
} from 'devextreme-react/gantt';
import {
resourceAssignments,
//...
} from './data.js';
const App = () => {
return (
<Gantt ... >
<ResourceAssignments
dataSource={resourceAssignments}
keyExpr="key"
resourceIdExpr="resourceKey"
taskIdExpr="taskKey" />
</Gantt>
);
};
export default App;
export const resourceAssignments = [{
'key': 0,
'taskKey': 3,
'resourceKey': 1
},
// ...
];ASP.NET Core Controls
Razor C#
@(Html.DevExtreme().Gantt<Gantt.Task>()
.ResourceAssignments(ra => ra
.DataSource(ds => ds.Array().Data(SampleData.GanttResourceAssignments).Key("ID"))
.KeyExpr("ID")
.TaskIdExpr("TaskId")
.ResourceIdExpr("ResourceId")
)
// ...
)
<!-- C# -->
public partial class SampleData {
public static readonly IEnumerable<ResourceAssignment> GanttResourceAssignments = new[] {
new ResourceAssignment { ID = 0, TaskId = 3, ResourceId = 1 },
new ResourceAssignment { ID = 1, TaskId = 4, ResourceId = 1 },
// ...
}
// ...
}ASP.NET MVC Controls
Razor C#
@(Html.DevExtreme().Gantt<Gantt.Task>()
.ResourceAssignments(ra => ra
.DataSource(ds => ds.Array().Data(SampleData.GanttResourceAssignments).Key("ID"))
.KeyExpr("ID")
.TaskIdExpr("TaskId")
.ResourceIdExpr("ResourceId")
)
// ...
)
<!-- C# -->
public partial class SampleData {
public static readonly IEnumerable<ResourceAssignment> GanttResourceAssignments = new[] {
new ResourceAssignment { ID = 0, TaskId = 3, ResourceId = 1 },
new ResourceAssignment { ID = 1, TaskId = 4, ResourceId = 1 },
// ...
}
// ...
}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.
Refer to the resourceAssignments property to see how to specify the keyExpr property.
resourceIdExpr
Specifies the data field that provides resource IDs.
Refer to the resourceAssignments property to see how to specify the resourceIdExpr property.
taskIdExpr
Specifies the data field that provides task IDs.
Refer to the resourceAssignments property to see how to specify the taskIdExpr property.
Feedback