Hi,
Can we programmatically modify tasks and segments in SfGantt? For example, can we swap task rows, insert a new task, or move a segment from one task to another?
I tried swapping two tasks using the code below, but it looks like the SfGantt control does not re-render the modified data.
Thanks,
Ramesh S
@page "/"
@using Syncfusion.Blazor.Gantt
@using Syncfusion.Blazor.Buttons
@rendermode InteractiveWebAssembly
<h3>Syncfusion SfGantt – Large Segmented Dataset</h3>
<p>
150 tasks · ~1,250 segments · No subtasks...
Timeline: Day / Hour · Project span: 15 days
</p>
<div>
<SfButton CssClass="action-secondary" @onclick="SwitchClick">Switch</SfButton>
</div>
<SfGantt TValue="TaskData" @ref="gantt"
DataSource="@taskCollection"
Height="670px"
Width="100%"
RowHeight="40"
TaskbarHeight="20"
ProjectStartDate="@projectStart"
ProjectEndDate="@projectEnd"
DurationUnit="DurationUnit.Hour"
IncludeWeekend="true"
EnableRowVirtualization="true"
EnableTimelineVirtualization="true">
<GanttTaskFields Id="TaskID"
Name="TaskName"
StartDate="StartDate"
EndDate="EndDate"
Progress="Progress">
</GanttTaskFields>
<!-- Segmented Tasks -->
<GanttSegmentFields TValue="TaskData"
TSegments="SegmentModel"
PrimaryKey="Id"
ForeignKey="TaskID"
StartDate="SegmentStartDate"
EndDate="SegmentEndDate"
DataSource="@segmentCollection">
</GanttSegmentFields>
<!-- Timeline -->
<GanttTimelineSettings TimelineUnitSize="60">
<GanttTopTierSettings Unit="TimelineViewMode.Day" Format="ddd, MMM dd" />
<GanttBottomTierSettings Unit="TimelineViewMode.Hour" Format="HH:mm" />
</GanttTimelineSettings>
<GanttDayWorkingTimeCollection>
<GanttDayWorkingTime From="0" To="24" />
</GanttDayWorkingTimeCollection>
<GanttColumns>
<GanttColumn Field="TaskID" HeaderText="ID" Width="90" IsPrimaryKey="true" />
<GanttColumn Field="TaskName" HeaderText="Task Name" Width="260" />
<GanttColumn Field="StartDate" HeaderText="Overall Start" Width="170" Format="M/d/yyyy HH:mm" />
<GanttColumn Field="EndDate" HeaderText="Overall End" Width="170" Format="M/d/yyyy HH:mm" />
<GanttColumn Field="Progress" HeaderText="Progress (%)" Width="120" />
</GanttColumns>
<GanttTemplates TValue="TaskData">
<TaskbarTemplate>
@{
var task = (context as TaskData);
if (task == null)
{
return;
}
var taskModel = gantt.GetRowTaskModel(task);
List<GanttSegmentData> segments = taskModel.Segments;
@if (segments != null && segments.Count() > 1)
{
foreach (var segment in segments)
{
<div class="e-gantt-child-taskbar-inner-div e-gantt-child-taskbar e-segmented-taskbar" style=@("height:37px;position: absolute;left:" + segment.Left + "px; width:" + segment.Width + "px;") tabindex=-1 data-segment-index="@(segment.SegmentIndex)">
<div class="e-taskbar-left-resizer e-icon" style="margin-top: 5px; left:2px">
@($"{segment.StartDate}-{segment.EndDate}")
</div>
</div>
}
}
else
{
<div class="e-gantt-child-taskbar e-gantt-child-taskbar-inner-div" style="height:37px;" tabindex=-1>
<div class="e-gantt-child-progressbar-inner-div e-gantt-child-progressbar" style="height:24px;width:@(taskModel.ProgressWidth + "px");text-align: right;border-radius: 0px;">
</div>
</div>
}
}
</TaskbarTemplate>
</GanttTemplates>
<GanttSelectionSettings Mode="Syncfusion.Blazor.Grids.SelectionMode.Row"
Type="Syncfusion.Blazor.Grids.SelectionType.Multiple">
</GanttSelectionSettings>
<GanttEditSettings AllowEditing="true"
AllowAdding="true"
AllowDeleting="true"
AllowTaskbarEditing="true"
Mode="Syncfusion.Blazor.Gantt.EditMode.Dialog">
</GanttEditSettings>
</SfGantt>
@code {
private SfGantt<TaskData> gantt;
private DateTime projectStart = new DateTime(2026, 4, 6, 0, 0, 0);
private DateTime projectEnd = new DateTime(2026, 4, 21, 23, 59, 59);
private List<TaskData> taskCollection = new();
private List<SegmentModel> segmentCollection = new();
protected override void OnInitialized()
{
GenerateLargeDataset();
}
// ===================== MODELS =====================
public class TaskData
{
public int TaskID { get; set; }
public string TaskName { get; set; } = string.Empty;
public DateTime StartDate { get; set; }
public DateTime EndDate { get; set; }
public int Progress { get; set; }
public int DisplayOrder { get; set; }
public TaskData()
{
}
public TaskData(TaskData other)
{
TaskID = other.TaskID;
TaskName = other.TaskName;
StartDate = other.StartDate;
EndDate = other.EndDate;
Progress = other.Progress;
DisplayOrder = other.DisplayOrder;
}
}
public class SegmentModel
{
public int Id { get; set; }
public int TaskID { get; set; }
public DateTime SegmentStartDate { get; set; }
public DateTime SegmentEndDate { get; set; }
}
// ===================== DATA GENERATOR =====================
private void GenerateLargeDataset()
{
var random = new Random();
int segmentId = 1;
for (int taskId = 1; taskId <= 150; taskId++)
{
int segmentCount = random.Next(5, 11); // 5–10 segments
var taskSegments = new List<SegmentModel>();
DateTime cursor = projectStart.AddDays(random.Next(0, 5))
.AddHours(random.Next(5, 12));
for (int i = 0; i < segmentCount; i++)
{
int durationHours = random.Next(2, 8);
var segmentStart = cursor;
var segmentEnd = segmentStart.AddHours(durationHours);
taskSegments.Add(new SegmentModel
{
Id = segmentId++,
TaskID = taskId,
SegmentStartDate = segmentStart,
SegmentEndDate = segmentEnd
});
// Gap before next segment
cursor = segmentEnd.AddHours(random.Next(6, 36));
if (cursor > projectEnd)
break;
}
if (!taskSegments.Any())
continue;
segmentCollection.AddRange(taskSegments);
taskCollection.Add(new TaskData
{
TaskID = taskId,
TaskName = $"Task {taskId:000}",
StartDate = taskSegments.Min(s => s.SegmentStartDate),
EndDate = taskSegments.Max(s => s.SegmentEndDate),
Progress = 100, //random.Next(30, 101),
DisplayOrder = taskId
});
}
}
private async Task SwitchClick()
{
Swap(taskCollection, 9, 10);
await gantt.RefreshAsync();
//StateHasChanged();
}
public static void Swap(List<TaskData> list, int indexA, int indexB)
{
if (list == null)
throw new ArgumentNullException(nameof(list));
if (indexA < 0 || indexA >= list.Count)
throw new ArgumentOutOfRangeException(nameof(indexA));
if (indexB < 0 || indexB >= list.Count)
throw new ArgumentOutOfRangeException(nameof(indexB));
if (indexA == indexB)
return;
TaskData temp = list[indexA];
list[indexA] = list[indexB];
list[indexB] = temp;
}
}
