Skip to main content Home Creators syncfusion aspnetcore-ui-components-skills syncfusion-aspnetcore-gantt-chart
syncfusion-aspnetcore-gantt-chart 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.
Jump to install Skills Marketplace Discover and explore AI skills built by the community.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Show prompt details A direct command skips the review prompt. Inspect the source before running it.
npx skills add https://github.com/syncfusion/aspnetcore-ui-components-skills --skill syncfusion-aspnetcore-gantt-chartThe command stays on one line. Scroll horizontally to inspect it before copying.
Prefer a local copy? Download the files currently available to SkillsMP.
Download Zip Downloading... More from this repository syncfusion-aspnetcore-grid Implements Syncfusion ASP.NET Core Grid component for feature-rich data tables and grids. Use this when working with data display, sorting, filtering, grouping, aggregates, editing, or exporting. This skill covers grid configuration, CRUD operations, virtual scrolling or infinite scrolling, hierarchy grids, state persistence, and advanced data management features for data-intensive applications.
syncfusion-aspnetcore-pivot-table Use this skill when users ask how to build Syncfusion PivotView/pivot tables in ASP.NET Core apps. Trigger for server integration, data binding (API/DB/remote), OLAP, aggregation, drill-down, grouping, filtering, conditional formatting, exporting (Excel/PDF/CSV), or pivot charts in ASP.NET Core. Not for MVC/Blazor/JS.
syncfusion-aspnetcore-ai-assistview Implement the Syncfusion ASP.NET Core AI AssistView control for interactive AI-powered assistance interfaces. Use this skill when implementing AI assistants, prompt suggestions, custom views, file attachments, markdown responses, customizable templates, regenerable responses, thinking capabilities (chain-of-thoughts), generative UI blocks, Text-to-Speech conversion, Speech-to-Text voice input, or customizing advanced AI conversation UI in ASP.NET Core applications.
Related occupations SOC
Based on SOC occupation classification
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":"34.1.29"}
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
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
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
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)
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
SS, SF, FS, FF relationship types
Mapping dependency field
Predecessor offset values
Dependency editing via mouse drag
Validation, error handling, parent dependencies
Resources
Resource collection and field mapping
Assigning resources to tasks
Resource view mode
Multi-taskbar display
Resource customization
Filtering
Menu filtering (column-level)
Excel-like filtering
Toolbar search / searching
Filter settings and programmatic filtering
Sorting
Enabling sorting, multi-column sort
Initial sort configuration
Programmatic sort / clear sort
Timeline
Top tier and bottom tier configuration
Zooming in and out
Custom timeline units and formats
Timeline template
Task Scheduling
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
Row selection and cell selection
Single/multiple selection modes
Programmatic selection
Scrolling
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
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
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
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
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)
Excel export with column and data customization
PDF export with themes and custom columns
Exporting multiple Gantt charts to a single PDF
Toolbar
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
Enable context menu with enableContextMenu="true"
Built-in context menu items for CRUD operations
Custom context menu items and click event handling
Taskbar
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
Left/right/inside label templates on taskbars
Taskbar tooltip customization via tooltipSettings
Connector line and baseline tooltips
Event Markers
Add striplines/event markers with <e-gantt-eventmarkers>
Custom label and CSS class per marker
Dynamic event markers
Critical Path
Enable critical path highlighting with enableCriticalPath="true"
Critical path rendering and customization
Critical slack value configuration
Splitter
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
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
Enable persistence with enablePersistence="true" (saves to localStorage)
Persisted properties: filter, sort, column width, scroll position, zoom level
Clearing persisted state programmatically
Immutable Mode
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
Enable row virtualization with enableVirtualization="true"
Enable timeline virtualization with enableTimelineVirtualization="true"
Performance characteristics and known limitations
Loading Animation
Built-in spinner shown during data load
Show/hide loading indicator programmatically via showSpinner() / hideSpinner()
Custom loading template
Style and Appearance
Applying Syncfusion themes (Bootstrap, Material, Fabric, High Contrast)
CSS class overrides for taskbars, grid rows, and header
queryTaskbarInfo event for per-task styling
Events
Wire events via camelCase Tag Helper attributes (actionBegin, actionComplete, actionFailure)
actionBegin — cancel-able hook before every CRUD, filter, sort, zoom, and dependency actionactionComplete — post-action callback with requestType reference tablecellEdit — prevent specific cells or rows from entering edit modebeforeTooltipRender — customise or suppress any tooltip dynamicallyRow/cell selection events: rowSelecting, rowSelected, rowDeselecting, rowDeselected, cellSelecting, cellSelected
Export events: beforeExcelExport, beforePdfExport, excelExportComplete, pdfExportComplete
Public Methods
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 ()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>
