JavaScript/jQuery Gantt - editing
The UI component allows users to add, modify and delete tasks, resources and dependencies. Set the enabled property to true to enable edit functionality.
jQuery
$(function() {
$("#gantt").dxGantt({
editing: {
enabled: true,
allowDependencyAdding: false,
allowDependencyDeleting: false,
allowResourceAdding: false,
allowResourceDeleting: false,
allowTaskAdding: false,
allowTaskDeleting: false,
allowTaskResourceUpdating: false,
allowTaskUpdating: false
}
});
}); Angular
<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
<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
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
@(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.
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:
See Also
allowDependencyDeleting
Specifies whether a user can delete dependencies.
Select a dependency and click Delete to delete this dependency.
The widget displays a delete confirmation message when you want to remove a dependency.
See Also
allowResourceAdding
Click the "Edit Resources" button in the "Task Details" dialog window to modify the list of available resources.
Set the allowResourceAdding option to false to disable the Add button in the "Resource Manager" dialog.
Note that you cannot open the "Resource Manager" dialog if the allowResourceAdding and allowResourceDeleting options are set to false.
jQuery
$(function() {
$("#gantt").dxGantt({
editing: {
allowResourceAdding: false,
allowResourceDeleting: false,
//...
}
});
}); See Also
allowResourceDeleting
Specifies whether a user can delete resources.
Click the "Edit Resources" button in the "Task Details" dialog window to modify the list of available resources.
Set the allowResourceDeleting option to false to disable the Delete button in the "Resource Manager" dialog.
Note that you cannot open the "Resource Manager" dialog if the allowResourceDeleting and allowResourceAdding options are set to false.
jQuery
$(function() {
$("#gantt").dxGantt({
editing: {
allowResourceAdding: false,
allowResourceDeleting: false,
//...
}
});
}); See Also
allowTaskAdding
Specifies whether a user can add tasks.
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.
"New Task" - Appends a new task at the same level as the selected cell/task.
"New Subtask" - Adds a child task to the selected cell/task.
See Also
allowTaskDeleting
Specifies whether a user can delete tasks.
Right-click a task and select the 'Delete Task' context menu item to remove a task.
The alert message notifies users that deleting a task creates a gap in the workflow between the preceding and subsequent tasks.
See Also
allowTaskResourceUpdating
Specifies whether users can update a task's resources.
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.
Note that you can assign multiple resources to a task.
Click the cross icon (on the right side of the resource) to remove the resource from the task.
See Also
allowTaskUpdating
Specifies whether a user can update tasks.
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.
Set the allowTaskUpdating option to false to make the "Task Details" dialog read-only.
