How to export EJ2 Gantt data to pdf document using EJ1 export libraries
At present, the Syncfusion EJ2 Gantt component supports only client-side exporting. We suggest you to follow to the below steps and codes to perform server-side pdf exporting in Gantt using EJ1 export libraries.
Step 1: Create a simple MVC project.
Step 2: Click Tools > NuGet Package Manager > Manage NuGet Packages for installing Syncfusion.AspNet.Mvc4 NuGet package to Install necessary EJ1-libraries.
We need to initialize the Gantt properties properly on the server-side before calling the PdfExport method. The following are the APIs of the EJ1 Gantt component which must be assigned with proper value to generate PDF files.
GanttProperties gantt = new GanttProperties();
gantt.TaskIdMapping = "taskID";
gantt.TaskNameMapping = "taskName";
gantt.StartDateMapping = "startDate";
gantt.DataSource = GetData();
List<GanttColumn> colList = new List<GanttColumn>();
colList.Add(new GanttColumn() { Field = "taskID", MappingName = "taskID", HeaderText = "ID", Width = 70 });
colList.Add(new GanttColumn() { Field = "taskName", MappingName = "taskName", HeaderText = "Task Name", Width = 100 });
colList.Add(new GanttColumn() { Field = "startDate", MappingName = "startDate", HeaderText = "Start Date", Width = 100 });
gantt.Columns = colList;
gantt.ScheduleStartDate = "02/26/2017";
gantt.ScheduleEndDate = "07/09/2017";
In the client-side, we have used form submit action to call the server-side exporting method(PdfExport) using toolbarClick handler.
Find the following code example to render EJ2-Gantt component.
<body>
<div id="GanttContainer" style="height:350px;width:100%;"></div>
<form action="http://localhost: 54057/Home/PdfExport" method="post">
<input type="hidden" name="GanttData" id="GanttData" />
</form>
<script type="text/javascript">
var data = JSON.parse('@Html.Raw(Json.Encode(@ViewBag.DataSource))');
var ganttChart = new ej.gantt.Gantt({
dataSource: data,
height: '450px',
highlightWeekends: true,
allowSelection: true,
treeColumnIndex: 1,
taskFields: {
id: 'taskID',
name: 'taskName',
startDate: 'startDate',
endDate: 'endDate',
duration: 'duration',
progress: 'progress',
dependency: 'predecessor',
child: 'subtasks',
},
labelSettings: {
leftLabel: 'taskName'
},
splitterSettings: {
columnIndex: 2
},
projectStartDate: new Date('02/19/2017'),
projectEndDate: new Date('07/09/2017'),
toolbar: ['PdfExport'],
toolbarClick: toolbarclick
});
ganttChart.appendTo('#GanttContainer');
function toolbarclick(args) {
if (args.item.id == "GanttContainer_pdfexport") {
var form = document.getElementsByTagName("form")[0];
form.submit();
args.cancel = true;
}
}
</script>
</body>
In this Documentation, we have the API equivalent of the EJ1 Gantt and EJ2 Gantt component. We need to initialize necessary Gantt properties on the server-side.
Find the following code example to export Gantt data to pdf using EJ1 libraries.
public void PdfExport()
{
GanttProperties gantt = getGanttProperties();
PdfExport exp = new PdfExport();
GanttPdfExportSettings settings = new GanttPdfExportSettings();
settings.EnableFooter = true;
settings.ProjectName = "Project Tracker";
settings.IsFitToWidth = true;
settings.Theme = GanttExportTheme.FlatLime;
exp.Export(gantt, (IEnumerable)gantt.DataSource, settings, "Gantt");
}
private GanttProperties getGanttProperties()
{
GanttProperties gantt = new GanttProperties();
gantt.TaskIdMapping = "taskID";
gantt.TaskNameMapping = "taskName";
gantt.StartDateMapping = "startDate";
gantt.EndDateMapping = "endDate";
gantt.ProgressMapping = "progress";
gantt.DurationMapping = "duration";
gantt.ChildMapping = "subtasks";
gantt.PredecessorMapping = "predecessor";
gantt.DataSource = GetData();
List<GanttColumn> colList = new List<GanttColumn>();
colList.Add(new GanttColumn() { Field = "taskID", MappingName = "taskID", HeaderText = "ID", Width = 70 });
colList.Add(new GanttColumn() { Field = "taskName", MappingName = "taskName", HeaderText = "Task Name", Width = 100 });
colList.Add(new GanttColumn() { Field = "startDate", MappingName = "startDate", HeaderText = "Start Date", Width = 100 });
colList.Add(new GanttColumn() { Field = "endDate", MappingName = "endDate", HeaderText = "End Date", Width = 100 });
colList.Add(new GanttColumn() { Field = "duration", MappingName = "duration", HeaderText = "duration", Width = 70 });
colList.Add(new GanttColumn() { Field = "progress", MappingName = "progress", HeaderText = "progress", Width = 70 });
gantt.Columns = colList;
gantt.ScheduleStartDate = "02/26/2017";
gantt.ScheduleEndDate = "07/09/2017";
return gantt;
}
Summary
In this Sample, we have exported Gantt data using EJ1 Export libraries. Also you can check our Gantt features from this page.
If you have any queries or require clarifications. Please let us know in the comments below. You can also contact us through our Support forum or Direct-Trac. We are happy to assist you!
