How to perform export using client-side data in JavaScript Ganttchart?
In Gantt using toolbarClick action we can pass client side data for pdf and excel exporting. The below code example explains about how to perform exporting using client-side data.
function toolbarclick(args) {
var id = $(args.currentTarget).attr("id");
var ganttObject = $("#GanttContainer").ejGantt("instance");
ganttObject.model["exportData"] = JSON.stringify(ganttObject.dataSource());
ganttObject.exportGrid = ganttObject["export"];
if (id == "GanttContainer_excelExport") {
ganttObject.exportGrid('api/Gantt/ExcelExport', "", false);
args.cancel = true;
}
else if (id == "GanttContainer_pdfExport") {
ganttObject.exportGrid("api/Gantt/PdfExport", "", false);
args.cancel = true;
}
}
To export client-side data we need to declare a class in server side with required properties.
Pdf Export:
public IEnumerable exportData;
[AcceptVerbs("Post")]
public void PdfExport()
{
string gridModel = HttpContext.Current.Request.Params["GanttModel"];
string locale = HttpContext.Current.Request.Params["locale"];
GanttProperties gridProperty = ConvertGridObject(gridModel);
PdfExport exp = new PdfExport();
GanttPdfExportSettings settings = new GanttPdfExportSettings();
//..
exp.Export(gridProperty, (IEnumerable)exportData, settings, "Gantt");
}
Excel Export:
[AcceptVerbs("Post")]
public void ExcelExport()
{
string gridModel = HttpContext.Current.Request.Params["GanttModel"];
GanttProperties gridProperty = ConvertGridObject(gridModel);
ExcelExport exp = new ExcelExport();
exp.Export(gridProperty, (IEnumerable)exportData, "ExcelExport.xlsx", ExcelVersion.Excel2010, new GanttExportSettings() { Theme = ExportTheme.FlatAzure });
}
private GanttProperties ConvertGridObject(string gridProperty)
{
//..
GanttProperties gridProp = new GanttProperties();
foreach (KeyValuePair<string, object> ds in div)
{
var property = gridProp.GetType().GetProperty(ds.Key, BindingFlags.Instance | BindingFlags.Public | BindingFlags.IgnoreCase);
if(ds.Key == "exportData")
{
string str = Convert.ToString(ds.Value);
exportData = JsonConvert.DeserializeObject<IEnumerable <GanttEditingTasks>>(str);
continue;
}
if (property != null)
{
Type type = property.PropertyType;
string serialize = serializer.Serialize(ds.Value);
object value = serializer.Deserialize(serialize, type);
property.SetValue(gridProp, value, null);
}
}
return gridProp;
}
You can find the sample to export Gantt from client-side data here.
Conclusion
I hope you enjoyed learning about how to perform export using client-side data in JavaScript Ganttchart.
You can refer to our JavaScript ejGantt feature tour page to know about its other groundbreaking feature representations and documentation, to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
