Angular Gantt - editing

Configures edit properties.

Selector: dxo-editing
Type:

Object

The UI component allows users to add, modify and delete tasks, resources and dependencies. Set the enabled property to true to enable edit functionality.

NOTE
Make sure that your data sources (tasks, resources and dependencies) support edit actions.

View Demo

jQuery
index.js
$(function() {
    $("#gantt").dxGantt({
        editing: {
            enabled: true,
            allowDependencyAdding: false, 
            allowDependencyDeleting: false, 
            allowResourceAdding: false, 
            allowResourceDeleting: false, 
            allowTaskAdding: false, 
            allowTaskDeleting: false, 
            allowTaskResourceUpdating: false, 
            allowTaskUpdating: false
        }
    });
}); 
Angular
app.component.html
app.component.ts
app.module.ts
<dx-gantt ... >
    <dxo-editing
        [enabled]="true" 
        [allowDependencyAdding]="false" 
        [allowDependencyDeleting]="false" 
        [allowResourceAdding]="false"
        [allowResourceDeleting]="false"
        [allowTaskAdding]="false"
        [allowTaskDeleting]="false"
        [allowTaskResourceUpdating]="false"
        [allowTaskUpdating]="false">
    </dxo-editing>
    <!-- ... -->
</dx-gantt>
import { Component } from '@angular/core';

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

export class AppComponent {
    // ...      
}
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { DxGanttModule } from 'devextreme-angular';

@NgModule({
    imports: [
        BrowserModule,
        DxGanttModule
    ],        
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }
Vue
App.vue
<template>
    <DxGantt ... >
        <DxEditing
            :enabled="true"
            :allow-dependency-adding="false" 
            :allow-dependency-deleting="false" 
            :allow-resource-adding="false"
            :allow-resource-deleting="false"
            :allow-task-adding="false"
            :allow-task-deleting="false"
            :allow-task-resource-updating="false"
            :allow-task-updating="false"
         />
        <!-- ... -->
    </DxGantt>
</template>
<script>
    import 'devextreme/dist/css/dx.light.css';
    import 'devexpress-gantt/dist/dx-gantt.css'; 

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

    export default {
        components: { 
            DxGantt, 
            DxEditing, 
            // ... 
        }
    };
</script>
React
App.js
import React from 'react';

import 'devextreme/dist/css/dx.light.css';
import 'devexpress-gantt/dist/dx-gantt.css'; 

import Gantt, { 
    Editing, 
    // ... 
} from 'devextreme-react/gantt';

const App = () => {
    return (
        <Gantt ... >
            <Editing 
                enabled={true}
                allowDependencyAdding={false}
                allowDependencyDeleting={false}
                allowResourceAdding={false}
                allowResourceDeleting={false}
                allowTaskAdding={false}
                allowTaskDeleting={false}
                allowTaskResourceUpdating={false}
                allowTaskUpdating={false} />
            {/* ... */}
        </Gantt>
    );
};

export default App;
ASP.NET Core Controls
Razor C#
@(Html.DevExtreme().Gantt()
    .Editing(e => {
        e.Enabled(true)
        e.AllowDependencyAdding(false)
        e.AllowDependencyDeleting(false)
        e.AllowResourceAdding(false)
        e.AllowResourceDeleting(false)
        e.AllowTaskAdding(false)
        e.AllowTaskDeleting(false)
        e.AllowTaskResourceUpdating(false)
        e.AllowTaskUpdating(false)
    })
    // ...
)
See Also

allowDependencyAdding

Specifies whether a user can add dependencies.

Type:

Boolean

Default Value: true

DevExtreme Gantt - Dependency

To add a dependency between two tasks, use the insertDependency method or move the mouse pointer over the preceding task's edge (marked with a circle) and drag the connector to the edge of the next task.

"Finish-To-Start" dependency between tasks:

DevExtreme Gantt - Insert Dependency

See Also

allowDependencyDeleting

Specifies whether a user can delete dependencies.

Type:

Boolean

Default Value: true

DevExtreme Gantt - Dependency

Select a dependency and click Delete to delete this dependency.

DevExtreme Gantt - Delete Dependency

The widget displays a delete confirmation message when you want to remove a dependency.

[DevExtreme Gantt - Confirm Dependency Deletion

See Also

allowResourceAdding

Specifies whether a user can add resources. tasks.

Type:

Boolean

Default Value: true

DevExtreme Gantt Chart - Task Resources

Click the "Edit Resources" button in the "Task Details" dialog window to modify the list of available resources.

DevExtreme Gantt Chart - Open Resource Manager

DevExtreme Gantt Chart - Resource Manager

Set the allowResourceAdding option to false to disable the Add button in the "Resource Manager" dialog.

DevExtreme Gantt Chart - Resource Manager

Note that you cannot open the "Resource Manager" dialog if the allowResourceAdding and allowResourceDeleting options are set to false.

DevExtreme Gantt Chart - Disabled Resource Manager

jQuery
index.js
$(function() {
    $("#gantt").dxGantt({
        editing: {
            allowResourceAdding: false, 
            allowResourceDeleting: false, 
            //...
        }
    });
}); 
See Also

allowResourceDeleting

Specifies whether a user can delete resources.

Type:

Boolean

Default Value: true

DevExtreme Gantt Chart - Task Resources

Click the "Edit Resources" button in the "Task Details" dialog window to modify the list of available resources.

DevExtreme Gantt Chart - Edit Task Resources

DevExtreme Gantt Chart - Resource Manager

Set the allowResourceDeleting option to false to disable the Delete button in the "Resource Manager" dialog.

DevExtreme Gantt Chart - Resource Manager

Note that you cannot open the "Resource Manager" dialog if the allowResourceDeleting and allowResourceAdding options are set to false.

DevExtreme Gantt Chart - Disabled Resource Manager

jQuery
index.js
$(function() {
    $("#gantt").dxGantt({
        editing: {
            allowResourceAdding: false, 
            allowResourceDeleting: false, 
            //...
        }
    });
}); 
See Also

allowResourceUpdating

For internal use only.

Type:

Boolean

Default Value: true

allowTaskAdding

Specifies whether a user can add tasks.

Type:

Boolean

Default Value: true

Right-click a task or a cell in the Gantt chart and select the "Add" context menu item to add a new task or subtask.

DevExtreme Gantt Chart - Add Tasks

  • "New Task" - Appends a new task at the same level as the selected cell/task.

    DevExtreme Gantt Chart - Add Task

  • "New Subtask" - Adds a child task to the selected cell/task.

    DevExtreme Gantt Chart - Add Subtask

See Also

allowTaskDeleting

Specifies whether a user can delete tasks.

Type:

Boolean

Default Value: true

Right-click a task and select the 'Delete Task' context menu item to remove a task.

DevExtreme Gantt Chart - Delete Task

The alert message notifies users that deleting a task creates a gap in the workflow between the preceding and subsequent tasks.

DevExtreme Gantt Chart - Delete Task Confirmation

See Also

allowTaskResourceUpdating

Specifies whether users can update a task's resources.

Type:

Boolean

Default Value: true

Double-click a task or use the context menu to open the "Task Details" dialog window to manage resources. Click the "Resources" field to open a drop-down list with the available resources. Select a resource to link it to the edited task.

DevExtreme Gantt Chart - Assign Resources to Task

Note that you can assign multiple resources to a task.

DevExtreme Gantt Chart - Assign Multiple Resources to Task

Click the cross icon (on the right side of the resource) to remove the resource from the task.

DevExtreme Gantt Chart - Remove Resources from Task

See Also

allowTaskUpdating

Specifies whether a user can update tasks.

Type:

Boolean

Default Value: true

Use the "Task Details" context menu item (or double-click a task in the chart area) to invoke the popup edit form that also provides access to the "Resource Manager" dialog. Then, click OK to get task values from the edit form and save them to the database.

DevExtreme Gantt Chart - Task Details

Set the allowTaskUpdating option to false to make the "Task Details" dialog read-only.

DevExtreme Gantt - Read-Only Task Details Dialog

See Also

enabled

Specifies whether a user can edit tasks, resources and dependencies.

Type:

Boolean

Default Value: false