Loading Animation in gantt

30 Dec 20221 minute to read

The loading indicator is used to display a visual indicator while the Gantt is fetching data or performing certain actions, such as sorting or filtering. The gantt support two indicator types, which is achieved by setting the loadingIndicator.indicatorType property to Shimmer or Spinner. The default value of the indicator type is “Spinner.”

In the following sample, the Shimmer indicator is displayed while the gantt is scrolled when using the virtual data.

CSHTML

@(Html.EJS().Gantt("LoadingAnimation").DataSource((IEnumerable<object>)ViewBag.DataSource).AllowSorting(true).AllowFiltering(true).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")).LoadingIndicator(l => { l.IndicatorType(Syncfusion.EJ2.Grids.IndicatorType.Shimmer); }
            .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()
        )

Loading-animation.cs

public IActionResult Index()
        {
            ViewBag.dataSource = GanttData.VirtualData();
            return View();
        }