Virtual Scroll support in Gantt allows you to load large amount of data without performance degradation. To enable Virtual Scrolling, you need to inject VirtualScroll
module in Gantt.
Row virtualization allows you to load and render a large number of tasks in Gantt with effective performance. In this mode, all tasks are fetched initially from the datasource and rendered in the DOM within a compact viewport area.
The number of records displayed in the Gantt is determined by the height.
This mode can be enable by setting the EnableVirtualization
property to true
.
@(Html.EJS().Gantt("VirtualScroll").DataSource((IEnumerable<object>)ViewBag.DataSource).Height("450px").EnableVirtualization(true).HighlightWeekends(true).AllowSelection(true)
.TaskFields(ts => ts.Id("TaskId").Name("TaskName").StartDate("StartDate").EndDate("EndDate").Duration("Duration").Progress("Progress")
.Child("SubTasks").ParentID("ParentID"))
.LabelSettings(ls=>ls.TaskLabel("Progress")).Columns(col =>
{
col.Field("TaskId").Width(140).Add();
col.Field("TaskName").Width(250).Add();
col.Field("StartDate").Add();
col.Field("EndDate").Add();
col.Field("Duration").Add();
col.Field("Progress").Add();
}).SplitterSettings(ss => ss.ColumnIndex(2))
.Render()
)
public IActionResult Index()
{
ViewBag.dataSource = GanttData.VirtualData();
return View();
}
Height
property.