Vue Gantt - resources
Configures task resources.
You can add resources to a project and assign them to tasks. Resources can be people responsible for tasks, equipment, materials, etc. The Gantt displays resources as labels on the right of the tasks.
Use the dataSource option to bind the widget to a data source, which contains resources. If the field names in your data source differ from the 'id' and 'text' default names, use the keyExpr and/or textExpr options to map data fields.
See Also
jQuery
$(function() { $("#gantt").dxGantt({ resources: { dataSource: resources, keyExpr: "resourceId", textExpr: "title" }, //... }); });
var resources = [{ 'resourceId': 1, 'title': 'Management' }, // ... ];
Angular
<dx-gantt ... > <dxo-resources [dataSource]="resources" keyExpr="resourceId" textExpr="title"> </dxo-resources> <!-- ... --> </dx-gantt>
import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { resources: Resource[]; // ... constructor(service: Service) { this.resources = service.getResources(); // ... } }
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import { DxGanttModule } from 'devextreme-angular'; import { Service, Resource, ... } from './app.service'; @NgModule({ imports: [ BrowserModule, DxGanttModule ], providers: [Service], declarations: [AppComponent], bootstrap: [AppComponent] }) export class AppModule { }
import { Injectable } from '@angular/core'; export class Resource { id: number; text: string; } const resources: Resource[] = [{ 'resourceId': 1, 'title': 'Management' }, // ... ]; @Injectable() export class Service { getResources(): Resource[] { return resources; } }
Vue
<template> <DxGantt ... > <DxResources :data-source="resources" key-expr="resourceId" text-expr="title" /> <!-- ... --> </DxGantt> </template> <script> import 'devextreme/dist/css/dx.common.css'; import 'devextreme/dist/css/dx.light.css'; import { DxGantt, DxResources, // ... } from 'devextreme-vue/gantt'; import { resources, // ... } from './data.js'; export default { components: { DxGantt, DxResources, // ... }, data() { return { resources, // ... }; } }; </script>
export const resources = [{ 'resourceId': 1, 'title': 'Management' }, // ... ];
React
import React from 'react'; import 'devextreme/dist/css/dx.common.css'; import 'devextreme/dist/css/dx.light.css'; import Gantt, { Resources, // ... } from 'devextreme-react/gantt'; import { resources, // ... } from './data.js'; class App extends React.Component { render() { return ( <Gantt ... > <Resources dataSource={resources} keyExpr="resourceId" textExpr="title" /> {/* ... */} </Gantt> ); } } export default App;
export const resources = [{ 'resourceId': 1, 'title': 'Management' }, // ... ];
dataSource
Binds the widget to the data source, which contains resources.
Refer to the resources option to see how to specify the dataSource option.
keyExpr
Specifies the data field that provides keys for resources.
Refer to the resources option to see how to specify the keyExpr option.
textExpr
Specifies the data field that provides resource texts.
Refer to the resources option to see how to specify the textExpr option.
If you have technical questions, please create a support ticket in the DevExpress Support Center.