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
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

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

Type:

Array<Object>

|

DataSource

|

DataSource Configuration

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.