Export
15 Mar 202424 minutes to read
PDF Export
PDF export allows exporting Gantt data to PDF document. You need to use the pdfExport method for exporting. To enable PDF export in the Gantt, set the allowPdfExport to true.
To export data to PDF document, inject the PdfExport module in Gantt.
NOTE
Currently, we don’t have support for exporting the manually scheduled tasks.
<ejs-gantt id='Gantt' dataSource="ViewBag.dataSource" toolbar="@(new List<string>() { "PdfExport" })" toolbarClick="toolbarClick" pdfQueryCellInfo="pdfQueryCellInfo" allowPdfExport="true" height="450px" resources="ViewBag.projectResources">
<e-gantt-taskfields id="TaskId" name="TaskName" startDate="StartDate"
endDate="EndDate" duration="Duration" progress="Progress" child="SubTasks" resourceInfo="ResourceId">
</e-gantt-taskfields>
<e-gantt-resourcefields id="ResourceId" name="ResourceName"> </e-gantt-resourcefields>
<e-gantt-columns>
<e-gantt-column field="TaskId" headerText="Task Id" width="50"></e-gantt-column>
<e-gantt-column field="TaskName" headerText="Task Name" width="250"></e-gantt-column>
<e-gantt-column field="ResourceId" headerText="Resources" template="#columnTemplate"></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>
</ejs-gantt>
<script>
function toolbarClick(args) {
var gantt = document.getElementById("GanttContainer").ej2_instances[0];
if (args.item.id === 'GanttContainer_pdfexport') {
gantt.pdfExport();
}
}
function pdfQueryCellInfo(args){
if (args.column.headerText === 'Resources') {
{
args.image = { height:40,width:40, base64: (args as any).data.taskData.resourcesImage };
}
} }
</script>
<script type="text/x-jsrender" id="columnTemplate">
${if(ganttProperties.resourceNames)}
<div class="image">
<img src="${TaskID}.png" style="height:40px;width:40px" /><div style="display:inline-block;width:100%;position:relative;left:30px;top:-14px">${ganttProperties.resourceNames}</div>
</div>
${/if}
</script>public IActionResult Index()
{
ViewBag.DataSource = GanttData.ProjectNewData();
return View();
}Indicators in PDF exporting
The PDF export functionality allows users to export Gantt charts enriched with dynamic indicators and accompanying images.
These indicators, represented by images,can be effortlessly defined using the base64 encoding value in the data object of datasource.This data object field should be mapped to indiactor property of task fields.
<ejs-gantt id='GanttContainer' dataSource="ViewBag.DataSource" toolbar="@(new List<string>() { "PdfExport" })"
toolbarClick="toolbarClick" allowPdfExport="true">
<e-gantt-taskfields id="TaskId" name="TaskName" startDate="StartDate" duration="Duration" progress="Progress" child="SubTasks" indicators="Indicators">
</e-gantt-taskfields>
</ejs-gantt>
<script>
function toolbarClick(args) {
var gantt = document.getElementById("GanttContainer").ej2_instances[0];
if (args.item.id === 'GanttContainer_pdfexport') {
gantt.pdfExport();
}
}
</script>public IActionResult Index()
{
ViewBag.DataSource = ganttData();
return View();
}
public static List<GanttDataSource> ganttData()
{
var indicatorImage = "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";
List<GanttDataSource> GanttDataSourceCollection = new List<GanttDataSource>();
List<IndicatorsData> Indicators = new List<IndicatorsData>();
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>(),
};
GanttDataSource Child1 = new GanttDataSource()
{
TaskId = 2,
TaskName = "Identify site location",
StartDate = new DateTime(2019, 04, 02),
Duration = 4,
Progress = 70,
Indicators = new List<IndicatorsModel>() {
new IndicatorsModel() {date = "04/08/2019", iconClass="e-btn-icon e-notes-info e-icons e-icon-left e-gantt e-notes-info::before", name= "Custom String", tooltip="Follow up",base64 = indicatorImage},
new IndicatorsModel() {date = "04/11/2019", iconClass="e-btn-icon e-notes-info e-icons e-icon-left e-gantt e-notes-info::before", name= "<span style="color:red">String Template</span>" base64 = indicatorImage}
}
};
GanttDataSource Child2 = new GanttDataSource()
{
TaskId = 3,
TaskName = "Perform soil test",
StartDate = new DateTime(2019, 04, 02),
Duration = 4,
Progress = 50
};
GanttDataSource Child3 = new GanttDataSource()
{
TaskId = 4,
TaskName = "Soil test approval",
StartDate = new DateTime(2019, 04, 02),
Duration = 4,
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>()
};
GanttDataSource Child4 = new GanttDataSource()
{
TaskId = 6,
TaskName = "Develop floor plan for estimation",
StartDate = new DateTime(2019, 04, 04),
Duration = 3,
Progress = 70,
Indicators = new List<IndicatorsModel>() {
new IndicatorsModel() {date = "04/10/2019", iconClass="e-btn-icon e-notes-info e-icons e-icon-left e-gantt e-notes-info::before", name= "Indicator title", tooltip="tooltip",base64 = indicatorImage}
}
};
GanttDataSource Child5 = new GanttDataSource()
{
TaskId = 7,
TaskName = "List materials",
StartDate = new DateTime(2019, 04, 04),
Duration = 3,
Progress = 50
};
Record2.SubTasks.Add(Child4);
Record2.SubTasks.Add(Child5);
GanttDataSourceCollection.Add(Record1);
GanttDataSourceCollection.Add(Record2);
return GanttDataSourceCollection;
}
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 List<GanttDataSource> SubTasks { get; set; }
public List<IndicatorsModel> Indicators { get; set; }
}
public class IndicatorsModel
{
public string date { get; set; }
public string iconClass { get; set; }
public string name { get; set; }
public string tooltip { get; set; }
public string base64 { get; set; }
}Exporting Gantt data as a blob object
In Gantt, you can export the Gantt chart data as a blob object, which allows you to preview or modify the data before exporting it.
To export the Gantt chart data as a blob object, follow these steps:
step 1: pdfExport fourth argument set as true.
step 2: Then , pdfExpComplete return as blob object.
<ejs-gantt id='GanttContainer' dataSource="ViewBag.DataSource" toolbar="@(new List<string>() { "PdfExport","ExcelExport" })"
toolbarClick="toolbarClick" allowPdfExport="true" allowExcelExport="true" excelExportComplete="excelExpComplete" pdfExportComplete="pdfExpComplete">
<e-gantt-taskfields id="TaskId" name="TaskName" startDate="StartDate" duration="Duration" progress="Progress" child="SubTasks">
</e-gantt-taskfields>
</ejs-gantt>
<script>
function toolbarClick(args) {
var ganttObj = document.getElementById("GanttContainer").ej2_instances[0];
if (args.item.id === "GanttContainer_pdfexport") {
ganttObj.pdfExport(null,null,null,true);
}
if (args.item.id === "GanttContainer_excelexport") {
ganttObj.excelExport(null,null,null,true);
}
}
let excelExpComplete = (args) => {
//This event will be triggered when excel exporting.
args.promise.then((e) => {
//In this `then` function, we can get blob data through the arguments after promise resolved.
exportBlob(e.blobData);
});
};
let pdfExpComplete = (args) => {
//This event will be triggered when pdf exporting.
args.promise.then((e) => {
//In this `then` function, we can get blob data through the arguments after promise resolved.
exportBlob(e.blobData);
});
};
let exportBlob = (blob) => {
let a = document.createElement('a');
document.body.appendChild(a);
a.style.display = 'none';
let urlg = window.URL.createObjectURL(blob);
a.href = url;
a.download = 'Export';
a.click();
window.URL.revokeObjectURL(url);
document.body.removeChild(a);
}
</script>public IActionResult Index()
{
ViewBag.DataSource = GanttData.ProjectNewData();
return View();
}Single page exporting in gantt
In Gantt, we have provided support to export the Gantt component where each rows are auto-fit to the PDF document page width by setting IsFitToWidth as true in FitToWidthSettings of PdfExportProperties.
Also, we can customize the chart width and grid width in exported file using ChartWidth and GridWidth by defining it as percentage in string.
<ejs-gantt id='GanttContainer' dataSource="ViewBag.DataSource" toolbar="@(new List<string>() { "PdfExport" })"
toolbarClick="toolbarClick" allowPdfExport="true">
<e-gantt-taskfields id="TaskId" name="TaskName" startDate="StartDate" duration="Duration" progress="Progress" child="SubTasks">
</e-gantt-taskfields>
</ejs-gantt>
<script>
function toolbarClick(args) {
var gantt = document.getElementById("GanttContainer").ej2_instances[0];
if (args.item.id === 'GanttContainer_pdfexport') {
var exportProperties = {
fitToWidthSettings: {
isFitToWidth: true,
}
};
gantt.pdfExport(exportProperties);
}
}
</script>public IActionResult Index()
{
ViewBag.DataSource = GanttData.ProjectNewData();
return View();
}Exporting with template
Exporting with column template
The PDF export functionality allows to export Grid columns that include images, hyperlinks, and custom text to an PDF document using pdfQueryCellInfo event.
In the following sample, the hyperlinks and images are exported to PDF using hyperlink and image properties in the pdfQueryCellInfo event.
Note: PDF Export supports base64 string to export the images.
<ejs-gantt id='Gantt' dataSource="ViewBag.dataSource" toolbar="@(new List<string>() { "PdfExport" })" toolbarClick="toolbarClick" pdfQueryCellInfo="pdfQueryCellInfo" allowPdfExport="true" height="450px" resources="ViewBag.projectResources">
<e-gantt-taskfields id="TaskId" name="TaskName" startDate="StartDate"
endDate="EndDate" duration="Duration" progress="Progress" child="SubTasks" resourceInfo="ResourceId">
</e-gantt-taskfields>
<e-gantt-resourcefields id="ResourceId" name="ResourceName"> </e-gantt-resourcefields>
<e-gantt-columns>
<e-gantt-column field="TaskId" headerText="Task Id" width="50"></e-gantt-column>
<e-gantt-column field="TaskName" headerText="Task Name" width="250"></e-gantt-column>
<e-gantt-column field="ResourceId" headerText="Resources" template="#columnTemplate"></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>
</ejs-gantt>
<script>
function toolbarClick(args) {
var gantt = document.getElementById("GanttContainer").ej2_instances[0];
if (args.item.id === 'GanttContainer_pdfexport') {
gantt.pdfExport();
}
}
function pdfQueryCellInfo(args){
if (args.column.headerText === 'Resources') {
{
args.image = { height:40,width:40, base64: (args as any).data.taskData.resourcesImage };
}
} }
</script>
<script type="text/x-jsrender" id="columnTemplate">
${if(ganttProperties.resourceNames)}
<div class="image">
<img src="${TaskID}.png" style="height:40px;width:40px" /><div style="display:inline-block;width:100%;position:relative;left:30px;top:-14px">${ganttProperties.resourceNames}</div>
</div>
${/if}
</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>(),
};
GanttDataSource Child1 = new GanttDataSource()
{
TaskId = 2,
TaskName = "Identify site location",
StartDate = new DateTime(2019, 04, 02),
Duration = 4,
Progress = 70,
ResourceId = new int[] { 1 },
};
GanttDataSource Child2 = new GanttDataSource()
{
TaskId = 3,
TaskName = "Perform soil test",
StartDate = new DateTime(2019, 04, 02),
Duration = 4,
Progress = 50,
Notes = "Obtain an engineered soil test of lot where construction is planned.From an engineer or company specializing in soil testing",
ResourceId = new int[] { 2 },
};
GanttDataSource Child3 = new GanttDataSource()
{
TaskId = 4,
TaskName = "Soil test approval",
Dependency = "3FS",
Notes = "Measure the total property area alloted for construction",
StartDate = new DateTime(2019, 04, 02),
Duration = 4,
Progress = 50,
ResourceId = new int[] { 3 }
};
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>(),
};
GanttDataSource Child4 = new GanttDataSource()
{
TaskId = 6,
TaskName = "Develop floor plan for estimation",
StartDate = new DateTime(2019, 04, 04),
Duration = 3,
Progress = 70,
ResourceId = new int[] { 4 },
};
GanttDataSource Child5 = new GanttDataSource()
{
TaskId = 7,
TaskName = "List materials",
StartDate = new DateTime(2019, 04, 04),
Duration = 3,
Dependency = "6FS",
Progress = 50,
ResourceId = new int[] { 3 },
};
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 string Notes { 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; }
}Exporting with taskbar template
The PDF export functionality allows to export taskbar templates that include images and text to an PDF document using pdfQueryTaskbarInfo event. Taskbars in the exported PDF document can be customized or formatted using the pdfQueryTaskbarInfo event for parent taskbar templates, taskbar template and milestone templates.
In the following sample, taskbar templates with images and text are exported to PDF using taskbarTemplate properties in the pdfQueryTaskbarInfo event.
Note: PDF Export supports base64 string to export the images.
<ejs-gantt id='Gantt' dataSource="ViewBag.dataSource" toolbar="@(new List<string>() { 'PdfExport' })"
toolbarClick="toolbarClick" pdfQueryTaskbarInfo="pdfQueryTaskbarInfo" allowPdfExport="true" height="450px"
rowHeight="60" parentTaskbarTemplate="#ParentTaskbarTemplate" resources="ViewBag.projectResources"
taskbarTemplate="#TaskbarTemplate" milestoneTemplate="#MilestoneTemplate">
<e-gantt-taskfields id="TaskId" name="TaskName" startDate="StartDate" endDate="EndDate" duration="Duration"
progress="Progress" child="SubTasks" resourceInfo="ResourceId">
</e-gantt-taskfields>
<e-gantt-columns>
<e-gantt-column field="TaskId" headerText="Task Id" width="50"></e-gantt-column>
<e-gantt-column field="TaskName" headerText="Task Name" width="250"></e-gantt-column>
</e-gantt-columns>
</ejs-gantt>
<script type="text/x-jsrender" id="TaskbarTemplate">
<div class="e-gantt-child-taskbar-inner-div e-gantt-child-taskbar" style="height:100%">
<div class="e-gantt-child-progressbar-inner-div e-gantt-child-progressbar" style="width:${ganttProperties.progressWidth}px;height:100%">
<img src="${ganttProperties.resourceNames}.png" style="height:40px;width:40px" />
<span class="e-task-label" style="position: absolute; z-index: 1; font-size: 12px; color: white; top: 5px; left: 10px; font-family: " Segoe UI"; overflow: hidden; text-overflow: ellipsis; width: 40%; cursor: move;">${taskData.TaskName}</span>
</div>
</div>
</script>
<script type="text/x-jsrender" id="ParentTaskbarTemplate">
<div class="e-gantt-parent-taskbar-inner-div e-gantt-parent-taskbar" style="height:100%">
<div class="e-gantt-parent-progressbar-inner-div e-gantt-parent-progressbar" style="width:${ganttProperties.progressWidth}px;height:100%">
<span class="e-task-label" style="position: absolute; z-index: 1; font-size: 12px; color: white; top: 5px; left: 10px; font-family: " Segoe UI"; overflow: hidden; text-overflow: ellipsis; width: 40%; cursor: move;">${taskData.TaskName}</span>
</div>
</div>
</script>
<script type="text/x-jsrender" id="MilestoneTemplate">
<div class="e-gantt-milestone" style="position:absolute;">
<div class="e-milestone-top" style="border-right-width:15px;border-left-width:15px;border-bottom-width:15px;"></div>
<div class="e-milestone-bottom" style="top:15px;border-right-width:15px; border-left-width:15px; border-top-width:15px;">
</div>
<img src="${ganttProperties.resourceNames}.png" style="height:40px;width:40px" />
</div>
</script>
<script>
function toolbarClick(args) {
var gantt = document.getElementById("GanttContainer").ej2_instances[0];
if (args.item.id === 'GanttContainer_pdfexport') {
gantt.pdfExport();
}
}
function pdfQueryTaskbarInfo(args) {
if (!args.data.hasChildRecords) {
if (args.data.ganttProperties.resourceNames) {
args.taskbarTemplate.image = [{
width: 20, base64: (args).data.taskData.resourcesImage, height: 20
}]
}
args.taskbarTemplate.value = args.data.TaskName;
}
if (args.data.hasChildRecords) {
if (args.data.ganttProperties.resourceNames) {
args.taskbarTemplate.image = [{
width: 20, base64: (args).data.taskData.resourcesImage, height: 20
}]
}
args.taskbarTemplate.value = args.data.TaskName;
}
if (args.data.ganttProperties.duration === 0) {
if (args.data.ganttProperties.resourceNames) {
args.taskbarTemplate.image = [{
width: 20, base64: (args).data.taskData.resourcesImage, height: 20,
}]
}
args.taskbarTemplate.value = args.data.TaskName
}
}
</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>(),
};
GanttDataSource Child1 = new GanttDataSource()
{
TaskId = 2,
TaskName = "Identify site location",
StartDate = new DateTime(2019, 04, 02),
Duration = 4,
Progress = 70,
ResourceId = new int[] { 1 },
};
GanttDataSource Child2 = new GanttDataSource()
{
TaskId = 3,
TaskName = "Perform soil test",
StartDate = new DateTime(2019, 04, 02),
Duration = 4,
Progress = 50,
Notes = "Obtain an engineered soil test of lot where construction is planned.From an engineer or company specializing in soil testing",
ResourceId = new int[] { 2 },
};
GanttDataSource Child3 = new GanttDataSource()
{
TaskId = 4,
TaskName = "Soil test approval",
Dependency = "3FS",
Notes = "Measure the total property area alloted for construction",
StartDate = new DateTime(2019, 04, 02),
Duration = 4,
Progress = 50,
ResourceId = new int[] { 3 }
};
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>(),
};
GanttDataSource Child4 = new GanttDataSource()
{
TaskId = 6,
TaskName = "Develop floor plan for estimation",
StartDate = new DateTime(2019, 04, 04),
Duration = 3,
Progress = 70,
ResourceId = new int[] { 4 },
};
GanttDataSource Child5 = new GanttDataSource()
{
TaskId = 7,
TaskName = "List materials",
StartDate = new DateTime(2019, 04, 04),
Duration = 3,
Dependency = "6FS",
Progress = 50,
ResourceId = new int[] { 3 },
};
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 string Notes { 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; }
}Exporting with task label template
The PDF export functionality allows to export task label template that include images and text to an PDF document using pdfQueryTaskbarInfo event.
In the following sample, task label template with images and text are exported to PDF using labelSettings properties in the pdfQueryTaskbarInfo event.
Note: PDF Export supports base64 string to export the images.
<ejs-gantt id='Gantt' dataSource="ViewBag.dataSource" toolbar="@(new List<string>() { 'PdfExport' })"
toolbarClick="toolbarClick" pdfQueryTaskbarInfo="pdfQueryTaskbarInfo" allowPdfExport="true" height="450px"
rowHeight="60" resources="ViewBag.projectResources">
<e-gantt-taskfields id="TaskId" name="TaskName" startDate="StartDate" endDate="EndDate" duration="Duration"
progress="Progress" child="SubTasks" resourceInfo="ResourceId">
</e-gantt-taskfields>
<e-gantt-columns>
<e-gantt-column field="TaskId" headerText="Task Id" width="50"></e-gantt-column>
<e-gantt-column field="TaskName" headerText="Task Name" width="250"></e-gantt-column>
</e-gantt-columns>
<e-gantt-labelSettings leftLabel="#leftLabel" rightLabel="#rightLabel" taskLabel="${Progress}%"></e-gantt-labelSettings>
</ejs-gantt>
<script>
function toolbarClick(args) {
var gantt = document.getElementById("GanttContainer").ej2_instances[0];
if (args.item.id === 'GanttContainer_pdfexport') {
gantt.pdfExport();
}
}
function pdfQueryTaskbarInfo(args) {
args.labelSettings.leftLabel.value = args.data.ganttProperties.taskName + '[' + args.data.ganttProperties.progress + ']';
if (args.data.ganttProperties.resourceNames) {
args.labelSettings.rightLabel.value = args.data.ganttProperties.resourceNames;
args.labelSettings.rightLabel.image = [{
base64: (args).data.taskData.resourcesImage, width: 20, height: 20
}]
}
args.labelSettings.taskLabel.value = args.data.ganttProperties.progress + '%'
}
</script>
<script type="text/x-template" id="leftLabel">
<div style="margin-top=-7px;">
<div id="leftLabel">
<span>${TaskName} [ ${Progress}% ]</span>
</div>
</div>
</script>
<script type="text/x-template" id="rightLabel">
<div style="margin-top=-7px;">
${if(ganttProperties.resourceInfo)}
<div id="rightLabel">
${getResourceElements(ganttProperties.resourceInfo)}
</div>
${/if}
</div>
</script>
<script>
function getResourceElements(value) {
var out = "";
var img = document.createElement('img');
img.height = 40;
var span = document.createElement('span');
span.style.marginLeft = "5px";
span.style.marginRight = "5px";
for (var index = 0; index < value.length; index++) {
var imgName = value[index].ResourceName;
img.src = '../Content/gantt/images/' + value[index].ResourceName + '.png';
span.innerHTML = value[index].ResourceName;
out = out + img.outerHTML + span.outerHTML;
}
return out;
}
</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>(),
};
GanttDataSource Child1 = new GanttDataSource()
{
TaskId = 2,
TaskName = "Identify site location",
StartDate = new DateTime(2019, 04, 02),
Duration = 4,
Progress = 70,
ResourceId = new int[] { 1 },
};
GanttDataSource Child2 = new GanttDataSource()
{
TaskId = 3,
TaskName = "Perform soil test",
StartDate = new DateTime(2019, 04, 02),
Duration = 4,
Progress = 50,
Notes = "Obtain an engineered soil test of lot where construction is planned.From an engineer or company specializing in soil testing",
ResourceId = new int[] { 2 },
};
GanttDataSource Child3 = new GanttDataSource()
{
TaskId = 4,
TaskName = "Soil test approval",
Dependency = "3FS",
Notes = "Measure the total property area alloted for construction",
StartDate = new DateTime(2019, 04, 02),
Duration = 4,
Progress = 50,
ResourceId = new int[] { 3 }
};
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>(),
};
GanttDataSource Child4 = new GanttDataSource()
{
TaskId = 6,
TaskName = "Develop floor plan for estimation",
StartDate = new DateTime(2019, 04, 04),
Duration = 3,
Progress = 70,
ResourceId = new int[] { 4 },
};
GanttDataSource Child5 = new GanttDataSource()
{
TaskId = 7,
TaskName = "List materials",
StartDate = new DateTime(2019, 04, 04),
Duration = 3,
Dependency = "6FS",
Progress = 50,
ResourceId = new int[] { 3 },
};
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 string Notes { 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; }
}Exporting with header template
The PDF export functionality allows to export header template that include images and text to an PDF document using pdfColumnHeaderQueryCellInfo event.
In the following sample, header template with images and text are exported to PDF using headerTemplate properties in the pdfColumnHeaderQueryCellInfo event.
Note: PDF Export supports base64 string to export the images.
<ejs-gantt id='Gantt' dataSource="ViewBag.dataSource" toolbar="@(new List<string>() { 'PdfExport' })"
toolbarClick="toolbarClick" pdfQueryTaskbarInfo="pdfQueryTaskbarInfo" allowPdfExport="true" height="450px" rowHeight = "60" resources = "ViewBag.projectResources">
<e-gantt-taskfields id = "TaskId" name = "TaskName" startDate = "StartDate" endDate = "EndDate" duration = "Duration" progress = "Progress" child = "SubTasks" resourceInfo = "ResourceId" >
</e-gantt-taskfields>
<e-gantt-columns>
<e-gantt-column field = "TaskName" headerText = "Task Id" width = "50" headerTemplate = "#projectName"> </e-gantt-column>
<e-gantt-column field = "StartDate" headerText = "Task Name" width = "250" headerTemplate = "#dateTemplate"> </e-gantt-column>
</e-gantt-columns>
</ejs-gantt>
<script>
function toolbarClick(args) {
var gantt = document.getElementById("GanttContainer").ej2_instances[0];
if (args.item.id === 'GanttContainer_pdfexport') {
gantt.pdfExport();
}
}
let i = 0;
function pdfQueryTaskbarInfo(args) {
let base64Array = [
{ 'TaskName': '/9j/4AAQSkZJRgABAQIAHAAcAAD/4QBiRXhpZgAATU0AKgAAAAgABQESAAMAAAABAAEAAAEaAAUAAAABAAAASgEbAAUAAAABAAAAUgEoAAMAAAABAAMAAAITAAMAAAABAAEAAAAAAAAAAAAcAAAAAQAAABwAAAAB/9sAQwADAgICAgIDAgICAwMDAwQGBAQEBAQIBgYFBgkICgoJCAkJCgwPDAoLDgsJCQ0RDQ4PEBAREAoMEhMSEBMPEBAQ/9sAQwEDAwMEAwQIBAQIEAsJCxAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQ/8AAEQgAIAAgAwERAAIRAQMRAf/EABgAAQEBAQEAAAAAAAAAAAAAAAYIAAcF/8QALBAAAQQCAgEDAwIHAAAAAAAAAQIDBAUGBxESAAgTIRQVQRYxFzhXdpa01f/EABQBAQAAAAAAAAAAAAAAAAAAAAD/xAAUEQEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIRAxEAPwB7gessOlaiw2zpdS4Ld2cqngOyl2rLbHcqjpLiy6IzylL7/gp/J+RxwQQt68w6mewu7XrfEKC+azXGuiqiO2r2ybqKnhD3stLVy2TyOg/cj5A5IXr4G8Cf9+aD0XT6K2Nb1GlsEgz4OJW8mLKjY5DaeYdRDdUhxC0thSVJUAQoEEEAjwNW2XoFprGLb1E/QEGdBeRJiyoztK08w6hQUhxC0kFKkqAIUCCCAR4CDD9sbV2RWSso19r3BrDGza2NfWWEnOH21T2Yst2MJKUs1ryAhwslSeHFfBHyRwSHnW26tv12qpO5Ier8GtMdYoVZI2qJm01L0iCGPfC0IeqEcKLfyErKT+DwfjwFvqO/l62h/Zl3/oveB0TwJTe2FRYxX5RqrLrj065HUuZRdzXIOQ7GRHc6yLV+YlmVDcgPJS6044AQVHhTY/I58Ao3lmJUeibfRWBZH6bKCFbUL1K7PTtRpTrzjsQRlzJCWqxoPyFISkqWepUQOfj48Ctdj4j/ABA15lGB/cPoP1JSzaj6v2vd+n+oYW17nTsnv1789ew5445H7+Ad+x+oX+qGu/8AA53/AGPA5drHb+D4rru/xSy3nrPG86i5hkwnOXDjbTIkG9lrU4qCqY271W0R0BfJSFI5UvqQQKWW5cOT6NMhxTZO+9d5Fl72ByIYjQrmM9LMo1oQll0iXIMuSH+3Z9BSlaiFBCeOSH//2Q==' },
{ 'StartDate': '/9j/4AAQSkZJRgABAQIAHAAcAAD/4QBiRXhpZgAATU0AKgAAAAgABQESAAMAAAABAAEAAAEaAAUAAAABAAAASgEbAAUAAAABAAAAUgEoAAMAAAABAAMAAAITAAMAAAABAAEAAAAAAAAAAAAcAAAAAQAAABwAAAAB/9sAQwADAgICAgIDAgICAwMDAwQGBAQEBAQIBgYFBgkICgoJCAkJCgwPDAoLDgsJCQ0RDQ4PEBAREAoMEhMSEBMPEBAQ/9sAQwEDAwMEAwQIBAQIEAsJCxAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQ/8AAEQgAIAAgAwERAAIRAQMRAf/EABcAAQEBAQAAAAAAAAAAAAAAAAcABgX/xAAzEAAABAQDBwEGBwAAAAAAAAABAgMEBQYHEQgSEwAUFRYYITI0IiQxMzVCN0NRVWaCg//EABUBAQEAAAAAAAAAAAAAAAAAAAAB/8QAGBEBAQEBAQAAAAAAAAAAAAAAABEBIUH/2gAMAwEAAhEDEQA/AG2t2PafKP4qHFI3sLlRGR4bE4QlEIi4Yu1XqLJdBsq5UAU1spjEKqoJQBIfEoZTD8QCJcxxTdhwp3JlI6RxCQ5yYQmGOVYjEVYbE8oPVoi8VFNMVRanEoInbjcUvIxwAw27BTHjim7EfTuc6R1ciEhyawi0MbKw6IpQ2J5ReoxFmqCagpC6OBRRI4G4JeRSAJgv3B3ojj2nysGKhvSNlC5UWkeJROLpQ+It2LtJ6syQQcqtlBFRbKUxypJiYBSDyMGUo/AOtP7GoFVcRtTZRkWjGHiLcm8F3qKTvLi68Qd72wIoTMslm1MmmcgXAtigmAXsO1lSwYwJKqEwV0mLD8yw54TiTFLMNJFXblWUHAMjpHK2MAJnC5xNZ2n2EgB2N37BdCqOpVQl+uku4fnuHPCceYpmhp4q0cpSg4FkRIhXJhBQ42OBrNFOwEEO5e/cbIUnSAxqBSrEbTKUZ6oxh4hPOXGt1ikkS4uhEGm6MDqHyrK5dPPqEINgNcoqANrhskLWameB0/jWL2uPPWIuYaV6PLO68Jm5CB8SvCy58+qA62nYlreOqN/INmGiCT5cpetjBnmEvcV00w2XUIAio0ndKem6L2Jq5GN2ykQEMixQEygaYBcN3KH5Y7PTxThLlL0cYMjQlliummJS6vAFlHc7qz03WewxXI+s2TiABkRKIlTDTELjvBg/MDZ6eF+WIHT+C4vaHci4i5hqprczb1xabkI5w20LNkyaQBo6lz3v5aQW8R2aYz1VOkrq9rP1Sfx3gX1P9rJvPof8PP8Ar92zDQxLHQ71NzbzJ+EHBkuAfV/X5Gefw968t8+Z7P6fZs4dUz9DvU3KXLf4QcGV4/8AV/X5HmTz968tz+X7P6/fs4dM9K+krq9ox0t/yLjv1P8Aaz7t67/fw/t9uzTH/9k=' },
]
while (i < base64Array.length) {
const key = Object.keys(base64Array[i])[0];
const value = base64Array[i][key];
if (key === args.column.field) {
args.headerTemplate.image = [{
base64: value, width: 20, height: 20
}];
args.headerTemplate.value = args.column.field;
break;
}
i++;
}
}
</script>
<script type = "text/x-template" id = "projectName" >
<div>
<img class="taskName" width = "20" height = "20" />
<span>& nbsp;Task Name < /span>
</div>
</script>
<script type = "text/x-template" id = "dateTemplate" >
<div>
<img class="startDate" width = "20" height = "20" />
<span>& nbsp;Start Date < /span>
</div>
</script>
<style>
.material img.resource, .fabric img.resource, .bootstrap img.resource,
.tailwind img.resource, .bootstrap5 img.resource, .bootstrap4 img.resource,
.fluent img.resource,.material3 img.resource{
content: url("../Content/gantt/images/Resources.png");
}
.material - dark img.resource, .fabric - dark img.resource, .bootstrap - dark img.resource,
.tailwind - dark img.resource, .bootstrap5 - dark img.resource, .highcontrast img.resource,
.fluent - dark img.resource,.material3 - dark img.resource {
content: url("../Content/gantt/images/ResourcesDark.png");
}
.material img.taskName, .fabric img.taskName, .bootstrap img.taskName,
.tailwind img.taskName, .bootstrap5 img.taskName, .bootstrap4 img.taskName,
.fluent img.taskName,.material3 img.taskName {
content: url("../Content/gantt/images/TaskName.png");
}
.material - dark img.taskName, .fabric - dark img.taskName, .bootstrap - dark img.taskName,
.tailwind - dark img.taskName, .bootstrap5 - dark img.taskName, .highcontrast img.taskName,
.fluent - dark img.taskName,.material3 - dark img.taskName {
content: url("../Content/gantt/images/TaskNameDark.png");
}
.material img.startDate, .fabric img.startDate, .bootstrap img.startDate,
.tailwind img.startDate, .bootstrap5 img.startDate, .bootstrap4 img.startDate,
.fluent img.startDate,.material3 img.startDate {
content: url("../Content/gantt/images/StartDate.png");
}
.material - dark img.startDate, .fabric - dark img.startDate, .bootstrap - dark img.startDate,
.tailwind - dark img.startDate, .bootstrap5 - dark img.startDate, .highcontrast img.startDate,
.fluent - dark img.startDate,.material3 - dark img.startDate {
content: url("../Content/gantt/images/StartDateDark.png");
}
.material img.duration, .fabric img.duration, .bootstrap img.duration,
.tailwind img.duration, .bootstrap5 img.duration, .bootstrap4 img.duration,
.fluent img.duration,.material3 img.duration {
content: url("../Content/gantt/images/Duration.png");
}
.material - dark img.duration, .fabric - dark img.duration, .bootstrap - dark img.duration,
.tailwind - dark img.duration, .bootstrap5 - dark img.duration, .highcontrast img.duration,
.fluent - dark img.duration,.material3 - dark img.duration {
content: url("../Content/gantt/images/DurationDark.png");
}
.material img.progressTemplate, .fabric img.progressTemplate, .bootstrap img.progressTemplate,
.tailwind img.progressTemplate, .bootstrap5 img.progressTemplate, .bootstrap4 img.progressTemplate,
.fluent img.progressTemplate,.material3 img.progressTemplate {
content: url("../Content/gantt/images/Progress.png");
}
.material - dark img.progressTemplate, .fabric - dark img.progressTemplate, .bootstrap - dark img.progressTemplate,
.tailwind - dark img.progressTemplate, .bootstrap5 - dark img.progressTemplate, .highcontrast img.progressTemplate,
.fluent - dark img.progressTemplate,.material3 - dark img.progressTemplate {
content: url("../Content/gantt/images/ProgressDark.png");
}
img.resource, img.taskName, img.startDate, img.duration, img.progressTemplate {
margin - right: 8px;
}
</style>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>(),
};
GanttDataSource Child1 = new GanttDataSource()
{
TaskId = 2,
TaskName = "Identify site location",
StartDate = new DateTime(2019, 04, 02),
Duration = 4,
Progress = 70,
ResourceId = new int[] { 1 },
};
GanttDataSource Child2 = new GanttDataSource()
{
TaskId = 3,
TaskName = "Perform soil test",
StartDate = new DateTime(2019, 04, 02),
Duration = 4,
Progress = 50,
Notes = "Obtain an engineered soil test of lot where construction is planned.From an engineer or company specializing in soil testing",
ResourceId = new int[] { 2 },
};
GanttDataSource Child3 = new GanttDataSource()
{
TaskId = 4,
TaskName = "Soil test approval",
Dependency = "3FS",
Notes = "Measure the total property area alloted for construction",
StartDate = new DateTime(2019, 04, 02),
Duration = 4,
Progress = 50,
ResourceId = new int[] { 3 }
};
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>(),
};
GanttDataSource Child4 = new GanttDataSource()
{
TaskId = 6,
TaskName = "Develop floor plan for estimation",
StartDate = new DateTime(2019, 04, 04),
Duration = 3,
Progress = 70,
ResourceId = new int[] { 4 },
};
GanttDataSource Child5 = new GanttDataSource()
{
TaskId = 7,
TaskName = "List materials",
StartDate = new DateTime(2019, 04, 04),
Duration = 3,
Dependency = "6FS",
Progress = 50,
ResourceId = new int[] { 3 },
};
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 string Notes { 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; }
}