Vue Gantt - resourceAssignments

Configures resource assignments.

Selector: DxResourceAssignments

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.

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 },
        // ...
    }
    // ...
}