Search results
Managing Tasks
The Gantt component has options to dynamically insert, delete, and update tasks in a project. The primary key column is necessary to manage the tasks and perform CRUD operations in Gantt. To define the primary key, set the Columns.IsPrimaryKey property to true in the column.
Adding new tasks
Tasks can be dynamically added to the Gantt project by enabling the EditSettings.AllowAdding property.
Toolbar
A row can be added to the Gantt component from the toolbar while the EditSettings.AllowAdding property is set to true. After clicking the toolbar add icon, you should provide the task information in the add dialog.
@using Syncfusion.EJ2.Blazor.Gantt
<EjsGantt DataSource="@TaskCollection" Toolbar="@(new List<string>() { "Add" })" Height="450px" Width="900px">
<GanttTaskFields Id="TaskId" Name="TaskName" StartDate="StartDate" EndDate="EndDate" Duration="Duration" Progress="Progress" Child="SubTasks">
</GanttTaskFields>
<GanttEditSettings AllowAdding="true"></GanttEditSettings>
</EjsGantt>
@code{
public List<TaskData> TaskCollection { get; set; }
protected override void OnInitialized()
{
this.TaskCollection = GetTaskCollection();
}
public class TaskData
{
public int TaskId { get; set; }
public string TaskName { get; set; }
public DateTime StartDate { get; set; }
public DateTime EndDate { get; set; }
public string Duration { get; set; }
public int Progress { get; set; }
public List<TaskData> SubTasks { get; set; }
}
public static List <TaskData> GetTaskCollection() {
List <TaskData> Tasks = new List <TaskData> () {
new TaskData() {
TaskId = 1,
TaskName = "Project initiation",
StartDate = new DateTime(2019, 04, 02),
EndDate = new DateTime(2019, 04, 21),
SubTasks = (new List <TaskData> () {
new TaskData() {
TaskId = 2,
TaskName = "Identify Site location",
StartDate = new DateTime(2019, 04, 02),
Duration = "0",
Progress = 30,
},
new TaskData() {
TaskId = 3,
TaskName = "Perform soil test",
StartDate = new DateTime(2019, 04, 02),
Duration = "4",
Progress = 40,
},
new TaskData() {
TaskId = 4,
TaskName = "Soil test approval",
StartDate = new DateTime(2019, 04, 02),
Duration = "0",
Progress = 30
},
})
},
new TaskData() {
TaskId = 5,
TaskName = "Project estimation",
StartDate = new DateTime(2019, 04, 02),
EndDate = new DateTime(2019, 04, 21),
SubTasks = (new List <TaskData> () {
new TaskData() {
TaskId = 6,
TaskName = "Develop floor plan for estimation",
StartDate = new DateTime(2019, 04, 04),
Duration = "3",
Progress = 30,
},
new TaskData() {
TaskId = 7,
TaskName = "List materials",
StartDate = new DateTime(2019, 04, 04),
Duration = "3",
Progress = 40
},
new TaskData() {
TaskId = 8,
TaskName = "Estimation approval",
StartDate = new DateTime(2019, 04, 04),
Duration = "0",
Progress = 30,
}
})
}
};
return Tasks;
}
}
By default, a new row will be added to the top most row in the Gantt component.
Using method
You can add rows to the Gantt component dynamically using the AddRecord method and you can define the add position of the default new record by using the RowPosition property. You can also pass the RowIndex as an additional parameter.
- Top of all the rows.
- Bottom to all the existing rows.
- Above the selected row.
- Below the selected row.
- As child to the selected row.
@using Syncfusion.EJ2.Blazor.Gantt
<button @onclick="AddRow">Add Row</button>
<EjsGantt @ref="Gantt" @ref:suppressField DataSource="@TaskCollection" Height="450px" Width="900px">
<GanttTaskFields Id="TaskId" Name="TaskName" StartDate="StartDate" EndDate="EndDate" Duration="Duration" Progress="Progress" Child="SubTasks">
</GanttTaskFields>
<GanttEditSettings AllowAdding="true"></GanttEditSettings>
</EjsGantt>
@code{
public EjsGantt<TaskData> Gantt;
public void AddRow()
{
this.Gantt.AddRecord(new TaskData() { TaskId = 9, TaskName = "New Added Record", StartDate = new DateTime(2019, 04, 02), Duration = "3",
Progress = 50}, RowPosition.Below, 2);
}
public List<TaskData> TaskCollection { get; set; }
protected override void OnInitialized()
{
this.TaskCollection = GetTaskCollection();
}
public class TaskData
{
public int TaskId { get; set; }
public string TaskName { get; set; }
public DateTime StartDate { get; set; }
public DateTime EndDate { get; set; }
public string Duration { get; set; }
public int Progress { get; set; }
public List<TaskData> SubTasks { get; set; }
}
public static List <TaskData> GetTaskCollection() {
List <TaskData> Tasks = new List <TaskData> () {
new TaskData() {
TaskId = 1,
TaskName = "Project initiation",
StartDate = new DateTime(2019, 04, 02),
EndDate = new DateTime(2019, 04, 21),
SubTasks = (new List <TaskData> () {
new TaskData() {
TaskId = 2,
TaskName = "Identify Site location",
StartDate = new DateTime(2019, 04, 02),
Duration = "0",
Progress = 30,
},
new TaskData() {
TaskId = 3,
TaskName = "Perform soil test",
StartDate = new DateTime(2019, 04, 02),
Duration = "4",
Progress = 40,
},
new TaskData() {
TaskId = 4,
TaskName = "Soil test approval",
StartDate = new DateTime(2019, 04, 02),
Duration = "0",
Progress = 30
},
})
},
new TaskData() {
TaskId = 5,
TaskName = "Project estimation",
StartDate = new DateTime(2019, 04, 02),
EndDate = new DateTime(2019, 04, 21),
SubTasks = (new List <TaskData> () {
new TaskData() {
TaskId = 6,
TaskName = "Develop floor plan for estimation",
StartDate = new DateTime(2019, 04, 04),
Duration = "3",
Progress = 30,
},
new TaskData() {
TaskId = 7,
TaskName = "List materials",
StartDate = new DateTime(2019, 04, 04),
Duration = "3",
Progress = 40
},
new TaskData() {
TaskId = 8,
TaskName = "Estimation approval",
StartDate = new DateTime(2019, 04, 04),
Duration = "0",
Progress = 30,
}
})
}
};
return Tasks;
}
}
Editing tasks
The editing feature can be enabled in the Gantt component by enabling the EditSettings.AllowEditing and EditSettings.AllowTaskbarEditing properties.
The following editing options are available to update the tasks in the Gantt chart:
- Cell
- Dialog
- Taskbar
- Dependency links
Cell editing
By setting the edit mode to auto using the EditSettings.Mode property, the tasks can be edited by double-clicking the TreeGrid cells.
The following code example shows you how to enable the cell editing in Gantt component.
@using Syncfusion.EJ2.Blazor.Gantt
<EjsGantt DataSource="@TaskCollection" Height="450px" Width="900px">
<GanttTaskFields Id="TaskId" Name="TaskName" StartDate="StartDate" EndDate="EndDate" Duration="Duration" Progress="Progress" Child="SubTasks">
</GanttTaskFields>
<GanttEditSettings AllowEditing="true" Mode="EditMode.Auto"></GanttEditSettings>
</EjsGantt>
@code{
public List<TaskData> TaskCollection { get; set; }
protected override void OnInitialized()
{
this.TaskCollection = GetTaskCollection();
}
public class TaskData
{
public int TaskId { get; set; }
public string TaskName { get; set; }
public DateTime StartDate { get; set; }
public DateTime EndDate { get; set; }
public string Duration { get; set; }
public int Progress { get; set; }
public List<TaskData> SubTasks { get; set; }
}
public static List <TaskData> GetTaskCollection() {
List <TaskData> Tasks = new List <TaskData> () {
new TaskData() {
TaskId = 1,
TaskName = "Project initiation",
StartDate = new DateTime(2019, 04, 02),
EndDate = new DateTime(2019, 04, 21),
SubTasks = (new List <TaskData> () {
new TaskData() {
TaskId = 2,
TaskName = "Identify Site location",
StartDate = new DateTime(2019, 04, 02),
Duration = "0",
Progress = 30,
},
new TaskData() {
TaskId = 3,
TaskName = "Perform soil test",
StartDate = new DateTime(2019, 04, 02),
Duration = "4",
Progress = 40,
},
new TaskData() {
TaskId = 4,
TaskName = "Soil test approval",
StartDate = new DateTime(2019, 04, 02),
Duration = "0",
Progress = 30
},
})
},
new TaskData() {
TaskId = 5,
TaskName = "Project estimation",
StartDate = new DateTime(2019, 04, 02),
EndDate = new DateTime(2019, 04, 21),
SubTasks = (new List <TaskData> () {
new TaskData() {
TaskId = 6,
TaskName = "Develop floor plan for estimation",
StartDate = new DateTime(2019, 04, 04),
Duration = "3",
Progress = 30,
},
new TaskData() {
TaskId = 7,
TaskName = "List materials",
StartDate = new DateTime(2019, 04, 04),
Duration = "3",
Progress = 40
},
new TaskData() {
TaskId = 8,
TaskName = "Estimation approval",
StartDate = new DateTime(2019, 04, 04),
Duration = "0",
Progress = 30,
}
})
}
};
return Tasks;
}
}Note: When the edit mode is set to Auto, double-clicking on the TreeGrid side changes, the cells to editable mode. Double-clicking on the chart side opens, the edit dialog for editing the task details.
double click action on TreeGrid side
double click action on chart side
Dialog editing
Modify the task details through the edit dialog by setting the edit mode.
@using Syncfusion.EJ2.Blazor.Gantt
<EjsGantt DataSource="@TaskCollection" Height="450px" Width="900px">
<GanttTaskFields Id="TaskId" Name="TaskName" StartDate="StartDate" EndDate="EndDate" Duration="Duration" Progress="Progress" Child="SubTasks">
</GanttTaskFields>
<GanttEditSettings AllowEditing="true" Mode="EditMode.Dialog"></GanttEditSettings>
</EjsGantt>
@code{
public List<TaskData> TaskCollection { get; set; }
protected override void OnInitialized()
{
this.TaskCollection = GetTaskCollection();
}
public class TaskData
{
public int TaskId { get; set; }
public string TaskName { get; set; }
public DateTime StartDate { get; set; }
public DateTime EndDate { get; set; }
public string Duration { get; set; }
public int Progress { get; set; }
public List<TaskData> SubTasks { get; set; }
}
public static List <TaskData> GetTaskCollection() {
List <TaskData> Tasks = new List <TaskData> () {
new TaskData() {
TaskId = 1,
TaskName = "Project initiation",
StartDate = new DateTime(2019, 04, 02),
EndDate = new DateTime(2019, 04, 21),
SubTasks = (new List <TaskData> () {
new TaskData() {
TaskId = 2,
TaskName = "Identify Site location",
StartDate = new DateTime(2019, 04, 02),
Duration = "0",
Progress = 30,
},
new TaskData() {
TaskId = 3,
TaskName = "Perform soil test",
StartDate = new DateTime(2019, 04, 02),
Duration = "4",
Progress = 40,
},
new TaskData() {
TaskId = 4,
TaskName = "Soil test approval",
StartDate = new DateTime(2019, 04, 02),
Duration = "0",
Progress = 30
},
})
},
new TaskData() {
TaskId = 5,
TaskName = "Project estimation",
StartDate = new DateTime(2019, 04, 02),
EndDate = new DateTime(2019, 04, 21),
SubTasks = (new List <TaskData> () {
new TaskData() {
TaskId = 6,
TaskName = "Develop floor plan for estimation",
StartDate = new DateTime(2019, 04, 04),
Duration = "3",
Progress = 30,
},
new TaskData() {
TaskId = 7,
TaskName = "List materials",
StartDate = new DateTime(2019, 04, 04),
Duration = "3",
Progress = 40
},
new TaskData() {
TaskId = 8,
TaskName = "Estimation approval",
StartDate = new DateTime(2019, 04, 04),
Duration = "0",
Progress = 30,
}
})
}
};
return Tasks;
}
}Note: In dialog editing mode, the edit dialog appears when the TreeGrid or Gantt chart sides are double-clicked.
Sections or tabs in dialog
In the Gantt dialog, you can define the required tabs or editing sections using the AddDialogFields and EditDialogFields properties. Every tab is defined using the Type property.
@using Syncfusion.EJ2.Blazor.Gantt
<EjsGantt DataSource="@TaskCollection" Toolbar="@(new List<string>() { "Add" })" ResourceNameMapping="ResourceName"
ResourceIDMapping="ResourceId" Resources="@ResourceCollection" Height="450px" Width="700px">
<GanttTaskFields Id="TaskId" Name="TaskName" StartDate="StartDate" EndDate="EndDate"
Duration="Duration" Progress="Progress" Child="SubTasks" ResourceInfo="ResourceId" Notes="Notes"
Dependency="Predecessor">
</GanttTaskFields>
<GanttEditSettings AllowAdding="true" AllowEditing="true" Mode="EditMode.Dialog">
</GanttEditSettings>
<GanttEditDialogFields>
<GanttEditDialogField Type="DialogFieldType.General" HeaderText="General">
</GanttEditDialogField>
<GanttEditDialogField Type="DialogFieldType.Dependency"></GanttEditDialogField>
<GanttEditDialogField Type="DialogFieldType.Resources"></GanttEditDialogField>
<GanttEditDialogField Type="DialogFieldType.Notes"></GanttEditDialogField>
</GanttEditDialogFields>
<GanttAddDialogFields>
<GanttAddDialogField Type="DialogFieldType.General" HeaderText="General Tab"></GanttAddDialogField>
<GanttAddDialogField Type="DialogFieldType.Dependency"></GanttAddDialogField>
</GanttAddDialogFields>
</EjsGantt>
@code{
public List<TaskData> TaskCollection { get; set; }
public List<TaskResources> ResourceCollection { get; set; }
protected override void OnInitialized()
{
this.TaskCollection = GetTaskCollection();
this.ResourceCollection = GetResourceCollections();
}
public class TaskData
{
public int TaskId { get; set; }
public string TaskName { get; set; }
public DateTime StartDate { get; set; }
public DateTime EndDate { get; set; }
public string Duration { get; set; }
public int Progress { get; set; }
public List<TaskData> SubTasks { get; set; }
public int[] ResourceId { get; set; }
public string Notes { get; set; }
public string Predecessor { get; set; }
}
public class TaskResources
{
public int ResourceId { get; set; }
public string ResourceName { get; set; }
}
public static List <TaskResources> GetResourceCollections() {
List <TaskResources> Resources = new List <TaskResources> () {
new TaskResources() {
ResourceId = 1,
ResourceName = "Martin Tamer"
},
new TaskResources() {
ResourceId = 2,
ResourceName = "Rose Fuller"
},
new TaskResources() {
ResourceId = 3,
ResourceName = "Margaret Buchanan"
},
new TaskResources() {
ResourceId = 4,
ResourceName = "Fuller King"
}
};
return Resources;
}
public static List <TaskData> GetTaskCollection() {
List <TaskData> Tasks = new List <TaskData> () {
new TaskData() {
TaskId = 1,
TaskName = "Project initiation",
StartDate = new DateTime(2019, 04, 02),
EndDate = new DateTime(2019, 04, 21),
SubTasks = (new List <TaskData> () {
new TaskData() {
TaskId = 2,
TaskName = "Identify Site location",
StartDate = new DateTime(2019, 04, 02),
Duration = "0",
Progress = 30,
ResourceId = new int[] {
1
},
Notes = "Measure the total property area alloted for construction"
},
new TaskData() {
TaskId = 3,
TaskName = "Perform soil test",
StartDate = new DateTime(2019, 04, 02),
Duration = "4",
Predecessor = "2",
ResourceId = new int[] {
2,
3,
5
},
Notes = "Obtain an engineered soil test of lot where construction is planned.From an engineer or company specializing in soil testing"
},
new TaskData() {
TaskId = 4,
TaskName = "Soil test approval",
StartDate = new DateTime(2019, 04, 02),
Duration = "0",
Progress = 30,
Predecessor = "3"
},
})
},
new TaskData() {
TaskId = 5,
TaskName = "Project estimation",
StartDate = new DateTime(2019, 04, 02),
EndDate = new DateTime(2019, 04, 21),
SubTasks = (new List <TaskData> () {
new TaskData() {
TaskId = 6,
TaskName = "Develop floor plan for estimation",
StartDate = new DateTime(2019, 04, 04),
Duration = "3",
Progress = 30,
Predecessor = "4",
ResourceId = new int[] {
4
},
Notes = "Develop floor plans and obtain a materials list for estimations"
},
new TaskData() {
TaskId = 7,
TaskName = "List materials",
StartDate = new DateTime(2019, 04, 04),
Duration = "3",
Predecessor = "6",
ResourceId = new int[] {
4,
8
},
Notes = ""
},
new TaskData() {
TaskId = 8,
TaskName = "Estimation approval",
StartDate = new DateTime(2019, 04, 04),
Duration = "0",
Predecessor = "7",
ResourceId = new int[] {
12,
5
},
Notes = ""
}
})
}
};
return Tasks;
}
}
Tabs in Edit Dialog
Tabs in Add Dialog
Limiting data fields in general tab
In the Gantt dialog, you can make only specific data source fields visible for editing by using the AddDialogFields and EditDialogFields properties. The data fields are defined with Type and Fields properties.
Note: You can also define the custom fields in the add/edit dialog General tab using the Fields property.
@using Syncfusion.EJ2.Blazor.Gantt
<EjsGantt DataSource="@TaskCollection" Toolbar="@(new List<string>() { "Add" })" ResourceNameMapping="ResourceName"
ResourceIDMapping="ResourceId" Resources="@ResourceCollections" Height="450px" Width="700px">
<GanttTaskFields Id="TaskId" Name="TaskName" StartDate="StartDate" EndDate="EndDate"
Duration="Duration" Progress="Progress" Child="SubTasks"
ResourceInfo="ResourceId" Notes="Notes" Dependency="Dependency">
</GanttTaskFields>
<GanttEditSettings AllowAdding="true" AllowEditing="true" Mode="EditMode.Dialog">
</GanttEditSettings>
<GanttColumns>
<GanttColumn Field="TaskId" Width="50"></GanttColumn>
<GanttColumn Field="TaskName"></GanttColumn>
<GanttColumn Field="isParent" HeaderText="Custom Column"></GanttColumn>
<GanttColumn Field="StartDate"></GanttColumn>
<GanttColumn Field="Duration"></GanttColumn>
<GanttColumn Field="Progress"></GanttColumn>
</GanttColumns>
<GanttEditDialogFields>
<GanttEditDialogField Type="DialogFieldType.General" HeaderText="General"
Fields="@(new string[]{ "TaskId", "TaskName", "isParent" })"></GanttEditDialogField>
<GanttEditDialogField Type="DialogFieldType.Notes"></GanttEditDialogField>
</GanttEditDialogFields>
<GanttAddDialogFields>
<GanttAddDialogField Type="DialogFieldType.General" HeaderText="General Tab"
Fields="@(new string[]{ "TaskId", "TaskName", "isParent" })"></GanttAddDialogField>
<GanttAddDialogField Type="DialogFieldType.Dependency"></GanttAddDialogField>
</GanttAddDialogFields>
</EjsGantt>
@code{
public List<TaskData> TaskCollection { get; set; }
public List<TaskResources> ResourceCollections { get; set; }
protected override void OnInitialized()
{
this.TaskCollection = GetTaskCollection();
this.ResourceCollections = GetResourceCollection();
}
public class TaskData
{
public int TaskId { get; set; }
public string TaskName { get; set; }
public DateTime StartDate { get; set; }
public DateTime EndDate { get; set; }
public string Duration { get; set; }
public int Progress { get; set; }
public bool isParent { get; set; }
public List<TaskData> SubTasks { get; set; }
public int[] ResourceId { get; set; }
public string Notes { get; set; }
public string Predecessor { get; set; }
}
public class TaskResources
{
public int ResourceId { get; set; }
public string ResourceName { get; set; }
}
public static List <TaskResources> GetResourceCollection() {
List <TaskResources> Resources = new List <TaskResources> () {
new TaskResources() {
ResourceId = 1,
ResourceName = "Martin Tamer"
},
new TaskResources() {
ResourceId = 2,
ResourceName = "Rose Fuller"
},
new TaskResources() {
ResourceId = 3,
ResourceName = "Margaret Buchanan"
},
new TaskResources() {
ResourceId = 4,
ResourceName = "Fuller King"
}
};
return Resources;
}
public static List <TaskData> GetTaskCollection() {
List <TaskData> Tasks = new List <TaskData> () {
new TaskData() {
TaskId = 1,
TaskName = "Project initiation",
StartDate = new DateTime(2019, 04, 02),
EndDate = new DateTime(2019, 04, 21),
isParent = true,
SubTasks = (new List <TaskData> () {
new TaskData() {
TaskId = 2,
TaskName = "Identify Site location",
StartDate = new DateTime(2019, 04, 02),
Duration = "0",
Progress = 30,
ResourceId = new int[] {
1
},
Notes = "Measure the total property area alloted for construction"
},
new TaskData() {
TaskId = 3,
TaskName = "Perform soil test",
StartDate = new DateTime(2019, 04, 02),
Duration = "4",
Predecessor = "2",
ResourceId = new int[] {
2,
3
},
Notes = "Obtain an engineered soil test of lot where construction is planned.From an engineer or company specializing in soil testing"
},
new TaskData() {
TaskId = 4,
TaskName = "Soil test approval",
StartDate = new DateTime(2019, 04, 02),
Duration = "0",
Progress = 30,
Predecessor = "3"
},
})
},
new TaskData() {
TaskId = 5,
TaskName = "Project estimation",
StartDate = new DateTime(2019, 04, 02),
EndDate = new DateTime(2019, 04, 21),
isParent = true,
SubTasks = (new List <TaskData> () {
new TaskData() {
TaskId = 6,
TaskName = "Develop floor plan for estimation",
StartDate = new DateTime(2019, 04, 04),
Duration = "3",
Progress = 30,
Predecessor = "4",
ResourceId = new int[] {
4
},
Notes = "Develop floor plans and obtain a materials list for estimations"
},
new TaskData() {
TaskId = 7,
TaskName = "List materials",
StartDate = new DateTime(2019, 04, 04),
Duration = "3",
Predecessor = "6",
ResourceId = new int[] {
2,
1
},
Notes = ""
},
new TaskData() {
TaskId = 8,
TaskName = "Estimation approval",
StartDate = new DateTime(2019, 04, 04),
Duration = "0",
Predecessor = "7",
ResourceId = new int[] {
1,
3
},
Notes = ""
}
})
}
};
return Tasks;
}
}The following screenshot show the output of above code example.
Taskbar editing
Modify the task details through user interaction, such as resizing and dragging the taskbar, by enabling the AllowTaskbarEditing property.
@using Syncfusion.EJ2.Blazor.Gantt
<EjsGantt DataSource="@TaskCollection" Height="450px" Width="900px">
<GanttTaskFields Id="TaskId" Name="TaskName" StartDate="StartDate" EndDate="EndDate" Duration="Duration" Progress="Progress" Child="SubTasks">
</GanttTaskFields>
<GanttEditSettings AllowTaskbarEditing="true"></GanttEditSettings>
</EjsGantt>
@code{
public List<TaskData> TaskCollection { get; set; }
protected override void OnInitialized()
{
this.TaskCollection = GetTaskCollection();
}
public class TaskData
{
public int TaskId { get; set; }
public string TaskName { get; set; }
public DateTime StartDate { get; set; }
public DateTime EndDate { get; set; }
public string Duration { get; set; }
public int Progress { get; set; }
public List<TaskData> SubTasks { get; set; }
}
public static List<TaskData> GetTaskCollection()
{
List<TaskData> Tasks = new List<TaskData>() {
new TaskData() {
TaskId = 1,
TaskName = "Project initiation",
StartDate = new DateTime(2019, 04, 02),
EndDate = new DateTime(2019, 04, 21),
SubTasks = (new List <TaskData> () {
new TaskData() {
TaskId = 2,
TaskName = "Identify Site location",
StartDate = new DateTime(2019, 04, 02),
Duration = "0",
Progress = 30,
},
new TaskData() {
TaskId = 3,
TaskName = "Perform soil test",
StartDate = new DateTime(2019, 04, 02),
Duration = "4",
Progress = 40,
},
new TaskData() {
TaskId = 4,
TaskName = "Soil test approval",
StartDate = new DateTime(2019, 04, 02),
Duration = "0",
Progress = 30
},
})
},
new TaskData() {
TaskId = 5,
TaskName = "Project estimation",
StartDate = new DateTime(2019, 04, 02),
EndDate = new DateTime(2019, 04, 21),
SubTasks = (new List <TaskData> () {
new TaskData() {
TaskId = 6,
TaskName = "Develop floor plan for estimation",
StartDate = new DateTime(2019, 04, 04),
Duration = "3",
Progress = 30,
},
new TaskData() {
TaskId = 7,
TaskName = "List materials",
StartDate = new DateTime(2019, 04, 04),
Duration = "3",
Progress = 40
},
new TaskData() {
TaskId = 8,
TaskName = "Estimation approval",
StartDate = new DateTime(2019, 04, 04),
Duration = "0",
Progress = 30,
}
})
}
};
return Tasks;
}
}Task dependencies
In the Gantt component, you can update the dependencies between tasks and link the tasks interactively. The task dependencies can be mapped from the data source using the Dependency property.
You can update the task dependencies using the following ways:
- Mouse interactions: Using connector points in the taskbar, you can perform drag and drop action to create task dependency links.
- Edit dialog: Create or remove the task dependencies using the
Dependencytab in the edit dialog. - Cell editing: Create or remove the task links using cell editing.
The following code example demonstrates how to enable task dependency editing in the Gantt chart using the EditSettings property.
@using Syncfusion.EJ2.Blazor.Gantt
<EjsGantt DataSource="@TaskCollection" Height="450px" Width="700px">
<GanttTaskFields Id="TaskId" Name="TaskName" StartDate="StartDate" EndDate="EndDate" Duration="Duration" Progress="Progress" Child="SubTasks" Dependency="Predecessor">
</GanttTaskFields>
<GanttEditSettings AllowTaskbarEditing="true" AllowEditing="true" Mode="EditMode.Auto"></GanttEditSettings>
</EjsGantt>
@code{
public List<TaskData> TaskCollection { get; set; }
protected override void OnInitialized()
{
this.TaskCollection = GetTaskCollection();
}
public class TaskData
{
public int TaskId { get; set; }
public string TaskName { get; set; }
public DateTime StartDate { get; set; }
public DateTime EndDate { get; set; }
public string Duration { get; set; }
public int Progress { get; set; }
public string Predecessor { get; set; }
public List<TaskData> SubTasks { get; set; }
}
public static List <TaskData> GetTaskCollection() {
List <TaskData> Tasks = new List <TaskData> ();
Tasks.Add(new TaskData() {
TaskId = 1,
TaskName = "Project initiation",
StartDate = new DateTime(2019, 04, 02),
EndDate = new DateTime(2019, 04, 21),
SubTasks = (new List <TaskData> () {
new TaskData() {
TaskId = 2,
TaskName = "Identify Site location",
StartDate = new DateTime(2019, 04, 02),
Duration = "0",
Progress = 30,
},
new TaskData() {
TaskId = 3,
TaskName = "Perform soil test",
StartDate = new DateTime(2019, 04, 02),
Duration = "4",
Progress = 40,
Predecessor = "2"
},
new TaskData() {
TaskId = 4,
TaskName = "Soil test approval",
StartDate = new DateTime(2019, 04, 02),
Duration = "0",
Progress = 30,
Predecessor = "3"
},
})
});
Tasks.Add(new TaskData() {
TaskId = 5,
TaskName = "Project estimation",
StartDate = new DateTime(2019, 04, 02),
EndDate = new DateTime(2019, 04, 21),
SubTasks = (new List <TaskData> () {
new TaskData() {
TaskId = 6,
TaskName = "Develop floor plan for estimation",
StartDate = new DateTime(2019, 04, 04),
Duration = "3",
Progress = 30,
Predecessor = "4"
},
new TaskData() {
TaskId = 7,
TaskName = "List materials",
StartDate = new DateTime(2019, 04, 04),
Duration = "3",
Progress = 40,
Predecessor = "6"
},
new TaskData() {
TaskId = 8,
TaskName = "Estimation approval",
StartDate = new DateTime(2019, 04, 04),
Duration = "0",
Progress = 30,
Predecessor = "7"
},
})
});
return Tasks;
}
}
Updating with mouse interaction action
Updating with cell Edit
Updating with Dialog
Update task values using method
Tasks’ value can be dynamically updated by using the UpdateRecordById method. You can call this method on any custom action. The following code example shows how to use this method to update a task.
NOTE: Using the
UpdateRecordByIdmethod, you cannot update the task ID value.
@using Syncfusion.EJ2.Blazor.Gantt
<button @onclick="UpdateRecord">Update Task 3</button>
<EjsGantt @ref="Gantt" @ref:suppressField DataSource="@TaskCollection" Height="450px" Width="900px">
<GanttTaskFields Id="TaskId" Name="TaskName" StartDate="StartDate" EndDate="EndDate" Duration="Duration" Progress="Progress" Child="SubTasks">
</GanttTaskFields>
<GanttEditSettings AllowEditing="true"></GanttEditSettings>
</EjsGantt>
@code{
public EjsGantt<TaskData> Gantt;
public void UpdateRecord()
{
this.Gantt.UpdateRecordByID(new TaskData() { TaskId = 3, TaskName = "Updated by index value", StartDate = new DateTime(2019, 04, 02), Duration = "4",Progress = 50});
}
public List<TaskData> TaskCollection { get; set; }
protected override void OnInitialized()
{
this.TaskCollection = GetTaskCollection();
}
public class TaskData
{
public int TaskId { get; set; }
public string TaskName { get; set; }
public DateTime StartDate { get; set; }
public DateTime EndDate { get; set; }
public string Duration { get; set; }
public int Progress { get; set; }
public List<TaskData> SubTasks { get; set; }
}
public static List <TaskData> GetTaskCollection() {
List <TaskData> Tasks = new List <TaskData> () {
new TaskData() {
TaskId = 1,
TaskName = "Project initiation",
StartDate = new DateTime(2019, 04, 02),
EndDate = new DateTime(2019, 04, 21),
SubTasks = (new List <TaskData> () {
new TaskData() {
TaskId = 2,
TaskName = "Identify Site location",
StartDate = new DateTime(2019, 04, 02),
Duration = "0",
Progress = 30,
},
new TaskData() {
TaskId = 3,
TaskName = "Perform soil test",
StartDate = new DateTime(2019, 04, 02),
Duration = "4",
Progress = 40,
},
new TaskData() {
TaskId = 4,
TaskName = "Soil test approval",
StartDate = new DateTime(2019, 04, 02),
Duration = "0",
Progress = 30
},
})
},
new TaskData() {
TaskId = 5,
TaskName = "Project estimation",
StartDate = new DateTime(2019, 04, 02),
EndDate = new DateTime(2019, 04, 21),
SubTasks = (new List <TaskData> () {
new TaskData() {
TaskId = 6,
TaskName = "Develop floor plan for estimation",
StartDate = new DateTime(2019, 04, 04),
Duration = "3",
Progress = 30,
},
new TaskData() {
TaskId = 7,
TaskName = "List materials",
StartDate = new DateTime(2019, 04, 04),
Duration = "3",
Progress = 40
},
new TaskData() {
TaskId = 8,
TaskName = "Estimation approval",
StartDate = new DateTime(2019, 04, 04),
Duration = "0",
Progress = 30,
}
})
}
};
return Tasks;
}
}
Deleting tasks
A task delete option in the Gantt component can be enabled by enabling the EdiSettings.AllowDeleting property. Tasks can be deleted by clicking the delete toolbar item or using the DeleteRecord method. You can call this method dynamically on any custom actions like button click. The following code example shows how to enable the delete option in the Gantt component.
@using Syncfusion.EJ2.Blazor.Gantt
<button @onclick="DeleteRow">Delete task 2</button>
<EjsGantt @ref="Gantt" @ref:suppressField DataSource="@TaskCollection" Height="450px" Width="700px">
<GanttTaskFields Id="TaskId" Name="TaskName" StartDate="StartDate" EndDate="EndDate" Duration="Duration" Progress="Progress" Child="SubTasks">
</GanttTaskFields>
<GanttEditSettings AllowDeleting="true"></GanttEditSettings>
</EjsGantt>
@code{
public EjsGantt<TaskData> Gantt;
public void DeleteRow()
{
this.Gantt.DeleteRecord(2);
}
public List<TaskData> TaskCollection { get; set; }
protected override void OnInitialized()
{
this.TaskCollection = GetTaskCollection();
}
public class TaskData
{
public int TaskId { get; set; }
public string TaskName { get; set; }
public DateTime StartDate { get; set; }
public DateTime EndDate { get; set; }
public string Duration { get; set; }
public int Progress { get; set; }
public List<TaskData> SubTasks { get; set; }
}
public static List <TaskData> GetTaskCollection() {
List <TaskData> Tasks = new List <TaskData> () {
new TaskData() {
TaskId = 1,
TaskName = "Project initiation",
StartDate = new DateTime(2019, 04, 02),
EndDate = new DateTime(2019, 04, 21),
SubTasks = (new List <TaskData> () {
new TaskData() {
TaskId = 2,
TaskName = "Identify Site location",
StartDate = new DateTime(2019, 04, 02),
Duration = "0",
Progress = 30,
},
new TaskData() {
TaskId = 3,
TaskName = "Perform soil test",
StartDate = new DateTime(2019, 04, 02),
Duration = "4",
Progress = 40,
},
new TaskData() {
TaskId = 4,
TaskName = "Soil test approval",
StartDate = new DateTime(2019, 04, 02),
Duration = "0",
Progress = 30
},
})
},
new TaskData() {
TaskId = 5,
TaskName = "Project estimation",
StartDate = new DateTime(2019, 04, 02),
EndDate = new DateTime(2019, 04, 21),
SubTasks = (new List <TaskData> () {
new TaskData() {
TaskId = 6,
TaskName = "Develop floor plan for estimation",
StartDate = new DateTime(2019, 04, 04),
Duration = "3",
Progress = 30,
},
new TaskData() {
TaskId = 7,
TaskName = "List materials",
StartDate = new DateTime(2019, 04, 04),
Duration = "3",
Progress = 40
},
new TaskData() {
TaskId = 8,
TaskName = "Estimation approval",
StartDate = new DateTime(2019, 04, 04),
Duration = "0",
Progress = 30,
}
})
}
};
return Tasks;
}
}
You should set the
AllowDeletingvalue totrueto delete the record dynamically.
Delete confirmation message
Delete confirmation message is used to get confirmation from users before deleting a task. This confirmation message can be enabled by setting the EditSettings.ShowDeleteConfirmDialog property to true.
The following code snippet explains how to enable the delete confirmation message in Gantt.
@using Syncfusion.EJ2.Blazor.Gantt
<EjsGantt DataSource="@TaskCollection" Height="450px" Width="700px" Toolbar="@(new List<string>() { "Delete" })">
<GanttTaskFields Id="TaskId" Name="TaskName" StartDate="StartDate" EndDate="EndDate" Duration="Duration" Progress="Progress" Child="SubTasks">
</GanttTaskFields>
<GanttEditSettings AllowDeleting="true" ShowDeleteConfirmDialog="true"></GanttEditSettings>
</EjsGantt>
@code{
public List<TaskData> TaskCollection { get; set; }
protected override void OnInitialized()
{
this.TaskCollection = GetTaskCollection();
}
public class TaskData
{
public int TaskId { get; set; }
public string TaskName { get; set; }
public DateTime StartDate { get; set; }
public DateTime EndDate { get; set; }
public string Duration { get; set; }
public int Progress { get; set; }
public List<TaskData> SubTasks { get; set; }
}
public static List <TaskData> GetTaskCollection() {
List <TaskData> Tasks = new List <TaskData> () {
new TaskData() {
TaskId = 1,
TaskName = "Project initiation",
StartDate = new DateTime(2019, 04, 02),
EndDate = new DateTime(2019, 04, 21),
SubTasks = (new List <TaskData> () {
new TaskData() {
TaskId = 2,
TaskName = "Identify Site location",
StartDate = new DateTime(2019, 04, 02),
Duration = "0",
Progress = 30,
},
new TaskData() {
TaskId = 3,
TaskName = "Perform soil test",
StartDate = new DateTime(2019, 04, 02),
Duration = "4",
Progress = 40,
},
new TaskData() {
TaskId = 4,
TaskName = "Soil test approval",
StartDate = new DateTime(2019, 04, 02),
Duration = "0",
Progress = 30
},
})
},
new TaskData() {
TaskId = 5,
TaskName = "Project estimation",
StartDate = new DateTime(2019, 04, 02),
EndDate = new DateTime(2019, 04, 21),
SubTasks = (new List <TaskData> () {
new TaskData() {
TaskId = 6,
TaskName = "Develop floor plan for estimation",
StartDate = new DateTime(2019, 04, 04),
Duration = "3",
Progress = 30,
},
new TaskData() {
TaskId = 7,
TaskName = "List materials",
StartDate = new DateTime(2019, 04, 04),
Duration = "3",
Progress = 40
},
new TaskData() {
TaskId = 8,
TaskName = "Estimation approval",
StartDate = new DateTime(2019, 04, 04),
Duration = "0",
Progress = 30,
}
})
}
};
return Tasks;
}
}
Thank you for your feedback and comments.We will rectify this as soon as possible!