JavaScript/jQuery Gantt - tasks

Configures tasks.

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.

The 'color' field accepts the following values:

Hexadecimal colors
RGB colors
RGBA colors
Predefined/cross-browser color names
Predefined SVG colors
Paint server address

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.

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.

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.

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.

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.

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.

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.

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.

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

General Information

.NET Subscription

Common Tools

Quality Assurance and Productivity

Desktop

Controls

Tools

Frameworks and Libraries

Web

Controls and Extensions

Tools

Maintenance Mode

Mobile

Enterprise and Analytic Tools

End-User Documentation

General Information

.NET Subscription

Common Tools

Quality Assurance and Productivity

Desktop

Controls

Tools

Frameworks and Libraries

Web

Controls and Extensions

Tools

Maintenance Mode

Mobile

Enterprise and Analytic Tools

End-User Documentation

JavaScript/jQuery 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