html5 gantt progressive task rendering

The Gantt chart component is optimized for displaying large data sets. It allows rendering the tasks (rows and boxes) to be rendered progressively during scrolling.

Progressive Task Box Rendering

Progressive task box rendering is enabled by default (ProgressiveTaskRendering property).

You can configure the behavior:

  • ProgressiveTaskRendering - enables/disables progressive rendering (enabled by default).
  • ProgressiveTaskRenderingCacheSize - 
  • ProgressiveTaskRenderingCacheSweeping
  • ProgressiveTaskRenderingMargin

The oldest task boxes outside of the viewport will be removed from the DOM is ProgressiveTaskRenderingCacheSweeping is enabled.

The task boxes in the current viewport + margin (ProgressiveTaskRenderingMargin) + the number specified using ProgressiveTaskRenderingCacheSize will stay in the DOM.

Progressive Row Rendering

See progressive row rendering.

JavaScript

Demo: