UI for changing Chart Elements

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.

to top

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:

to top

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:

to top

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:

<anygantt>
  
<settings>
    
<editing allow_edit="True" />
  
</settings>
</anygantt>

to top

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:

<anygantt>
  
<project_chart>
    
<tasks>
      
<task id="id01" allow_edit="False" />
      
<task id="id02" />
      
<task id="id03" />
    
</tasks>
  
</project_chart>
</anygantt>

Resource chart:

<anygantt>
  
<resource_chart>
    
<periods>
      
<period id="id01" allow_edit="False" />
      
<period id="id02" allow_edit="True" />
      
<period id="id03" />
    
</periods>
  
</resource_chart>
</anygantt>

to top

Rounding settings

You can define the precision of tasks or periods movement and progress change using rounding settings in editing node:

<anygantt>
  
<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.

to top

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:

to top

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:

to top