10. Run external drag

Dragging runs from outside, add boxes on demand, mark actual time and other features

• Dragging run from outside

  
  In the outside html tag that represents the run define standard HTML event onmousedown / ontouchstart and call here

  DragGanttRunByMouse

  API method with parameters as the dragged tag, the mouse event and the GanttRun that will be created in the Gantt for this tag on drop.
  
  In this example the DragGanttRunByMouse is called from function DownBox that is called from onmousedown of the four HTML tags (Task A / B / C / D) in bottom toolbar.
  

• Show and move actual time in Gantt

  
  The actual time can be shown in Gantt char by

  GanttMark

  attribute. The GanttMark can be set also dynamically in OnReady API event.
  The GanttMark can be defined as vertical line just for actual time or as rectangle from the Gantt start to actual time to e.g. gray out the elapsed time like this example.
  In header the actual time can be marked by

  OnGetGanttHeader

  API event.
  
  This example sets the GanttMark from Gantt start to actual time with suffix "#20" that is styled by CSS class .GSGanttMark20 to gray out elapsed time.
  This example sets the GanttMark in function UpdateNow that is called every 15 seconds to update the actual time per minute. The interval and first call is set in API event OnReady.
  This example just for demonstration sets actual time always to "10/1/2022 11:35" and moves the time more quickly, see the script line in UpdateNow() marked by @@@ comment.
  

• Resize Gantt chart to the whole width

  
  To resize Gantt chart column to the whole available width it is not possible use RelWidth, but define

  GanttSize

  and

  GanttSizeFit

  attributes.
  
  This examples defines GanttSize to show always one day and sets GanttSizeFit = 2 to resize Gantt column if the available width is wider, but to not shrink the Gantt if the available width is narrover.
  To show next or previous day there are two buttons on bottom container (Previous day / Next day) that call custom function ZoomNext that shows next day by API method ScrollToDate.
  

• Load next Run boxes on demand

  
  To download and add new Run boxes to existing Gantt cells, return the <Changes> tag from server side with

  Update

  or

  ChangesUpdate

  value 512, with the rows and new runs.
  Or add new run boxes by API method

  AddGanttRun

  .
  
  This example simulates downloading new run boxes on day change in function ZoomNext by adding the new runs from generated XML added by AddDataFromServer API method.
  So every click to Next / Previous day button will download new random boxes in the first row, if the day is shown first time.
  

• Custom CSS styles for Run boxes

  
  This example defines striped background in the Gantt cell by CSS class .GSGantt.
  This example defines custom CSS classes that are assigned to the Run boxes by Class attribute: "OrangeStripes" = .GSGanttOrangeStripesIn, "SingleIcon" = .GSGanttSingleIconIn, "LeftIcon" = .GSGanttLeftIconIn.