| name | syncfusion-aspnetcore-gantt-chart |
| description | Implement Syncfusion ASP.NET Core Gantt Chart component (EJ2) for project management and task scheduling. Use this when working with Gantt charts, project timelines, task dependencies, or resource allocation in ASP.NET Core applications (Tag Helper/Razor Pages/MVC). This skill covers data binding, task management, editing, filtering, export, and timeline customization. |
| metadata | {"author":"Syncfusion Inc","version":"33.1.44"} |
Syncfusion ASP.NET Core Gantt Chart
The Syncfusion EJ2 Gantt Chart for ASP.NET Core is a powerful project management component that visualizes project schedules, task dependencies, resource allocation, and timelines using Tag Helpers.
When to Use This Skill
Use this skill when you need to:
- Set up and render a Gantt Chart in an ASP.NET Core application
- Bind local or remote data to the Gantt control
- Configure task fields, columns, and the chart timeline
- Enable editing (cell, dialog, taskbar), manage tasks (add/delete/update)
- Define task dependencies (FS, SS, FF, SF) and predecessors
- Assign and display resources on tasks
- Filter, sort, search, or select rows/cells
- Export to Excel or PDF
- Customize the timeline, taskbars, labels, holidays, and event markers
- Configure task scheduling modes (Auto/Manual/Custom)
- Enable undo/redo, state persistence, virtual scrolling, or critical path
- Scroll the component, configure row height, or drag-and-drop rows
- Set timezone or localise the UI for different cultures and RTL languages
- Handle events (actionBegin, actionComplete, cellEdit) or call public methods programmatically
Documentation and Navigation Guide
Getting Started
๐ Read: references/getting-started.md
- NuGet package installation
- Tag Helper import & CDN setup
- Script manager registration
- First Gantt control (Index.cshtml + Controller)
- Mapping task fields & defining columns
- Enabling editing, filtering, sorting
Data Binding
๐ Read: references/data-binding.md
- Local hierarchical data binding
- Local flat/self-referential data binding
- Remote data (URL Adaptor, OData, Web API)
- Load on demand (lazy loading child records)
- DynamicObject and ExpandoObject binding
Columns
๐ Read: references/columns.md
- Defining columns and field mapping
- Custom column headers & header templates
- Column templates & value accessors
- Checkbox column, frozen columns
- Column reordering, resizing, spanning
- Responsive columns, WBS column, column menu
Managing Tasks (Editing)
๐ Read: references/managing-tasks.md
- IsPrimaryKey requirement for CRUD
- Cell editing, dialog editing, taskbar editing
- Adding and deleting tasks
- Indent / outdent tasks
- Splitting and merging tasks
- Server-side CRUD persistence
- Edit validation and error handling
Task Dependencies
๐ Read: references/task-dependency.md
- SS, SF, FS, FF relationship types
- Mapping dependency field
- Predecessor offset values
- Dependency editing via mouse drag
- Validation, error handling, parent dependencies
Resources
๐ Read: references/resources.md
- Resource collection and field mapping
- Assigning resources to tasks
- Resource view mode
- Multi-taskbar display
- Resource customization
Filtering
๐ Read: references/filtering.md
- Menu filtering (column-level)
- Excel-like filtering
- Toolbar search / searching
- Filter settings and programmatic filtering
Sorting
๐ Read: references/sorting.md
- Enabling sorting, multi-column sort
- Initial sort configuration
- Programmatic sort / clear sort
Timeline
๐ Read: references/timeline.md
- Top tier and bottom tier configuration
- Zooming in and out
- Custom timeline units and formats
- Timeline template
Task Scheduling
๐ Read: references/task-scheduling.md
- Auto, Manual, Custom scheduling modes
- Duration units (day, hour, minute, week, month)
- Unscheduled tasks
- Task constraints (ALAP, ASAP, FNLT, SNLT, MSO, MFO)
- Baseline display
Selection
๐ Read: references/selection.md
- Row selection and cell selection
- Single/multiple selection modes
- Programmatic selection
Scrolling
๐ Read: references/scrolling.md
- Configure component
height and width to enable scrollbars
- Responsive sizing with
100% and parent container height requirements
- Programmatic timeline scroll via
scrollToDate()
- Set vertical scroll with
ganttObj.ganttChartModule.scrollObject.setScrollTop()
Rows
๐ Read: references/rows.md
- Configure global
rowHeight and per-row expand state via taskFields.expandState
- Collapse all parent tasks at load with
collapseAllParentTasks
- Customize row appearance with
rowDataBound and queryTaskbarInfo
- Row spanning via
queryCellInfo.rowSpan and clip modes for overflow
Row Drag And Drop
๐ Read: references/row-drag-and-drop.md
- Enable row reordering with
allowRowDragAndDrop and selectionSettings.type = "Multiple" for multi-drag
- Allow taskbar-based drag with
allowTaskbarDragAndDrop and edit mode Auto
- Lifecycle events:
rowDragStartHelper, rowDragStart, rowDrag, rowDrop
- Programmatic reordering via
reorderRows(fromIndexes, toIndex, position)
Timezone
๐ Read: references/timezone.md
- Set
timezone (e.g., UTC, America/New_York) to normalise displayed dates across clients
- CRUD operations respect configured timezone and convert for server persistence
- Utility methods:
ej.schedule.Timezone().offset(), convert(), and remove() for programmatic conversions
Globalization
๐ Read: references/globalization.md
- Localize UI text via
locale and ej.base.L10n.load() translation objects
- Internationalization: load CLDR files to format dates and numbers per culture
- Enable RTL layout with
enableRtl="true" for right-to-left languages
Export (Excel & PDF)
๐ Read: references/export.md
- Excel export with column and data customization
- PDF export with themes and custom columns
- Exporting multiple Gantt charts to a single PDF
Toolbar
๐ Read: references/toolbar.md
- Built-in toolbar items (Add, Edit, Delete, Search, ExpandAll, CollapseAll, ExcelExport, PdfExport, ZoomIn, ZoomOut, ZoomToFit, UndoRedo)
- Custom toolbar items and click handling
- Enabling/disabling toolbar items programmatically
Context Menu
๐ Read: references/context-menu.md
- Enable context menu with
enableContextMenu="true"
- Built-in context menu items for CRUD operations
- Custom context menu items and click event handling
Taskbar
๐ Read: references/taskbar.md
- Taskbar templates using
text/x-jsrender (taskbarTemplate, parentTaskbarTemplate, milestoneTemplate)
- Control taskbar size with
taskbarHeight (must be less than rowHeight)
- Dynamic taskbar/progress styling with
queryTaskbarInfo (e.g., taskbarBgColor, progressBarBgColor, isCritical)
- Change the drag gripper icon via CSS overrides
- Customize dependency connector lines with
connectorLineWidth and connectorLineBackground
- Multi-taskbar display in project view using
enableMultiTaskbar="true"
Labels and Tooltips
๐ Read: references/labels-and-tooltips.md
- Left/right/inside label templates on taskbars
- Taskbar tooltip customization via
tooltipSettings
- Connector line and baseline tooltips
Event Markers
๐ Read: references/event-markers.md
- Add striplines/event markers with
<e-gantt-eventmarkers>
- Custom label and CSS class per marker
- Dynamic event markers
Critical Path
๐ Read: references/critical-path.md
- Enable critical path highlighting with
enableCriticalPath="true"
- Critical path rendering and customization
- Critical slack value configuration
Splitter
๐ Read: references/splitter.md
- Configure grid/chart pane ratio with
splitterSettings
- Set splitter position by column index, percentage, or pixel
- Programmatic splitter position update via
setSplitterPosition()
Undo and Redo
๐ Read: references/undo-redo.md
- Enable undo/redo via toolbar items or
Ctrl+Z / Ctrl+Y
- Configure undo-redo history size (
undoRedoStepsCount)
- Supported actions and programmatic
undo() / redo() calls
State Persistence
๐ Read: references/state-persistence.md
- Enable persistence with
enablePersistence="true" (saves to localStorage)
- Persisted properties: filter, sort, column width, scroll position, zoom level
- Clearing persisted state programmatically
Immutable Mode
๐ Read: references/immutable-mode.md
- Enable
enableImmutableMode="true" to prevent re-render of unchanged rows
- Performance benefit for large data sets with frequent updates
- Limitations and usage patterns
Virtual Scroll
๐ Read: references/virtual-scroll.md
- Enable row virtualization with
enableVirtualization="true"
- Enable timeline virtualization with
enableTimelineVirtualization="true"
- Performance characteristics and known limitations
Loading Animation
๐ Read: references/loading-animation.md
- Built-in spinner shown during data load
- Show/hide loading indicator programmatically via
showSpinner() / hideSpinner()
- Custom loading template
Style and Appearance
๐ Read: references/style-and-appearance.md
- Applying Syncfusion themes (Bootstrap, Material, Fabric, High Contrast)
- CSS class overrides for taskbars, grid rows, and header
queryTaskbarInfo event for per-task styling
Events
๐ Read: references/events.md
- Wire events via camelCase Tag Helper attributes (
actionBegin, actionComplete, actionFailure)
actionBegin โ cancel-able hook before every CRUD, filter, sort, zoom, and dependency action
actionComplete โ post-action callback with requestType reference table
cellEdit โ prevent specific cells or rows from entering edit mode
beforeTooltipRender โ customise or suppress any tooltip dynamically
- Row/cell selection events:
rowSelecting, rowSelected, rowDeselecting, rowDeselected, cellSelecting, cellSelected
- Export events:
beforeExcelExport, beforePdfExport, excelExportComplete, pdfExportComplete
Public Methods
๐ Read: references/methods.md
- Data access:
getCurrentViewData(), getRecordByID(), getTaskByUniqueID(), getRowByID()
- Row expand/collapse:
expandAll(), collapseAll(), expandByID(), collapseByID(), expandByIndex()
- Task utilities:
changeTaskMode(), convertToMilestone(), updateTaskId(), updateDataSource()
- Scrolling:
scrollToDate(), scrollToTask(), setScrollTop(), updateChartScrollOffset()
- Search:
search(keyword) โ programmatic search across displayed columns
- Lifecycle:
refresh(), dataBind(), getRootElement(), addEventListener(), removeEventListener()
- Module injection reference table (
ej.gantt.Filter, Edit, RowDD, CriticalPath, etc.)
Quick Start Example
@* ~/Pages/Index.cshtml *@
<ejs-gantt id='Gantt' dataSource="Model.GanttDataSourceCollection" height="450px">
<e-gantt-taskfields id="TaskId"
name="TaskName"
startDate="StartDate"
endDate="EndDate"
duration="Duration"
progress="Progress"
parentID="ParentID">
</e-gantt-taskfields>
</ejs-gantt>
public class IndexModel : PageModel
{
public List<GanttDataSource> GanttDataSourceCollection { get; set; }
public void OnGet()
{
GanttDataSourceCollection = GetTaskCollection();
}
private List<GanttDataSource> GetTaskCollection()
{
return new List<GanttDataSource>()
{
new GanttDataSource() { TaskId = 1, TaskName = "Project initiation", StartDate = new DateTime(2019, 04, 02), EndDate = new DateTime(2019, 04, 21) },
new GanttDataSource() { TaskId = 2, TaskName = "Identify site location", StartDate = new DateTime(2019, 04, 02), Duration = 4, Progress = 50, ParentID = 1 },
new GanttDataSource() { TaskId = 3, TaskName = "Perform soil test", StartDate = new DateTime(2019, 04, 02), Duration = 4, Progress = 50, ParentID = 1 },
new GanttDataSource() { TaskId = 4, TaskName = "Soil test approval", StartDate = new DateTime(2019, 04, 02), Duration = 4, Progress = 50, ParentID = 1 },
new GanttDataSource() { TaskId = 5, TaskName = "Project estimation", StartDate = new DateTime(2019, 04, 02), EndDate = new DateTime(2019, 04, 21) },
new GanttDataSource() { TaskId = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2019, 04, 04), Duration = 3, Progress = 50, ParentID = 5 },
new GanttDataSource() { TaskId = 7, TaskName = "List materials", StartDate = new DateTime(2019, 04, 04), Duration = 3, Progress = 50, ParentID = 5 }
};
}
}
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 int? ParentID { get; set; }
Common Patterns
Enable Editing
<ejs-gantt id="Gantt" dataSource="Model.GanttDataSourceCollection" height="450px">
<e-gantt-taskfields id="TaskId" name="TaskName" startDate="StartDate"
endDate="EndDate" duration="Duration" progress="Progress"
parentID="ParentID">
</e-gantt-taskfields>
<e-gantt-editsettings allowEditing="true" allowAdding="true"
allowDeleting="true" allowTaskbarEditing="true"
mode="Auto">
</e-gantt-editsettings>
<e-gantt-columns>
<e-gantt-column field="TaskId" isPrimaryKey="true"></e-gantt-column>
<e-gantt-column field="TaskName"></e-gantt-column>
</e-gantt-columns>
</ejs-gantt>
Enable Filtering and Sorting
<ejs-gantt id="Gantt" dataSource="Model.GanttDataSourceCollection"
allowFiltering="true" allowSorting="true" height="450px">
<e-gantt-taskfields id="TaskId" name="TaskName" startDate="StartDate"
endDate="EndDate" duration="Duration" progress="Progress"
parentID="ParentID">
</e-gantt-taskfields>
</ejs-gantt>
Toolbar with Export
<ejs-gantt id="Gantt" dataSource="Model.GanttDataSourceCollection"
toolbar="@(new List<string>() { "Add","Edit","Delete","Cancel","Update","ExpandAll","CollapseAll","ExcelExport","PdfExport" })"
allowExcelExport="true" allowPdfExport="true" height="450px">
<e-gantt-taskfields id="TaskId" name="TaskName" startDate="StartDate"
endDate="EndDate" duration="Duration" parentID="ParentID">
</e-gantt-taskfields>
</ejs-gantt>