Skip to main content Home Creators syncfusion aspnetmvc-ui-components-skills syncfusion-aspnetmvc-gantt-chart
syncfusion-aspnetmvc-gantt-chart Implement Syncfusion ASP.NET MVC 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 MVC applications using @Html.EJS().Gantt() Razor helpers. Covers data binding, task management, editing, filtering, sorting, export, timeline customization, events, and public methods.
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/aspnetmvc-ui-components-skills --skill syncfusion-aspnetmvc-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... name syncfusion-aspnetmvc-gantt-chart description Implement Syncfusion ASP.NET MVC 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 MVC applications using @Html.EJS().Gantt() Razor helpers. Covers data binding, task management, editing, filtering, sorting, export, timeline customization, events, and public methods. metadata {"author":"Syncfusion Inc","version":"34.1.29"}
Syncfusion ASP.NET MVC Gantt Chart
The Syncfusion EJ2 Gantt Chart control for ASP.NET MVC renders a project schedule as a combined tree grid (left) and chart (right) separated by a splitter. Tasks are displayed as taskbars on a timeline. It supports task editing, dependencies, resources, baselines, critical path, filtering, sorting, and Excel/PDF export.
When to Use This Skill
Use this skill when you need to:
Set up and render a Gantt Chart in an ASP.NET MVC view using @Html.EJS().Gantt()
Bind local or remote data to the Gantt control from a controller action
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, CSV, or PDF
Customize the timeline, taskbars, labels, tooltips, holidays, event markers and data markers/indicators
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 (Syncfusion.EJ2.MVC5)
Namespace import and CDN stylesheet/script setup
ScriptManager registration in _Layout.cshtml
First Gantt control (Index.cshtml + controller)
Mapping task fields and defining columns
Enabling editing, filtering, sorting
Data Binding
Local hierarchical data binding (parent/child objects with SubTasks)
Local flat/self-referential data binding (Id + ParentID mapping)
Remote data with DataManager (URL Adaptor, OData, Web API)
Load-on-demand with HasChildMapping
Columns
Defining columns with Field, HeaderText, Width, Format, TextAlign
Custom column headers and header templates
Column templates and value accessors
Checkbox column, frozen columns
Column reordering, resizing, spanning
Responsive columns, WBS column, column menu
Managing Tasks (Editing)
IsPrimaryKey requirement for CRUDCell editing, dialog editing, taskbar editing
Adding and deleting tasks
Indent / outdent tasks
Splitting and merging tasks
Customize Dependency, Segments, Resources tabs in the edit/add dialog using AdditionalParams
Customize Notes tab (RTE) in the edit/add dialog using AdditionalParams (for example inlineMode)
Server-side CRUD persistence
Edit validation and error handling
Task Dependencies
SS, SF, FS, FF relationship types
Mapping Dependency field in data source
Predecessor offset with duration units
Dependency editing via mouse drag
Validation, error handling, parent dependencies
Resources
Resource collection and ResourceFields mapping
Assigning resources to tasks (ResourceInfo)
Resource view (ViewType)
Multi-taskbar display
Resource customization
Filtering
Menu filtering (AllowFiltering(true)) — column-level filter menu
Excel-like filtering (FilterSettings.Type = Excel)
Filter hierarchy modes (Parent, Child, Both, None)
Toolbar search / SearchSettings
Filter operators, initial filter state, programmatic filtering
Sorting
Enabling sorting, multi-column sort (AllowSorting(true))
Initial sort configuration via SortSettings
Programmatic sort (sortModule.sortColumn) / clear sort
Timeline
Top tier and bottom tier configuration
Zooming in and out (ZoomIn, ZoomOut, ZoomToFit)
Custom timeline units and formats
Timeline template
Task Scheduling
Auto, Manual, Custom scheduling modes (TaskMode)
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 (SelectionSettings)
Toggle selection and hover highlighting
Programmatic selection (selectionModule.selectRow, selectRows, selectCell)
Selection events (RowSelecting, RowSelected, CellSelecting, CellSelected)
Scrolling
Configure Height and Width to enable scrollbars
Responsive sizing with 100% and parent container height requirements
Programmatic timeline scroll via scrollToDate()
Set vertical scroll with setScrollTop() and updateChartScrollOffset()
Rows
Configure global RowHeight and per-row expand state via TaskFields.ExpandState
Collapse all parent tasks at load with CollapseAllParentTasks
Expand/collapse with toolbar and public methods (expandAll(), collapseAll(), etc.)
Customize expand/collapse behavior using Expanding, Collapsing, Expanded, and Collapsed
Customize row appearance with RowDataBound and taskbar styling with QueryTaskbarInfo
Styling alternate rows and per-cell customization (RowDataBound + QueryCellInfo)
Row spanning via rowSpan in QueryCellInfo
Control overflow rendering with ClipMode
Row template (RowTemplate)
Row Drag And Drop
Enable row reordering with AllowRowDragAndDrop(true) and SelectionSettings.Type = Multiple for multi-drag
Allow taskbar-based drag with AllowTaskbarDragAndDrop(true) 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 (AllowExcelExport, excelExport())
CSV export (csvExport())
PDF export with themes and custom columns (AllowPdfExport, pdfExport())
Exporting multiple Gantt charts to a single PDF or Excel file
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 height, custom templates (TaskbarTemplate, ParentTaskbarTemplate, MilestoneTemplate)
Progress bar customization and connector line configuration
Data markers / indicators (per-task symbols with tooltip labels)
Segment taskbars (split tasks) rendering
QueryTaskbarInfo event for per-task styling
Labels and Tooltips
Left/right/inside label templates on taskbars (LabelSettings)
Taskbar tooltip customization via TooltipSettings
Connector line and baseline tooltips
BeforeTooltipRender event
Event Markers
Add event markers with EventMarkers builder: Day, Label, CssClass
Multiple event markers in a single Gantt
Dynamic event markers
Critical Path
Enable critical path highlighting with EnableCriticalPath(true)
Critical path rendering and customization via QueryTaskbarInfo
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 with EnableUndoRedo(true)
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()
LoadingIndicator with IndicatorType.Shimmer or IndicatorType.Spinner
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 stylingGridLines enum (Horizontal, Vertical, Both, None)
Events
Wire events via builder methods (.ActionBegin("fn"), .ActionComplete("fn"), .ActionFailure("fn"))
ActionBegin — cancellable 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: convertToMilestone(), updateTaskId(), updateDataSource(), updateRecordByID()
Scrolling: scrollToDate(), scrollToTask(), setScrollTop(), updateChartScrollOffset()
Search: search(keyword) — programmatic search across displayed columns
Lifecycle: refresh(), dataBind(), addEventListener(), removeEventListener()
Quick Start Example Controller (HomeController.cs):
public ActionResult Index ()return View();
}
public static List<GanttDataSource> GetGanttData ()return new List<GanttDataSource>
{
new GanttDataSource
{
TaskId = 1 , TaskName = "Project Initiation" ,
StartDate = new DateTime(2024 , 4 , 2 ), EndDate = new DateTime(2024 , 4 , 21 ),
SubTasks = new List<GanttDataSource>
{
new GanttDataSource { TaskId = 2 , TaskName = "Identify site" , StartDate = new DateTime(2024 , 4 , 2 ), Duration = 4 , Progress = 70 },
new GanttDataSource
{
TaskId = 3 ,
TaskName = "Soil test" ,
StartDate = new DateTime(2024 , 4 , 2 ),
Duration = 4 ,
Progress = 50 ,
Predecessor = "2FS" ,
Indicators = new List<GanttIndicator>
{
new GanttIndicator { Date = new DateTime(2024 , 4 , 4 ), IconClass = "e-btn-icon e-notes-info" , Label = "Mid-review" }
}
}
}
}
};
}
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 string Predecessor { get ; set ; }
public List<GanttIndicator> Indicators { get ; set ; }
public List<GanttDataSource> SubTasks { get ; set ; }
}
public class GanttIndicator
{
public string IconClass { get ; set ; }
public string Label { get ; set ; }
public DateTime Date { get ; set ; }
}
@Html.EJS().Gantt("gantt")
.DataSource((IEnumerable<object>)ViewBag.GanttData)
.Height("450px")
.TaskFields(tf => tf
.Id("TaskId")
.Name("TaskName")
.StartDate("StartDate")
.EndDate("EndDate")
.Duration("Duration")
.Progress("Progress")
.Indicators("Indicators")
.Dependency("Predecessor")
.Child("SubTasks")
)
.EditSettings(es => es.AllowEditing(true).AllowAdding(true).AllowDeleting(true).AllowTaskbarEditing(true))
.Toolbar(new List<string> { "Add", "Edit", "Delete", "Update", "Cancel", "Search" })
.AllowSorting(true)
.AllowFiltering(true)
.Render()
Common Patterns
Pass resources from controller ViewBag.Resources = GetResources();
@Html.EJS().Gantt("gantt")
.DataSource((IEnumerable<object>)ViewBag.GanttData)
.Resources((IEnumerable<object>)ViewBag.Resources)
.ResourceFields(rf => rf.Id("ResourceId").Name("ResourceName"))
.TaskFields(tf => tf.ResourceInfo("ResourceId") /* other fields */ )
.Render()
Enable critical path @Html.EJS().Gantt("gantt")
.EnableCriticalPath(true)
/* other config */
.Render()
Enable Excel and PDF export with toolbar @Html.EJS().Gantt("gantt")
.AllowExcelExport(true)
.AllowPdfExport(true)
.Toolbar(new List<string> { "ExcelExport", "PdfExport" })
.ToolbarClick("toolbarClick")
.Render()
<script>
function toolbarClick(args) {
var ganttObj = document.getElementById('gantt').ej2_instances[0];
if (args.item.id === 'gantt_excelexport') ganttObj.excelExport();
if (args.item.id === 'gantt_pdfexport') ganttObj.pdfExport();
}
</script>
More from this repository
syncfusion-aspnetmvc-grid Implements Syncfusion EJ2 ASP.NET MVC 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-aspnetmvc-pivot-table Use this skill when users ask how to add or configure Syncfusion PivotView/pivot tables in ASP.NET MVC apps. Trigger for MVC integration, data binding, OLAP/cube setup, aggregation, drill-down/drill-through, grouping, filtering, conditional formatting, exporting, or pivot charts. MVC-only, not Core/Blazor/JS.
syncfusion-aspnetmvc-ai-assistview Implement the Syncfusion ASP.NET MVC AI AssistView component — a conversational AI chat interface with prompt/response rendering, prompt suggestions, custom views, toolbar customization, file attachments, speech-to-text, AI backend integrations (Azure OpenAI, Gemini, Ollama, LiteLLM), generative UI with interactive tools, Chain of Thoughts reasoning visualization and text-to-speech audio playback. Use this skill when building AI chat UIs, integrating LLM backends, configuring assistant toolbars, customizing templates, rendering dynamic UI components, or handling voice input/output in ASP.NET MVC applications.
Related occupations SOC
Based on SOC occupation classification
