Data markers in ASP.NET MVC Gantt component

9 Jan 202311 minutes to read

Data markers are a set of events used to represent the schedule events for a task. Data markers are defined in data source as array of objects, and this value is mapped to the Gantt control using the taskFields.indicators property. You can represent more than one data marker in a task.

Data markers can be defined using the following properties:

  • date: Defines the date of indicator.
  • iconClass: Defines the icon class of indicator.
  • name: Defines the name of indicator.
  • tooltip: Defines the tooltip of indicator.

NOTE

Data Marker tooltip will be rendered only if tooltip property has value.

The following code example demonstrates how to implement data markers in the Gantt chart.

@Html.EJS().Gantt("Gantt").DataSource((IEnumerable<object>)ViewBag.DataSource).Height("450px").TaskFields(ts => ts.Id(
                "TaskID").Name("TaskName").StartDate("StartDate").Duration("Duration").Progress("Progress").Child("subtasks")
                ).Indicators("indicators").Render()
public IActionResult Index()
{
    ViewBag.DataSource = ganttData();
    return View();
}

public static List<GanttDataSource> ganttData()
        {
            List<GanttDataSource> GanttDataSourceCollection = new List<GanttDataSource>();

            List<IndicatorsData> Indicators = new List<IndicatorsData>();

            GanttDataSource Record1 = new GanttDataSource()
            {
                TaskId = 1,
                TaskName = "Project initiation",
                StartDate = new DateTime(2019, 04, 02),
                EndDate = new DateTime(2019, 04, 21),
                SubTasks = new List<GanttDataSource>(),
            };
            GanttDataSource Child1 = new GanttDataSource()
            {
                TaskId = 2,
                TaskName = "Identify site location",
                StartDate = new DateTime(2019, 04, 02),
                Duration = 4,
                Progress = 70,
                Indicators = new List<IndicatorsModel>() {
                    new IndicatorsModel() {date = "04/08/2019", iconClass="e-btn-icon e-notes-info e-icons e-icon-left e-gantt e-notes-info::before", name= "Custom String", tooltip="Follow up"},
                    new IndicatorsModel() {date = "04/11/2019", iconClass="e-btn-icon e-notes-info e-icons e-icon-left e-gantt e-notes-info::before", name= "<span style="color:red">String Template</span>"}
                }
            };
            GanttDataSource Child2 = new GanttDataSource()
            {
                TaskId = 3,
                TaskName = "Perform soil test",
                StartDate = new DateTime(2019, 04, 02),
                Duration = 4,
                Progress = 50

            };
            GanttDataSource Child3 = new GanttDataSource()
            {
                TaskId = 4,
                TaskName = "Soil test approval",
                StartDate = new DateTime(2019, 04, 02),
                Duration = 4,
                Progress = 50
            };
            Record1.SubTasks.Add(Child1);
            Record1.SubTasks.Add(Child2);
            Record1.SubTasks.Add(Child3);

            GanttDataSource Record2 = new GanttDataSource()
            {
                TaskId = 5,
                TaskName = "Project estimation",
                StartDate = new DateTime(2019, 04, 02),
                EndDate = new DateTime(2019, 04, 21),
                SubTasks = new List<GanttDataSource>()
            };
            GanttDataSource Child4 = new GanttDataSource()
            {
                TaskId = 6,
                TaskName = "Develop floor plan for estimation",
                StartDate = new DateTime(2019, 04, 04),
                Duration = 3,
                Progress = 70,
                Indicators = new List<IndicatorsModel>() {
                    new IndicatorsModel() {date = "04/10/2019", iconClass="e-btn-icon e-notes-info e-icons e-icon-left e-gantt e-notes-info::before", name= "Indicator title", tooltip="tooltip"}
                }
            };
            GanttDataSource Child5 = new GanttDataSource()
            {
                TaskId = 7,
                TaskName = "List materials",
                StartDate = new DateTime(2019, 04, 04),
                Duration = 3,
                Progress = 50
            };
            Record2.SubTasks.Add(Child4);
            Record2.SubTasks.Add(Child5);

            GanttDataSourceCollection.Add(Record1);
            GanttDataSourceCollection.Add(Record2);

            return GanttDataSourceCollection;
        }
		
		public class GanttDataSource
        {
            public int TaskId { get; set; }
            public string TaskName { get; set; }
            public DateTime StartDate { get; set; }
            public DateTime EndDate { get; set; }
            public int? Duration { get; set; }
            public int Progress { get; set; }
            public List<GanttDataSource> SubTasks { get; set; }
            public List<IndicatorsModel> Indicators { get; set; }
        }

        public class IndicatorsModel
        {
            public string date { get; set; }
            public string iconClass { get; set; }
            public string name { get; set; }
            public string tooltip { get; set; }
        }

Alt text