Managing Tasks in ASP.NET CORE Gantt Component
15 Mar 202424 minutes to read
The Gantt component has options to dynamically insert, delete, and update tasks in the 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 particular column.
The following code example shows you how to enable the cell editing in Gantt control.
<ejs-gantt id='Gantt' dataSource="ViewBag.dataSource" height="450px">
<e-gantt-taskfields id="TaskId" name="TaskName" startDate="StartDate"
endDate="EndDate" duration="Duration" progress="Progress" child="SubTasks">
</e-gantt-taskfields>
<e-gantt-editsettings allowEditing="true" mode="Auto"></e-gantt-editsettings>
</ejs-gantt>public IActionResult Index()
{
ViewBag.DataSource = GanttData.ProjectNewData();
return View();
}Cell edit type and its params
The columns.editType is used to define the edit type for any particular column. You can set the columns.editType based on data type of the column.
-
numeric edit-NumericTextBoxcomponent for integers, double, and decimal data types. -
default edit-TextBoxcomponent for string data type. -
dropdown edit-DropDownListcomponent to show all unique values related to that field. -
boolean edit-CheckBoxcomponent for boolean data type. -
date picker edit-DatePickercomponent for date data type. -
date time picker edit-DateTimePickercomponent for date time data type.
Also, you can customize the behavior of the editor component through the columns.edit.params.
The following table describes cell edit type component and their corresponding edit params of the column.
| Edit Type | Component | Example |
|---|---|---|
numericedit |
NumericTextBox |
params: { decimals: 2, value: 5 } |
dropdownedit |
DropDownList |
params: { value: ‘Germany’ } |
booleanedit |
Checkbox |
params: { checked: true} |
datepickeredit |
DatePicker |
params: { format:’dd.MM.yyyy’ } |
datetimepickeredit |
DateTimePicker |
params: { value: new Date() } |
@{
var editParams = new { @params = new { min = 1 } };
Object durationFormat = "durationFormat";
}
<ejs-gantt id='Gantt' dataSource="ViewBag.dataSource" height="450px">
<e-gantt-taskfields id="TaskId" name="TaskName" startDate="StartDate"
endDate="EndDate" duration="Duration" progress="Progress" child="SubTasks">
</e-gantt-taskfields>
<e-gantt-columns>
<e-gantt-column field="TaskId" width="150"> </e-gantt-column>
<e-gantt-column field="TaskName" headerText="Task Name"></e-gantt-column>
<e-gantt-column field="StartDate"></e-gantt-column>
<e-gantt-column field="Duration" edit=editParams editType="numericedit" valueAccessor="durationFormat"></e-gantt-column>
<e-gantt-column field="Progress"edit="@(new { @params = new Syncfusion.EJ2.Inputs.NumericTextBox() {ShowSpinButton=false}})" editType="numericedit"></e-gantt-column>
</e-gantt-columns>
<e-gantt-editsettings allowEditing="true"></e-gantt-editsettings>
</ejs-gantt>
<script>
function durationFormat(field, data, column) {
return data[field];
}
</script>public IActionResult Index()
{
ViewBag.DataSource = GanttData.ProjectNewData();
return View();
}
Cell edit template
The cell edit template is used to create a custom component for a particular column by invoking the following functions:
-
create- It is used to create the element at the time of initialization. -
write- It is used to create the custom component or assign default value at the time of editing. -
read- It is used to read the value from the component at the time of save. -
destroy- It is used to destroy the component.
<ejs-gantt id='Gantt' dataSource="ViewBag.dataSource" height="450px">
<e-gantt-taskfields id="TaskId" name="TaskName" startDate="StartDate"
endDate="EndDate" duration="Duration" progress="Progress" child="SubTasks">
</e-gantt-taskfields>
<e-gantt-columns>
<e-gantt-column field="TaskId" width="150"> </e-gantt-column>
<e-gantt-column field="TaskName" headerText="Task Name" edit="@(new {create = "create", read = "read", destroy = "destroy", write = "write"})"></e-gantt-column>
<e-gantt-column field="StartDate"></e-gantt-column>
<e-gantt-column field="Duration"></e-gantt-column>
<e-gantt-column field="Progress"></e-gantt-column>
</e-gantt-columns>
<e-gantt-editsettings allowEditing="true"></e-gantt-editsettings>
</ejs-gantt>
<script>
var elem;
var dropdownlistObj;
function create(args) {
elem = document.createElement('input');
return elem;
}
function write(args) {
var gantt = document.getElementById("Gantt").ej2_instances[0];
dropdownlistObj = new ej.dropdowns.DropDownList({
dataSource: gantt.treeGrid.grid.dataSource,
fields: { value: 'TaskName' },
value: args.rowData[args.column.field],
floatLabelType: 'Auto',
});
dropdownlistObj.appendTo(elem);
}
function destroy() {
dropdownlistObj.destroy();
}
function read(args) {
return dropdownlistObj.value;
}
</script>public IActionResult Index()
{
ViewBag.DataSource = GanttData.ProjectNewData();
return View();
}
Disable editing for particular column
You can disable editing for particular columns, by using the columns.allowEditing property.
In the following demo, editing is disabled for the TaskName column.
<ejs-gantt id='Gantt' dataSource="ViewBag.dataSource" height="450px">
<e-gantt-taskfields id="TaskId" name="TaskName" startDate="StartDate"
endDate="EndDate" duration="Duration" progress="Progress" child="SubTasks">
</e-gantt-taskfields>
<e-gantt-columns>
<e-gantt-column field="TaskId" width="150"> </e-gantt-column>
<e-gantt-column field="TaskName" headerText="Task Name" allowEditing="false"></e-gantt-column>
<e-gantt-column field="StartDate"></e-gantt-column>
<e-gantt-column field="Duration"></e-gantt-column>
<e-gantt-column field="Progress" ></e-gantt-column>
</e-gantt-columns>
<e-gantt-editsettings allowEditing="true"></e-gantt-editsettings>
</ejs-gantt>public IActionResult Index()
{
ViewBag.DataSource = GanttData.ProjectNewData();
return View();
}Read-only gantt
In Gantt, all create, update, delete operations can be disabled by setting readOnly property as true. The following sample demonstrates, render Gantt chart as read only.
<ejs-gantt id='Gantt' dataSource="ViewBag.dataSource" height="450px" toolbar="@(new List<string>() {
"Add", "Cancel", "CollapseAll", "Delete", "Edit", "ExpandAll", "NextTimeSpan", "PrevTimeSpan", "Search", "Update" })"
enableContextMenu="true" allowSorting="true" allowResizing="true" readOnly="true">
<e-gantt-taskfields id="TaskId" name="TaskName" startDate="StartDate"
endDate="EndDate" duration="Duration" progress="Progress" child="SubTasks">
</e-gantt-taskfields>
<e-gantt-editsettings allowAdding="true" allowEditing="true" allowTaskbarEditing="true" allowDeleting="true"></e-gantt-editsettings>
</ejs-gantt>public IActionResult Index()
{
ViewBag.DataSource = GanttData.ProjectNewData();
return View();
}
Open new task dialog with default values
You can set default values when new task dialog opens using actionBegin event when requestType is beforeOpenAddDialog.
@using Syncfusion.EJ2
<div>
<ejs-gantt id='Gantt' dataSource="ViewBag.dataSource" height="450px" toolbar="@(new List<string>() { "Add"})" actionBegin="onActionBegin">
<e-gantt-taskfields id="TaskId" name="TaskName" startDate="StartDate"
endDate="EndDate" duration="Duration" progress="Progress" child="SubTasks">
</e-gantt-taskfields>
<e-gantt-editsettings allowAdding="true"></e-gantt-editsettings>
</ejs-gantt>
</div>
<script>
function onActionBegin(args) {
if (args.requestType == 'beforeOpenAddDialog') {
args.rowData.TaskName = 'Gantt';
args.rowData.Progress = 70;
args.rowData.ganttProperties.taskName = 'Gantt';
args.rowData.ganttProperties.progress = 70;
}
}
</script>public IActionResult Index()
{
ViewBag.DataSource = ganttData();
ViewBag.projectResources = projectResources();
return View();
}
public static List<GanttResources> projectResources()
{
List<GanttResources> GanttResourcesCollection = new List<GanttResources>();
GanttResources Record1 = new GanttResources()
{
ResourceId = 1,
ResourceName = "Martin Tamer"
};
GanttResources Record2 = new GanttResources()
{
ResourceId = 2,
ResourceName = "Rose Fuller"
};
GanttResources Record3 = new GanttResources()
{
ResourceId = 3,
ResourceName = "Margaret Buchanan"
};
GanttResources Record4 = new GanttResources()
{
ResourceId = 4,
ResourceName = "Fuller King"
};
GanttResources Record5 = new GanttResources()
{
ResourceId = 5,
ResourceName = "Davolio Fuller"
};
GanttResources Record6 = new GanttResources()
{
ResourceId = 6,
ResourceName = "Van Jack"
};
GanttResources Record7 = new GanttResources()
{
ResourceId = 7,
ResourceName = "Fuller Buchanan"
};
GanttResources Record8 = new GanttResources()
{
ResourceId = 8,
ResourceName = "Jack Davolio"
};
GanttResources Record9 = new GanttResources()
{
ResourceId = 9,
ResourceName = "Tamer Vinet"
};
GanttResources Record10 = new GanttResources()
{
ResourceId = 10,
ResourceName = "Vinet Fuller"
};
GanttResources Record11 = new GanttResources()
{
ResourceId = 11,
ResourceName = "Bergs Anton"
};
GanttResources Record12 = new GanttResources()
{
ResourceId = 12,
ResourceName = "Construction Supervisor"
};
GanttResourcesCollection.Add(Record1);
GanttResourcesCollection.Add(Record2);
GanttResourcesCollection.Add(Record3);
GanttResourcesCollection.Add(Record4);
GanttResourcesCollection.Add(Record5);
GanttResourcesCollection.Add(Record6);
GanttResourcesCollection.Add(Record7);
GanttResourcesCollection.Add(Record8);
GanttResourcesCollection.Add(Record9);
GanttResourcesCollection.Add(Record10);
GanttResourcesCollection.Add(Record11);
GanttResourcesCollection.Add(Record12);
return GanttResourcesCollection;
}
public static List<GanttDataSource> ganttData()
{
List<GanttDataSource> GanttDataSourceCollection = new List<GanttDataSource>();
GanttDataSource Record1 = new GanttDataSource()
{
TaskId = 1,
TaskName = "Project initiation",
StartDate = new DateTime(2019, 04, 02),
EndDate = new DateTime(2019, 04, 21),
SubTasks = new List<GanttDataSource>(),
isParent= true
};
GanttDataSource Child1 = new GanttDataSource()
{
TaskId = 2,
TaskName = "Identify site location",
StartDate = new DateTime(2019, 04, 02),
Duration = 4,
Progress = 50,
ResourceId = new int[] { 1 },
info="Measure the total property area alloted for construction"
};
GanttDataSource Child2 = new GanttDataSource()
{
TaskId = 3,
TaskName = "Perform soil test",
StartDate = new DateTime(2019, 04, 02),
Duration = 4,
Progress = 50,
ResourceId = new int[] { 2, 3, 5 },
info= "Obtain an engineered soil test of lot where construction is planned."+
"From an engineer or company specializing in soil testing"
};
GanttDataSource Child3 = new GanttDataSource()
{
TaskId = 4,
TaskName = "Soil test approval",
StartDate = new DateTime(2019, 04, 02),
Duration = 4,
Dependency = "3FS",
Progress = 50
};
Record1.SubTasks.Add(Child1);
Record1.SubTasks.Add(Child2);
Record1.SubTasks.Add(Child3);
GanttDataSource Record2 = new GanttDataSource()
{
TaskId = 5,
TaskName = "Project estimation",
StartDate = new DateTime(2019, 04, 02),
EndDate = new DateTime(2019, 04, 21),
SubTasks = new List<GanttDataSource>(),
isParent= true
};
GanttDataSource Child4 = new GanttDataSource()
{
TaskId = 6,
TaskName = "Develop floor plan for estimation",
StartDate = new DateTime(2019, 04, 04),
Duration = 3,
Progress = 50,
ResourceId = new int[] { 4 },
info = "Develop floor plans and obtain a materials list for estimations"
};
GanttDataSource Child5 = new GanttDataSource()
{
TaskId = 7,
TaskName = "List materials",
StartDate = new DateTime(2019, 04, 04),
Duration = 3,
Progress = 50,
Dependency="6SS",
ResourceId = new int[] { 4, 8 },
};
Record2.SubTasks.Add(Child4);
Record2.SubTasks.Add(Child5);
GanttDataSourceCollection.Add(Record1);
GanttDataSourceCollection.Add(Record2);
return GanttDataSourceCollection;
}
public class GanttResources
{
public int ResourceId { get; set; }
public string ResourceName { get; set; }
}
public class GanttDataSource
{
public int TaskId { get; set; }
public string TaskName { get; set; }
public string Dependency { get; set; }
public bool isParent { get; set; }
public string info { get; set; }
public DateTime StartDate { get; set; }
public DateTime EndDate { get; set; }
public int? Duration { get; set; }
public int Progress { get; set; }
public List<GanttDataSource> SubTasks { get; set; }
public int[] ResourceId { get; set; }
}
Customize control in add/edit dialog
In Gantt Chart, the controls such as form elements, grid and RTE in add and edit dialog can be customized by using AdditionalParams property.
Customize general tab of dialog
In the general tab of add/edit dialog, the custom input Fields can be included into fields by defining the field names either from the data source or template in AddDialogFields and EditDialogFields respectively.
In the below sample, added field from the template to general tab.
@using Syncfusion.EJ2
<div>
<ejs-gantt id='Gantt' dataSource="ViewBag.dataSource" height="450px" toolbar="@(new List<string>() { 'Add', 'Edit', 'Update', 'Delete', 'Cancel', 'ExpandAll', 'CollapseAll'})" actionBegin="onActionBegin">
<e-gantt-taskfields id="TaskId" name="TaskName" startDate="StartDate"
endDate="EndDate" duration="Duration" progress="Progress" child="SubTasks">
</e-gantt-taskfields>
<e-gantt-editsettings allowAdding="true"></e-gantt-editsettings>
<e-gantt-adddialogfields>
<e-gantt-adddialogfield type="General" headerText="General Tab" fields=["TaskID", "TaskName","newInput"]></e-gantt-adddialogfield>
<e-gantt-adddialogfield type="Dependency"></e-gantt-adddialogfield>
<e-gantt-adddialogfield type="Resources"></e-gantt-adddialogfield>
<e-gantt-adddialogfield type="Notes"></e-gantt-adddialogfield>
</e-gantt-adddialogfields>
<e-gantt-editdialogfields>
<e-gantt-editdialogfield type="General" headerText="General" fields=["TaskID", "TaskName","newInput"]></e-gantt-editdialogfield>
<e-gantt-editdialogfield type="Dependency"></e-gantt-editdialogfield>
<e-gantt-editdialogfield type="Resources"></e-gantt-editdialogfield>
<e-gantt-editdialogfield type="Notes"></e-gantt-editdialogfield>
</e-gantt-editdialogfields>
</ejs-gantt>
</div>public IActionResult Index()
{
ViewBag.DataSource = ganttData();
ViewBag.projectResources = projectResources();
return View();
}
public static List<GanttResources> projectResources()
{
List<GanttResources> GanttResourcesCollection = new List<GanttResources>();
GanttResources Record1 = new GanttResources()
{
ResourceId = 1,
ResourceName = "Martin Tamer"
};
GanttResources Record2 = new GanttResources()
{
ResourceId = 2,
ResourceName = "Rose Fuller"
};
GanttResources Record3 = new GanttResources()
{
ResourceId = 3,
ResourceName = "Margaret Buchanan"
};
GanttResources Record4 = new GanttResources()
{
ResourceId = 4,
ResourceName = "Fuller King"
};
GanttResources Record5 = new GanttResources()
{
ResourceId = 5,
ResourceName = "Davolio Fuller"
};
GanttResources Record6 = new GanttResources()
{
ResourceId = 6,
ResourceName = "Van Jack"
};
GanttResources Record7 = new GanttResources()
{
ResourceId = 7,
ResourceName = "Fuller Buchanan"
};
GanttResources Record8 = new GanttResources()
{
ResourceId = 8,
ResourceName = "Jack Davolio"
};
GanttResources Record9 = new GanttResources()
{
ResourceId = 9,
ResourceName = "Tamer Vinet"
};
GanttResources Record10 = new GanttResources()
{
ResourceId = 10,
ResourceName = "Vinet Fuller"
};
GanttResources Record11 = new GanttResources()
{
ResourceId = 11,
ResourceName = "Bergs Anton"
};
GanttResources Record12 = new GanttResources()
{
ResourceId = 12,
ResourceName = "Construction Supervisor"
};
GanttResourcesCollection.Add(Record1);
GanttResourcesCollection.Add(Record2);
GanttResourcesCollection.Add(Record3);
GanttResourcesCollection.Add(Record4);
GanttResourcesCollection.Add(Record5);
GanttResourcesCollection.Add(Record6);
GanttResourcesCollection.Add(Record7);
GanttResourcesCollection.Add(Record8);
GanttResourcesCollection.Add(Record9);
GanttResourcesCollection.Add(Record10);
GanttResourcesCollection.Add(Record11);
GanttResourcesCollection.Add(Record12);
return GanttResourcesCollection;
}
public static List<GanttDataSource> ganttData()
{
List<GanttDataSource> GanttDataSourceCollection = new List<GanttDataSource>();
GanttDataSource Record1 = new GanttDataSource()
{
TaskId = 1,
TaskName = "Project initiation",
StartDate = new DateTime(2019, 04, 02),
EndDate = new DateTime(2019, 04, 21),
SubTasks = new List<GanttDataSource>(),
isParent= true
};
GanttDataSource Child1 = new GanttDataSource()
{
TaskId = 2,
TaskName = "Identify site location",
StartDate = new DateTime(2019, 04, 02),
Duration = 4,
Progress = 50,
ResourceId = new int[] { 1 },
info="Measure the total property area alloted for construction"
};
GanttDataSource Child2 = new GanttDataSource()
{
TaskId = 3,
TaskName = "Perform soil test",
StartDate = new DateTime(2019, 04, 02),
Duration = 4,
Progress = 50,
ResourceId = new int[] { 2, 3, 5 },
info= "Obtain an engineered soil test of lot where construction is planned."+
"From an engineer or company specializing in soil testing"
};
GanttDataSource Child3 = new GanttDataSource()
{
TaskId = 4,
TaskName = "Soil test approval",
StartDate = new DateTime(2019, 04, 02),
Duration = 4,
Dependency = "3FS",
Progress = 50
};
Record1.SubTasks.Add(Child1);
Record1.SubTasks.Add(Child2);
Record1.SubTasks.Add(Child3);
GanttDataSource Record2 = new GanttDataSource()
{
TaskId = 5,
TaskName = "Project estimation",
StartDate = new DateTime(2019, 04, 02),
EndDate = new DateTime(2019, 04, 21),
SubTasks = new List<GanttDataSource>(),
isParent= true
};
GanttDataSource Child4 = new GanttDataSource()
{
TaskId = 6,
TaskName = "Develop floor plan for estimation",
StartDate = new DateTime(2019, 04, 04),
Duration = 3,
Progress = 50,
ResourceId = new int[] { 4 },
info = "Develop floor plans and obtain a materials list for estimations"
};
GanttDataSource Child5 = new GanttDataSource()
{
TaskId = 7,
TaskName = "List materials",
StartDate = new DateTime(2019, 04, 04),
Duration = 3,
Progress = 50,
Dependency="6SS",
ResourceId = new int[] { 4, 8 },
};
Record2.SubTasks.Add(Child4);
Record2.SubTasks.Add(Child5);
GanttDataSourceCollection.Add(Record1);
GanttDataSourceCollection.Add(Record2);
return GanttDataSourceCollection;
}
public class GanttResources
{
public int ResourceId { get; set; }
public string ResourceName { get; set; }
}
public class GanttDataSource
{
public int TaskId { get; set; }
public string TaskName { get; set; }
public string Dependency { get; set; }
public bool isParent { get; set; }
public string info { get; set; }
public DateTime StartDate { get; set; }
public DateTime EndDate { get; set; }
public int? Duration { get; set; }
public int Progress { get; set; }
public List<GanttDataSource> SubTasks { get; set; }
public int[] ResourceId { get; set; }
}Customize dependency, segments and resources tab of dialog
Grid component in the dependency, segment and resource tab of add/edit dialog can be customized, by defining grid module properties in the AdditionalParams property of AddDialogFields and EditDialogFields.
In the below code show cases, how to add additional features to dependency, segments and resources tab.
@using Syncfusion.EJ2
<div>
<ejs-gantt id='Gantt' dataSource="ViewBag.dataSource" height="450px" toolbar="@(new List<string>() { 'Add', 'Edit', 'Update', 'Delete', 'Cancel', 'ExpandAll', 'CollapseAll'})" actionBegin="onActionBegin">
<e-gantt-taskfields id="TaskId" name="TaskName" startDate="StartDate"
endDate="EndDate" duration="Duration" progress="Progress" child="SubTasks">
</e-gantt-taskfields>
<e-gantt-editsettings allowAdding="true"></e-gantt-editsettings>
<e-gantt-adddialogfields>
<e-gantt-adddialogfield type="General" headerText="General Tab" ></e-gantt-adddialogfield>
<e-gantt-adddialogfield type="Dependency" additionalParams = {allowPaging: true, allowSorting: true, toolbar: ["Search", "Print",]}></e-gantt-adddialogfield>
<e-gantt-adddialogfield type="Resources" additionalParams= { allowSorting: true, allowPaging: true, toolbar: ["Search", "Print"], columns: [{ field: "newData" }]}></e-gantt-adddialogfield>
<e-gantt-editdialogfield type="Segment" additionalParams = {columns:[{field:"segmentTask",width:"170px" ,headerText:"Segment Task"}],}></e-gantt-editdialogfield>
<e-gantt-adddialogfield type="Notes"></e-gantt-adddialogfield>
</e-gantt-adddialogfields>
<e-gantt-editdialogfields>
<e-gantt-editdialogfield type="General" headerText="General"></e-gantt-editdialogfield>
<e-gantt-editdialogfield type="Dependency" additionalParams = {allowPaging: true, allowSorting: true, toolbar: ["Search", "Print",]}></e-gantt-editdialogfield>
<e-gantt-editdialogfield type="Resources" additionalParams= { allowSorting: true, allowPaging: true, toolbar: ["Search", "Print"], columns: [{ field: "newData" }]}></e-gantt-editdialogfield>
<e-gantt-editdialogfield type="Segment" additionalParams = {columns:[{field:"segmentTask",width:"170px" ,headerText:"Segment Task"}],}></e-gantt-editdialogfield>
<e-gantt-editdialogfield type="Notes"></e-gantt-editdialogfield>
</e-gantt-editdialogfields>
</ejs-gantt>
</div>public IActionResult Index()
{
ViewBag.DataSource = ganttData();
ViewBag.projectResources = projectResources();
return View();
}
public static List<GanttResources> projectResources()
{
List<GanttResources> GanttResourcesCollection = new List<GanttResources>();
GanttResources Record1 = new GanttResources()
{
ResourceId = 1,
ResourceName = "Martin Tamer"
};
GanttResources Record2 = new GanttResources()
{
ResourceId = 2,
ResourceName = "Rose Fuller"
};
GanttResources Record3 = new GanttResources()
{
ResourceId = 3,
ResourceName = "Margaret Buchanan"
};
GanttResources Record4 = new GanttResources()
{
ResourceId = 4,
ResourceName = "Fuller King"
};
GanttResources Record5 = new GanttResources()
{
ResourceId = 5,
ResourceName = "Davolio Fuller"
};
GanttResources Record6 = new GanttResources()
{
ResourceId = 6,
ResourceName = "Van Jack"
};
GanttResources Record7 = new GanttResources()
{
ResourceId = 7,
ResourceName = "Fuller Buchanan"
};
GanttResources Record8 = new GanttResources()
{
ResourceId = 8,
ResourceName = "Jack Davolio"
};
GanttResources Record9 = new GanttResources()
{
ResourceId = 9,
ResourceName = "Tamer Vinet"
};
GanttResources Record10 = new GanttResources()
{
ResourceId = 10,
ResourceName = "Vinet Fuller"
};
GanttResources Record11 = new GanttResources()
{
ResourceId = 11,
ResourceName = "Bergs Anton"
};
GanttResources Record12 = new GanttResources()
{
ResourceId = 12,
ResourceName = "Construction Supervisor"
};
GanttResourcesCollection.Add(Record1);
GanttResourcesCollection.Add(Record2);
GanttResourcesCollection.Add(Record3);
GanttResourcesCollection.Add(Record4);
GanttResourcesCollection.Add(Record5);
GanttResourcesCollection.Add(Record6);
GanttResourcesCollection.Add(Record7);
GanttResourcesCollection.Add(Record8);
GanttResourcesCollection.Add(Record9);
GanttResourcesCollection.Add(Record10);
GanttResourcesCollection.Add(Record11);
GanttResourcesCollection.Add(Record12);
return GanttResourcesCollection;
}
public static List<GanttDataSource> ganttData()
{
List<GanttDataSource> GanttDataSourceCollection = new List<GanttDataSource>();
GanttDataSource Record1 = new GanttDataSource()
{
TaskId = 1,
TaskName = "Project initiation",
StartDate = new DateTime(2019, 04, 02),
EndDate = new DateTime(2019, 04, 21),
SubTasks = new List<GanttDataSource>(),
isParent= true
};
GanttDataSource Child1 = new GanttDataSource()
{
TaskId = 2,
TaskName = "Identify site location",
StartDate = new DateTime(2019, 04, 02),
Duration = 4,
Progress = 50,
ResourceId = new int[] { 1 },
info="Measure the total property area alloted for construction"
};
GanttDataSource Child2 = new GanttDataSource()
{
TaskId = 3,
TaskName = "Perform soil test",
StartDate = new DateTime(2019, 04, 02),
Duration = 4,
Progress = 50,
ResourceId = new int[] { 2, 3, 5 },
info= "Obtain an engineered soil test of lot where construction is planned."+
"From an engineer or company specializing in soil testing"
};
GanttDataSource Child3 = new GanttDataSource()
{
TaskId = 4,
TaskName = "Soil test approval",
StartDate = new DateTime(2019, 04, 02),
Duration = 4,
Dependency = "3FS",
Progress = 50
};
Record1.SubTasks.Add(Child1);
Record1.SubTasks.Add(Child2);
Record1.SubTasks.Add(Child3);
GanttDataSource Record2 = new GanttDataSource()
{
TaskId = 5,
TaskName = "Project estimation",
StartDate = new DateTime(2019, 04, 02),
EndDate = new DateTime(2019, 04, 21),
SubTasks = new List<GanttDataSource>(),
isParent= true
};
GanttDataSource Child4 = new GanttDataSource()
{
TaskId = 6,
TaskName = "Develop floor plan for estimation",
StartDate = new DateTime(2019, 04, 04),
Duration = 3,
Progress = 50,
ResourceId = new int[] { 4 },
info = "Develop floor plans and obtain a materials list for estimations"
};
GanttDataSource Child5 = new GanttDataSource()
{
TaskId = 7,
TaskName = "List materials",
StartDate = new DateTime(2019, 04, 04),
Duration = 3,
Progress = 50,
Dependency="6SS",
ResourceId = new int[] { 4, 8 },
};
Record2.SubTasks.Add(Child4);
Record2.SubTasks.Add(Child5);
GanttDataSourceCollection.Add(Record1);
GanttDataSourceCollection.Add(Record2);
return GanttDataSourceCollection;
}
public class GanttResources
{
public int ResourceId { get; set; }
public string ResourceName { get; set; }
}
public class GanttDataSource
{
public int TaskId { get; set; }
public string TaskName { get; set; }
public string Dependency { get; set; }
public bool isParent { get; set; }
public string info { get; set; }
public DateTime StartDate { get; set; }
public DateTime EndDate { get; set; }
public int? Duration { get; set; }
public int Progress { get; set; }
public List<GanttDataSource> SubTasks { get; set; }
public int[] ResourceId { get; set; }
}Customize note dialog tab
RTE component in notes tab of add and edit dialog can be customized, by defining RTE module properties in the AdditionalParams property of AddDialogFields and EditDialogFields.
The below code shows how to enable inline mode to RTE in notes tab.
@using Syncfusion.EJ2
<div>
<ejs-gantt id='Gantt' dataSource="ViewBag.dataSource" height="450px" toolbar="@(new List<string>() { 'Add', 'Edit', 'Update', 'Delete', 'Cancel', 'ExpandAll', 'CollapseAll'})" actionBegin="onActionBegin">
<e-gantt-taskfields id="TaskId" name="TaskName" startDate="StartDate"
endDate="EndDate" duration="Duration" progress="Progress" child="SubTasks">
</e-gantt-taskfields>
<e-gantt-editsettings allowAdding="true"></e-gantt-editsettings>
<e-gantt-adddialogfields>
<e-gantt-adddialogfield type="General" headerText="General Tab" ></e-gantt-adddialogfield>
<e-gantt-adddialogfield type="Dependency" ></e-gantt-adddialogfield>
<e-gantt-adddialogfield type="Resources" ></e-gantt-adddialogfield>
<e-gantt-editdialogfield type="Segment" ></e-gantt-editdialogfield>
<e-gantt-adddialogfield type="Notes" additionalParams={inlineMode: { enable: true,onSelection: true }}></e-gantt-adddialogfield>
</e-gantt-adddialogfields>
<e-gantt-editdialogfields>
e-gantt-adddialogfield type="General" headerText="General Tab" ></e-gantt-adddialogfield>
<e-gantt-adddialogfield type="Dependency" ></e-gantt-adddialogfield>
<e-gantt-adddialogfield type="Resources" ></e-gantt-adddialogfield>
<e-gantt-editdialogfield type="Segment" ></e-gantt-editdialogfield>
<e-gantt-adddialogfield type="Notes" additionalParams={inlineMode: { enable: true,onSelection: true }}></e-gantt-adddialogfield>
</e-gantt-editdialogfields>
</ejs-gantt>
</div>public IActionResult Index()
{
ViewBag.DataSource = ganttData();
ViewBag.projectResources = projectResources();
return View();
}
public static List<GanttResources> projectResources()
{
List<GanttResources> GanttResourcesCollection = new List<GanttResources>();
GanttResources Record1 = new GanttResources()
{
ResourceId = 1,
ResourceName = "Martin Tamer"
};
GanttResources Record2 = new GanttResources()
{
ResourceId = 2,
ResourceName = "Rose Fuller"
};
GanttResources Record3 = new GanttResources()
{
ResourceId = 3,
ResourceName = "Margaret Buchanan"
};
GanttResources Record4 = new GanttResources()
{
ResourceId = 4,
ResourceName = "Fuller King"
};
GanttResources Record5 = new GanttResources()
{
ResourceId = 5,
ResourceName = "Davolio Fuller"
};
GanttResources Record6 = new GanttResources()
{
ResourceId = 6,
ResourceName = "Van Jack"
};
GanttResources Record7 = new GanttResources()
{
ResourceId = 7,
ResourceName = "Fuller Buchanan"
};
GanttResources Record8 = new GanttResources()
{
ResourceId = 8,
ResourceName = "Jack Davolio"
};
GanttResources Record9 = new GanttResources()
{
ResourceId = 9,
ResourceName = "Tamer Vinet"
};
GanttResources Record10 = new GanttResources()
{
ResourceId = 10,
ResourceName = "Vinet Fuller"
};
GanttResources Record11 = new GanttResources()
{
ResourceId = 11,
ResourceName = "Bergs Anton"
};
GanttResources Record12 = new GanttResources()
{
ResourceId = 12,
ResourceName = "Construction Supervisor"
};
GanttResourcesCollection.Add(Record1);
GanttResourcesCollection.Add(Record2);
GanttResourcesCollection.Add(Record3);
GanttResourcesCollection.Add(Record4);
GanttResourcesCollection.Add(Record5);
GanttResourcesCollection.Add(Record6);
GanttResourcesCollection.Add(Record7);
GanttResourcesCollection.Add(Record8);
GanttResourcesCollection.Add(Record9);
GanttResourcesCollection.Add(Record10);
GanttResourcesCollection.Add(Record11);
GanttResourcesCollection.Add(Record12);
return GanttResourcesCollection;
}
public static List<GanttDataSource> ganttData()
{
List<GanttDataSource> GanttDataSourceCollection = new List<GanttDataSource>();
GanttDataSource Record1 = new GanttDataSource()
{
TaskId = 1,
TaskName = "Project initiation",
StartDate = new DateTime(2019, 04, 02),
EndDate = new DateTime(2019, 04, 21),
SubTasks = new List<GanttDataSource>(),
isParent= true
};
GanttDataSource Child1 = new GanttDataSource()
{
TaskId = 2,
TaskName = "Identify site location",
StartDate = new DateTime(2019, 04, 02),
Duration = 4,
Progress = 50,
ResourceId = new int[] { 1 },
info="Measure the total property area alloted for construction"
};
GanttDataSource Child2 = new GanttDataSource()
{
TaskId = 3,
TaskName = "Perform soil test",
StartDate = new DateTime(2019, 04, 02),
Duration = 4,
Progress = 50,
ResourceId = new int[] { 2, 3, 5 },
info= "Obtain an engineered soil test of lot where construction is planned."+
"From an engineer or company specializing in soil testing"
};
GanttDataSource Child3 = new GanttDataSource()
{
TaskId = 4,
TaskName = "Soil test approval",
StartDate = new DateTime(2019, 04, 02),
Duration = 4,
Dependency = "3FS",
Progress = 50
};
Record1.SubTasks.Add(Child1);
Record1.SubTasks.Add(Child2);
Record1.SubTasks.Add(Child3);
GanttDataSource Record2 = new GanttDataSource()
{
TaskId = 5,
TaskName = "Project estimation",
StartDate = new DateTime(2019, 04, 02),
EndDate = new DateTime(2019, 04, 21),
SubTasks = new List<GanttDataSource>(),
isParent= true
};
GanttDataSource Child4 = new GanttDataSource()
{
TaskId = 6,
TaskName = "Develop floor plan for estimation",
StartDate = new DateTime(2019, 04, 04),
Duration = 3,
Progress = 50,
ResourceId = new int[] { 4 },
info = "Develop floor plans and obtain a materials list for estimations"
};
GanttDataSource Child5 = new GanttDataSource()
{
TaskId = 7,
TaskName = "List materials",
StartDate = new DateTime(2019, 04, 04),
Duration = 3,
Progress = 50,
Dependency="6SS",
ResourceId = new int[] { 4, 8 },
};
Record2.SubTasks.Add(Child4);
Record2.SubTasks.Add(Child5);
GanttDataSourceCollection.Add(Record1);
GanttDataSourceCollection.Add(Record2);
return GanttDataSourceCollection;
}
public class GanttResources
{
public int ResourceId { get; set; }
public string ResourceName { get; set; }
}
public class GanttDataSource
{
public int TaskId { get; set; }
public string TaskName { get; set; }
public string Dependency { get; set; }
public bool isParent { get; set; }
public string info { get; set; }
public DateTime StartDate { get; set; }
public DateTime EndDate { get; set; }
public int? Duration { get; set; }
public int Progress { get; set; }
public List<GanttDataSource> SubTasks { get; set; }
public int[] ResourceId { get; set; }
}Troubleshoot: Editing works only when primary key column is defined
Editing feature requires a primary key column for CRUD operations. While defining columns in Gantt using the columns property, it is mandatory that any one of the columns, must be a primary column. By default, the id column will be the primary key column. If id column is not defined, we need to enable isPrimaryKey for any one of the columns defined in the columns property.
Touch interaction
The Gantt control editing actions can be achieved using the double tap and tap and drag actions on a element.
The following table describes different types of editing modes available in Gantt.
| Action | Description |
|---|---|
Cell editing |
To perform double tap on a specific cell, initiate the cell to be in edit state. |
Dialog editing |
To perform double tap on a specific row, initiate the edit dialog to be opened. |
Taskbar editing |
Taskbar editing action is initiated using the tap action on the taskbar. Parent taskbar : Once you tap on the parent taskbar, it will be changed to editing state. Perform only dragging action on parent taskbar editing.  Child taskbar : Once you tap the child taskbar, it will be changed to editing state.  Dragging taskbar : To drag a taskbar to the left or right in editing state. Resizing taskbar : To resize a taskbar, drag the left/right resize icon. Progress resizing : To change the progress, drag the progress resize icon to the left or right direction. |
Task dependency editing
You can tap the left/right connector point to initiate task dependencies edit mode and again tap another taskbar to establish the dependency line between two taskbars.
The following table explains the taskbar state in dependency edit mode.
| Taskbar state | Description |
|---|---|
Parent taskbar |
You cannot create dependency relationship to parent tasks. 
|
Taskbar without dependency |
If you tap a valid child taskbar, it will create FS type dependency line between tasks, otherwise exits from task dependency edit mode. 
|
Taskbar with dependency |
If you tap the second taskbar, which has already been directly connected, it will ask to remove it. 
|
Removing dependency |
Once you tap the taskbar with direct dependency, then confirmation dialog will be shown for removing dependency. 
|
NOTE
In mobile device, you cannot create dependency other than
FSby taskbar editing. By using cell/dialog editing, you can add all type of dependencies.
Taskbar editing tooltip
The taskbar editing tooltip can be customized using the TooltipSettings.Editing property. The following code example shows how to customize the taskbar editing tooltip in Gantt.
<ejs-gantt id='Gantt' dataSource="ViewBag.DataSource" height="450px">
<e-gantt-taskfields id="TaskId" name="TaskName" startDate="StartDate" endDate="EndDate" progress="Progress" child="SubTasks" duration="Duration">
</e-gantt-taskfields>
<e-gantt-editsettings allowTaskbarEditing="true"></e-gantt-editsettings>
<e-gantt-tooltipsettings editing="#editingTooltip">
</e-gantt-tooltipsettings>
</ejs-gantt>
<script type="text/x-jsrender" id="editingTooltip">
<div>Duration : ${duration}</div>
</script>public IActionResult Index()
{
ViewBag.DataSource = GanttData.ProjectNewData();
return View();
}The below screenshot shows the output of above code example.
