Vue Gantt - tasks

Configures tasks.

Selector: DxTasks

Type:

Default Value: null

DevExtreme Gantt Chart - Tasks

Use the dataSource property to bind the UI component to a data source, which contains tasks. If the field names in your data source differ from default names ('id', 'parentId', 'title', 'start', 'end', 'progress', 'color'), use appropriate properties (keyExpr, parentIdExpr, etc.) to map data fields.

NOTE

The 'id' and 'parentId' fields should not have the same value.

jQuery

index.js

data.js

$(function() {
    $("#gantt").dxGantt({
        tasks: {
            dataSource: tasks,
            keyExpr: "taskId", 
            parentIdExpr: "parentTaskId",
            titleExpr: "taskTitle",
            progressExpr: "taskProgress",
            startExpr: "startDate",
            endExpr: "endDate",
            colorExpr: "taskColor"
        },
        //...
    });
});

var tasks = [{
    'taskId': 1,
    'parentTaskId': 0,
    'taskTitle': 'Software Development',
    'startDate': new Date('2019-02-21T05:00:00.000Z'),
    'endDate': new Date('2019-07-04T12:00:00.000Z'),
    'taskProgress': 31
    'taskColor': 'red'
},
// ...
];

Angular

app.component.html

app.component.ts

app.module.ts

app.service.ts

angular.json

<dx-gantt ... >
    <dxo-tasks 
        [dataSource]="tasks" 
        keyExpr="taskId"
        parentIdExpr="parentTaskId"
        titleExpr="taskTitle"
        progressExpr="taskProgress"
        startExpr="startDate"
        endExpr="endDate"
        colorExpr="taskColor" >
    </dxo-tasks>
    <!-- ... -->
</dx-gantt>

import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})

export class AppComponent {
    tasks: Task[];
    // ...
    constructor(service: Service) {
        this.tasks = service.getTasks();
        // ...
    }        
}

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { DxGanttModule } from 'devextreme-angular';
import { Service, Task, ... } from './app.service';

@NgModule({
    imports: [
        BrowserModule,
        DxGanttModule
    ],
    providers: [Service],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }

import { Injectable } from '@angular/core';

export class Task {
    taskId: number;
    parentTaskId: number;
    taskTitle: string;
    startDate: Date;
    endDate: Date;
    taskProgress: number;
    taskColor: string;
}

const tasks: Task[] = [{
    'taskId': 1,
    'parentTaskId': 0,
    'taskTitle': 'Software Development',
    'startDate': new Date('2019-02-21T05:00:00.000Z'),
    'endDate': new Date('2019-07-04T12:00:00.000Z'),
    'taskProgress': 31,
    'taskColor': 'red'
},
// ...   
]; 
@Injectable()
export class Service {
    getTasks(): Task[] {
        return tasks;
    }
}

{
  "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 ... >        
        <DxTasks
            :data-source="tasks"
            key-expr="taskId"
            parent-id-expr="parentTaskId"
            title-expr="taskTitle"
            progress-expr="taskProgress"
            start-expr="startDate"
            end-expr="endDate"
            color-expr="taskColor" />
        <!-- ... -->
    </DxGantt>
</template>
<script>
    import 'devextreme/dist/css/dx.light.css';
    import 'devexpress-gantt/dist/dx-gantt.css'; 

    import { 
        DxGantt, 
        DxTasks, 
        // ... 
    } from 'devextreme-vue/gantt';

    import { 
        tasks, 
        // ... 
    } from './data.js';

    export default {
        components: { 
            DxGantt, 
            DxTasks, 
            // ... 
        },
        data() {
            return { 
                tasks, 
                // ... 
            };
        }
    };
</script>

export const tasks = [{
    'taskId': 1,
    'parentTaskId': 0,
    'taskTitle': 'Software Development',
    'startDate': new Date('2019-02-21T05:00:00.000Z'),
    'endDate': new Date('2019-07-04T12:00:00.000Z'),
    'taskProgress': 31,
    'taskColor': 'red'
},
// ...
];

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, { 
    Tasks, 
    // ... 
} from 'devextreme-react/gantt';
import { 
    tasks, 
    // ... 
} from './data.js';

const App = () => {
    return (
        <Gantt ... >
            <Tasks 
                dataSource={tasks}
                keyExpr="taskId"
                parentIdExpr="parentTaskId"
                titleExpr="taskTitle"
                progressExpr="taskProgress"
                startExpr="startDate"
                endExpr="endDate"
                colorExpr="taskColor" />
            {/* ... */}
        </Gantt>
    );
};

export default App;

export const tasks = [{
    'taskId': 1,
    'parentTaskId': 0,
    'taskTitle': 'Software Development',
    'startDate': new Date('2019-02-21T05:00:00.000Z'),
    'endDate': new Date('2019-07-04T12:00:00.000Z'),
    'taskProgress': 31,
    'taskColor': 'red'
},
// ...
];

ASP.NET Core Controls

Razor C#

@(Html.DevExtreme().Gantt<Gantt.Task>()
    .Tasks(t => t
        .DataSource(ds => ds.Array().Data(SampleData.GanttTasks).Key("ID"))
        .KeyExpr("ID")
        .TitleExpr("Title")
        .ParentIdExpr("ParentId")
        .StartExpr("Start")
        .EndExpr("End")
        .ProgressExpr("Progress")
    )
    // ...
)
<!-- C# -->
public partial class SampleData {
    public static readonly IEnumerable<Task> GanttTasks = new[] {
        new Task {
            ID = 1,
            ParentId = 0,
            Title = "Software Development",
            Start = DateTime.Parse("2019-02-21T05:00:00.000Z"),
            End = DateTime.Parse("2019-07-04T12:00:00.000Z"),
            Progress = 31
        },        
        // ...
    }
    // ...
}

ASP.NET MVC Controls

Razor C#

@(Html.DevExtreme().Gantt<Gantt.Task>()
    .Tasks(t => t
        .DataSource(ds => ds.Array().Data(SampleData.GanttTasks).Key("ID"))
        .KeyExpr("ID")
        .TitleExpr("Title")
        .ParentIdExpr("ParentId")
        .StartExpr("Start")
        .EndExpr("End")
        .ProgressExpr("Progress")
    )
    // ...
)
<!-- C# -->
public partial class SampleData {
    public static readonly IEnumerable<Task> GanttTasks = new[] {
        new Task {
            ID = 1,
            ParentId = 0,
            Title = "Software Development",
            Start = DateTime.Parse("2019-02-21T05:00:00.000Z"),
            End = DateTime.Parse("2019-07-04T12:00:00.000Z"),
            Progress = 31
        },        
        // ...
    }
    // ...
}

colorExpr

Specifies the data field that provides tasks' color.

Selector: color-expr

Type:

String

|

Function

Default Value: 'color'

If the field name in your data source differs from default 'color', use this property to map data fields:

jQuery

index.js

data.js

$(function() {
    $("#gantt").dxGantt({
        tasks: {
            dataSource: tasks,
            // ...
            colorExpr: "taskColor"
        },
        //...
    });
});

var tasks = [{
    'taskId': 1,
    'parentTaskId': 0,
    'taskTitle': 'Software Development',
    'startDate': new Date('2019-02-21T05:00:00.000Z'),
    'endDate': new Date('2019-07-04T12:00:00.000Z'),
    'taskProgress': 31
    'taskColor': 'red'
},
// ...
];

Angular

app.component.html

app.service.ts

<dx-gantt ... >
    <dxo-tasks ...
        [dataSource]="tasks" 
        colorExpr="taskColor" >
    </dxo-tasks>
    <!-- ... -->
</dx-gantt>

import { Injectable } from '@angular/core';

export class Task {
    taskId: number;
    parentTaskId: number;
    taskTitle: string;
    startDate: Date;
    endDate: Date;
    taskProgress: number;
    taskColor: string;
}

const tasks: Task[] = [{
    'taskId': 1,
    'parentTaskId': 0,
    'taskTitle': 'Software Development',
    'startDate': new Date('2019-02-21T05:00:00.000Z'),
    'endDate': new Date('2019-07-04T12:00:00.000Z'),
    'taskProgress': 31,
    'taskColor': 'red'
},
// ...   
]; 
@Injectable()
export class Service {
    getTasks(): Task[] {
        return tasks;
    }
}

Vue

App.vue

data.js

<template>
    <DxGantt ... >        
        <DxTasks ...
            :data-source="tasks"
            color-expr="taskColor" />
        <!-- ... -->
    </DxGantt>
</template>
<script>
    // ...
</script>

export const tasks = [{
    'taskId': 1,
    'parentTaskId': 0,
    'taskTitle': 'Software Development',
    'startDate': new Date('2019-02-21T05:00:00.000Z'),
    'endDate': new Date('2019-07-04T12:00:00.000Z'),
    'taskProgress': 31,
    'taskColor': 'red'
},
// ...
];

React

App.js

data.js

// ...
const App = () => {
    return (
        <Gantt ... >
            <Tasks ...
                dataSource={tasks}
                colorExpr="taskColor" />
            {/* ... */}
        </Gantt>
    );
};

export default App;

export const tasks = [{
    'taskId': 1,
    'parentTaskId': 0,
    'taskTitle': 'Software Development',
    'startDate': new Date('2019-02-21T05:00:00.000Z'),
    'endDate': new Date('2019-07-04T12:00:00.000Z'),
    'taskProgress': 31,
    'taskColor': 'red'
},
// ...
];

dataSource

Binds the UI component to the data source which contains tasks.

Selector: data-source

Type:

Store

|

DataSource

|

DataSource Configuration

|

String

|

Array<any>

| null

Default Value: null

Refer to the tasks property to see how to specify the dataSource property.

endExpr

Specifies the data field that provides tasks' end dates.

Selector: end-expr

Type:

String

|

Function

Default Value: 'end'

If the field name in your data source differs from default 'end', use this property to map data fields:

jQuery

index.js

data.js

$(function() {
    $("#gantt").dxGantt({
        tasks: {
            dataSource: tasks,
            // ...
            endExpr: "endDate"
        },
        //...
    });
});

var tasks = [{
    'taskId': 1,
    'parentTaskId': 0,
    'taskTitle': 'Software Development',
    'startDate': new Date('2019-02-21T05:00:00.000Z'),
    'endDate': new Date('2019-07-04T12:00:00.000Z'),
    'taskProgress': 31
    'taskColor': 'red'
},
// ...
];

Angular

app.component.html

app.service.ts

<dx-gantt ... >
    <dxo-tasks ...
        [dataSource]="tasks" 
        endExpr="endDate" >
    </dxo-tasks>
    <!-- ... -->
</dx-gantt>

import { Injectable } from '@angular/core';

export class Task {
    taskId: number;
    parentTaskId: number;
    taskTitle: string;
    startDate: Date;
    endDate: Date;
    taskProgress: number;
    taskColor: string;
}

const tasks: Task[] = [{
    'taskId': 1,
    'parentTaskId': 0,
    'taskTitle': 'Software Development',
    'startDate': new Date('2019-02-21T05:00:00.000Z'),
    'endDate': new Date('2019-07-04T12:00:00.000Z'),
    'taskProgress': 31,
    'taskColor': 'red'
},
// ...   
]; 
@Injectable()
export class Service {
    getTasks(): Task[] {
        return tasks;
    }
}

Vue

App.vue

data.js

<template>
    <DxGantt ... >        
        <DxTasks ...
            :data-source="tasks"
            end-expr="endDate" />
        <!-- ... -->
    </DxGantt>
</template>
<script>
    // ...
</script>

export const tasks = [{
    'taskId': 1,
    'parentTaskId': 0,
    'taskTitle': 'Software Development',
    'startDate': new Date('2019-02-21T05:00:00.000Z'),
    'endDate': new Date('2019-07-04T12:00:00.000Z'),
    'taskProgress': 31,
    'taskColor': 'red'
},
// ...
];

React

App.js

data.js

// ...
const App = () => {
    return (
        <Gantt ... >
            <Tasks ...
                dataSource={tasks}
                endExpr="endDate" />
            {/* ... */}
        </Gantt>
    );
};

export default App;

export const tasks = [{
    'taskId': 1,
    'parentTaskId': 0,
    'taskTitle': 'Software Development',
    'startDate': new Date('2019-02-21T05:00:00.000Z'),
    'endDate': new Date('2019-07-04T12:00:00.000Z'),
    'taskProgress': 31,
    'taskColor': 'red'
},
// ...
];

keyExpr

Specifies the data field that provides keys for tasks.

Selector: key-expr

Type:

String

|

Function

Default Value: 'id'

If the field name in your data source differs from default 'id', use this property to map data fields:

jQuery

index.js

data.js

$(function() {
    $("#gantt").dxGantt({
        tasks: {
            dataSource: tasks,
            // ...
            keyExpr: "taskId"
        },
        //...
    });
});

var tasks = [{
    'taskId': 1,
    'parentTaskId': 0,
    'taskTitle': 'Software Development',
    'startDate': new Date('2019-02-21T05:00:00.000Z'),
    'endDate': new Date('2019-07-04T12:00:00.000Z'),
    'taskProgress': 31
    'taskColor': 'red'
},
// ...
];

Angular

app.component.html

app.service.ts

<dx-gantt ... >
    <dxo-tasks ...
        [dataSource]="tasks" 
        keyExpr="taskId" >
    </dxo-tasks>
    <!-- ... -->
</dx-gantt>

import { Injectable } from '@angular/core';

export class Task {
    taskId: number;
    parentTaskId: number;
    taskTitle: string;
    startDate: Date;
    endDate: Date;
    taskProgress: number;
    taskColor: string;
}

const tasks: Task[] = [{
    'taskId': 1,
    'parentTaskId': 0,
    'taskTitle': 'Software Development',
    'startDate': new Date('2019-02-21T05:00:00.000Z'),
    'endDate': new Date('2019-07-04T12:00:00.000Z'),
    'taskProgress': 31,
    'taskColor': 'red'
},
// ...   
]; 
@Injectable()
export class Service {
    getTasks(): Task[] {
        return tasks;
    }
}

Vue

App.vue

data.js

<template>
    <DxGantt ... >        
        <DxTasks ...
            :data-source="tasks"
            key-expr="taskId" />
        <!-- ... -->
    </DxGantt>
</template>
<script>
    // ...
</script>

export const tasks = [{
    'taskId': 1,
    'parentTaskId': 0,
    'taskTitle': 'Software Development',
    'startDate': new Date('2019-02-21T05:00:00.000Z'),
    'endDate': new Date('2019-07-04T12:00:00.000Z'),
    'taskProgress': 31,
    'taskColor': 'red'
},
// ...
];

React

App.js

data.js

// ...
const App = () => {
    return (
        <Gantt ... >
            <Tasks ...
                dataSource={tasks}
                keyExpr="taskId" />
            {/* ... */}
        </Gantt>
    );
};

export default App;

export const tasks = [{
    'taskId': 1,
    'parentTaskId': 0,
    'taskTitle': 'Software Development',
    'startDate': new Date('2019-02-21T05:00:00.000Z'),
    'endDate': new Date('2019-07-04T12:00:00.000Z'),
    'taskProgress': 31,
    'taskColor': 'red'
},
// ...
];

parentIdExpr

Specifies the data field that provides tasks' parent IDs.

Selector: parent-id-expr

Type:

String

|

Function

Default Value: 'parentId'

If the field name in your data source differs from default 'parentId', use this property to map data fields:

jQuery

index.js

data.js

$(function() {
    $("#gantt").dxGantt({
        tasks: {
            dataSource: tasks,
            // ...
            parentIdExpr: "parentTaskId"
        },
        //...
    });
});

var tasks = [{
    'taskId': 1,
    'parentTaskId': 0,
    'taskTitle': 'Software Development',
    'startDate': new Date('2019-02-21T05:00:00.000Z'),
    'endDate': new Date('2019-07-04T12:00:00.000Z'),
    'taskProgress': 31
    'taskColor': 'red'
},
// ...
];

Angular

app.component.html

app.service.ts

<dx-gantt ... >
    <dxo-tasks ...
        [dataSource]="tasks" 
        parentIdExpr="parentTaskId" >
    </dxo-tasks>
    <!-- ... -->
</dx-gantt>

import { Injectable } from '@angular/core';

export class Task {
    taskId: number;
    parentTaskId: number;
    taskTitle: string;
    startDate: Date;
    endDate: Date;
    taskProgress: number;
    taskColor: string;
}

const tasks: Task[] = [{
    'taskId': 1,
    'parentTaskId': 0,
    'taskTitle': 'Software Development',
    'startDate': new Date('2019-02-21T05:00:00.000Z'),
    'endDate': new Date('2019-07-04T12:00:00.000Z'),
    'taskProgress': 31,
    'taskColor': 'red'
},
// ...   
]; 
@Injectable()
export class Service {
    getTasks(): Task[] {
        return tasks;
    }
}

Vue

App.vue

data.js

<template>
    <DxGantt ... >        
        <DxTasks ...
            :data-source="tasks"
            parent-id-expr="parentTaskId" />
        <!-- ... -->
    </DxGantt>
</template>
<script>
    // ...
</script>

export const tasks = [{
    'taskId': 1,
    'parentTaskId': 0,
    'taskTitle': 'Software Development',
    'startDate': new Date('2019-02-21T05:00:00.000Z'),
    'endDate': new Date('2019-07-04T12:00:00.000Z'),
    'taskProgress': 31,
    'taskColor': 'red'
},
// ...
];

React

App.js

data.js

// ...
const App = () => {
    return (
        <Gantt ... >
            <Tasks ...
                dataSource={tasks}
                parentIdExpr="parentTaskId" />
            {/* ... */}
        </Gantt>
    );
};

export default App;

export const tasks = [{
    'taskId': 1,
    'parentTaskId': 0,
    'taskTitle': 'Software Development',
    'startDate': new Date('2019-02-21T05:00:00.000Z'),
    'endDate': new Date('2019-07-04T12:00:00.000Z'),
    'taskProgress': 31,
    'taskColor': 'red'
},
// ...
];

progressExpr

Specifies the data field that provides tasks' progress.

Selector: progress-expr

Type:

String

|

Function

Default Value: 'progress'

If the field name in your data source differs from default 'progress', use this property to map data fields:

jQuery

index.js

data.js

$(function() {
    $("#gantt").dxGantt({
        tasks: {
            dataSource: tasks,
            // ...
            progressExpr: "taskProgress"
        },
        //...
    });
});

var tasks = [{
    'taskId': 1,
    'parentTaskId': 0,
    'taskTitle': 'Software Development',
    'startDate': new Date('2019-02-21T05:00:00.000Z'),
    'endDate': new Date('2019-07-04T12:00:00.000Z'),
    'taskProgress': 31
    'taskColor': 'red'
},
// ...
];

Angular

app.component.html

app.service.ts

<dx-gantt ... >
    <dxo-tasks ...
        [dataSource]="tasks" 
        progressExpr="taskProgress" >
    </dxo-tasks>
    <!-- ... -->
</dx-gantt>

import { Injectable } from '@angular/core';

export class Task {
    taskId: number;
    parentTaskId: number;
    taskTitle: string;
    startDate: Date;
    endDate: Date;
    taskProgress: number;
    taskColor: string;
}

const tasks: Task[] = [{
    'taskId': 1,
    'parentTaskId': 0,
    'taskTitle': 'Software Development',
    'startDate': new Date('2019-02-21T05:00:00.000Z'),
    'endDate': new Date('2019-07-04T12:00:00.000Z'),
    'taskProgress': 31,
    'taskColor': 'red'
},
// ...   
]; 
@Injectable()
export class Service {
    getTasks(): Task[] {
        return tasks;
    }
}

Vue

App.vue

data.js

<template>
    <DxGantt ... >        
        <DxTasks ...
            :data-source="tasks"
            progress-expr="taskProgress" />
        <!-- ... -->
    </DxGantt>
</template>
<script>
    // ...
</script>

export const tasks = [{
    'taskId': 1,
    'parentTaskId': 0,
    'taskTitle': 'Software Development',
    'startDate': new Date('2019-02-21T05:00:00.000Z'),
    'endDate': new Date('2019-07-04T12:00:00.000Z'),
    'taskProgress': 31,
    'taskColor': 'red'
},
// ...
];

React

App.js

data.js

// ...
const App = () => {
    return (
        <Gantt ... >
            <Tasks ...
                dataSource={tasks}
                progressExpr="taskProgress" />
            {/* ... */}
        </Gantt>
    );
};

export default App;

export const tasks = [{
    'taskId': 1,
    'parentTaskId': 0,
    'taskTitle': 'Software Development',
    'startDate': new Date('2019-02-21T05:00:00.000Z'),
    'endDate': new Date('2019-07-04T12:00:00.000Z'),
    'taskProgress': 31,
    'taskColor': 'red'
},
// ...
];

startExpr

Specifies the data field that provides tasks' start dates.

Selector: start-expr

Type:

String

|

Function

Default Value: 'start'

If the field name in your data source differs from default 'start', use this property to map data fields:

jQuery

index.js

data.js

$(function() {
    $("#gantt").dxGantt({
        tasks: {
            dataSource: tasks,
            // ...
            startExpr: "startDate"
        },
        //...
    });
});

var tasks = [{
    'taskId': 1,
    'parentTaskId': 0,
    'taskTitle': 'Software Development',
    'startDate': new Date('2019-02-21T05:00:00.000Z'),
    'endDate': new Date('2019-07-04T12:00:00.000Z'),
    'taskProgress': 31
    'taskColor': 'red'
},
// ...
];

Angular

app.component.html

app.service.ts

<dx-gantt ... >
    <dxo-tasks ...
        [dataSource]="tasks" 
        startExpr="startDate" >
    </dxo-tasks>
    <!-- ... -->
</dx-gantt>

import { Injectable } from '@angular/core';

export class Task {
    taskId: number;
    parentTaskId: number;
    taskTitle: string;
    startDate: Date;
    endDate: Date;
    taskProgress: number;
    taskColor: string;
}

const tasks: Task[] = [{
    'taskId': 1,
    'parentTaskId': 0,
    'taskTitle': 'Software Development',
    'startDate': new Date('2019-02-21T05:00:00.000Z'),
    'endDate': new Date('2019-07-04T12:00:00.000Z'),
    'taskProgress': 31,
    'taskColor': 'red'
},
// ...   
]; 
@Injectable()
export class Service {
    getTasks(): Task[] {
        return tasks;
    }
}

Vue

App.vue

data.js

<template>
    <DxGantt ... >        
        <DxTasks ...
            :data-source="tasks"
            start-expr="startDate" />
        <!-- ... -->
    </DxGantt>
</template>
<script>
    // ...
</script>

export const tasks = [{
    'taskId': 1,
    'parentTaskId': 0,
    'taskTitle': 'Software Development',
    'startDate': new Date('2019-02-21T05:00:00.000Z'),
    'endDate': new Date('2019-07-04T12:00:00.000Z'),
    'taskProgress': 31,
    'taskColor': 'red'
},
// ...
];

React

App.js

data.js

// ...
const App = () => {
    return (
        <Gantt ... >
            <Tasks ...
                dataSource={tasks}
                startExpr="startDate" />
            {/* ... */}
        </Gantt>
    );
};

export default App;

export const tasks = [{
    'taskId': 1,
    'parentTaskId': 0,
    'taskTitle': 'Software Development',
    'startDate': new Date('2019-02-21T05:00:00.000Z'),
    'endDate': new Date('2019-07-04T12:00:00.000Z'),
    'taskProgress': 31,
    'taskColor': 'red'
},
// ...
];

titleExpr

Specifies the data field that provides task titles.

Selector: title-expr

Type:

String

|

Function

Default Value: 'title'

If the field name in your data source differs from default 'title', use this property to map data fields:

jQuery

index.js

data.js

$(function() {
    $("#gantt").dxGantt({
        tasks: {
            dataSource: tasks,
            // ...
            titleExpr: "taskTitle"
        },
        //...
    });
});

var tasks = [{
    'taskId': 1,
    'parentTaskId': 0,
    'taskTitle': 'Software Development',
    'startDate': new Date('2019-02-21T05:00:00.000Z'),
    'endDate': new Date('2019-07-04T12:00:00.000Z'),
    'taskProgress': 31
    'taskColor': 'red'
},
// ...
];

Angular

app.component.html

app.service.ts

<dx-gantt ... >
    <dxo-tasks ...
        [dataSource]="tasks" 
        titleExpr="taskTitle" >
    </dxo-tasks>
    <!-- ... -->
</dx-gantt>

import { Injectable } from '@angular/core';

export class Task {
    taskId: number;
    parentTaskId: number;
    taskTitle: string;
    startDate: Date;
    endDate: Date;
    taskProgress: number;
    taskColor: string;
}

const tasks: Task[] = [{
    'taskId': 1,
    'parentTaskId': 0,
    'taskTitle': 'Software Development',
    'startDate': new Date('2019-02-21T05:00:00.000Z'),
    'endDate': new Date('2019-07-04T12:00:00.000Z'),
    'taskProgress': 31,
    'taskColor': 'red'
},
// ...   
]; 
@Injectable()
export class Service {
    getTasks(): Task[] {
        return tasks;
    }
}

Vue

App.vue

data.js

<template>
    <DxGantt ... >        
        <DxTasks ...
            :data-source="tasks"
            title-expr="taskTitle" />
        <!-- ... -->
    </DxGantt>
</template>
<script>
    // ...
</script>

export const tasks = [{
    'taskId': 1,
    'parentTaskId': 0,
    'taskTitle': 'Software Development',
    'startDate': new Date('2019-02-21T05:00:00.000Z'),
    'endDate': new Date('2019-07-04T12:00:00.000Z'),
    'taskProgress': 31,
    'taskColor': 'red'
},
// ...
];

React

App.js

data.js

// ...
const App = () => {
    return (
        <Gantt ... >
            <Tasks ...
                dataSource={tasks}
                titleExpr="taskTitle" />
            {/* ... */}
        </Gantt>
    );
};

export default App;

export const tasks = [{
    'taskId': 1,
    'parentTaskId': 0,
    'taskTitle': 'Software Development',
    'startDate': new Date('2019-02-21T05:00:00.000Z'),
    'endDate': new Date('2019-07-04T12:00:00.000Z'),
    'taskProgress': 31,
    'taskColor': 'red'
},
// ...
];

Vue Gantt - tasks

jQuery

Angular

Vue

React

ASP.NET Core Controls

ASP.NET MVC Controls

See Also

colorExpr

jQuery

Angular

Vue

React

dataSource

endExpr

jQuery

Angular

Vue

React

keyExpr

jQuery

Angular

Vue

React

parentIdExpr

jQuery

Angular

Vue

React

progressExpr

jQuery

Angular

Vue

React

startExpr

jQuery

Angular

Vue

React

titleExpr

jQuery

Angular

Vue

React