UI for changing Chart Elements
- Overview
- Project Chart
- Resource Chart
- How to enable UI based elements editing
- Rounding configuration
- JavaScript Events
Overview
With AnyGantt you can create application that allow user to change task or periods in real-time, this can be done either via JavaScript as described in Changing Chart Elements from JavaScript article, or give user the ability to drag elements on the plot: change their start, end and progress value.
Project Chart
When working with project chart you can change task start, end and progress of the task.
Changing the start of the task: | ![]() |
Changing the end of the task: | ![]() |
Moving the task: | ![]() |
Changing task progress: | ![]() |
Moving the milestone: | ![]() |
Resource Chart
When working with resource chart you can change period start and end:
Changing the start of the period: | ![]() |
Changing the end of the period: | ![]() |
Moving the period: | ![]() |
How to enable UI based elements editing
You can enable UI based editing of task/periods for all elements at once, or only for some elements.
Global settings
By default UI based editing is turned off, to enable it you should set the following in XML:
<settings>
<editing allow_edit="True" />
</settings>
</anygantt>
Individual settings
If editing is turned off in editing node you can't enable individual elements editing, but if it is turned on - you can define for each element whether it is editable or not.
Project chart:
<project_chart>
<tasks>
<task id="id01" allow_edit="False" />
<task id="id02" />
<task id="id03" />
</tasks>
</project_chart>
</anygantt>
Resource chart:
<resource_chart>
<periods>
<period id="id01" allow_edit="False" />
<period id="id02" allow_edit="True" />
<period id="id03" />
</periods>
</resource_chart>
</anygantt>
Rounding settings
You can define the precision of tasks or periods movement and progress change using rounding settings in editing node:
<settings>
<editing allow_edit="true">
<rounding>
<progress step="0.25" />
<date unit="Day" step="1" />
</rounding>
</editing>
</settings>
</anygantt>
unit attribute can be: Second, Minute, Hour, Day, Week, Decade, Month, Quarter, Semester, Year and Day is the default value.
JavaScript Events
When user changes the tasks or periods AnyGantt dispatches events, so you can handle them and make appropriate actions in your application.
Project Chart Events
Event Type | Description |
---|---|
taskEditingBegin | Dispatched when editing starts. |
taskEditingProcess | Dispatched during editing. |
taskEditingEnd | Dispatched when editing ends. |
Event returns the object of the following structure:
Property | Description |
---|---|
id | id of a task being edited. |
editingTarget | Enum, which describes what is edited: targetStart - task start, targetEnd - task end, targetMove - both start and end, targetProgress - progress bar is changed. |
To get data about new values please use getTaskInfo function as described at:
The sample below shows how events are handled and data about tasks can be obtained:
Resource Chart Events
Event Type | Description |
---|---|
periodEditingBegin | Dispatched when editing starts. |
periodEditingProcess | Dispatched during editing. |
periodEditingEnd | Dispatched when editing ends. |
Event returns the object of the following structure:
Property | Description |
---|---|
id | edited period id |
editingTarget | Enum, which describes what is edited:
targetStart - period start, targetEnd - period end, targetMove- both start and end. |
To get data about new values please use getPeriodInfo function as described at:
The sample below shows how events are handled and data about periods can be obtained: