I am using Telerik RadGantt as shown in the code. Using the RadClientExportManager, I am unable to export the full view of the chart. Only the part which is visible is exported. It does not export the scrollable part
I tried to use the EnablePDFExport feature of the RadGanttt itself, but it also does the same.
The demo example provided by telerik at https://demos.telerik.com/aspnet-ajax/gantt/examples/functionality/pdf-export/defaultcs.aspx does it perfectly. As they are not showing the css here, I am unable to find the problem.
//Javascript
<script type="text/javascript">
function exportElement()
{
var exp = $find("<%=rcExportManager.ClientID%>");
exp.exportPDF($telerik.$(".exportArea"));
}
</script>
//Asp.net
<div class="exportArea">
<telerik:RadGantt
runat="server"
ID="RadGantt1" Skin="Metro"
ReadOnly="true"
Height="450px"
AutoGenerateColumns="false"
EnablePdfExport="true">
<Columns>
<telerik:GanttBoundColumn DataField="Title" DataType="String" Width="160px"></telerik:GanttBoundColumn>
<telerik:GanttBoundColumn DataField="Start" HeaderText="Start" Width="85px" DataFormatString="dd-MMM-yyyy" DataType="DateTime"></telerik:GanttBoundColumn>
<telerik:GanttBoundColumn DataField="End" HeaderText="End" Width="85px" DataFormatString="dd-MMM-yyyy" DataType="DateTime"></telerik:GanttBoundColumn>
</Columns>
<DataBindings>
<TasksDataBindings
IdField="ID" ParentIdField="ParentID" SummaryField="Summary"
StartField="CurrentStartDate" EndField="CurrentEndDate"
TitleField="Title" PercentCompleteField="PerCompleted" />
</DataBindings>
</telerik:RadGantt>
</div>
<input type="button" onclick="exportElement()" value="export" />
<telerik:RadClientExportManager runat="server" ID="rcExportManager">
</telerik:RadClientExportManager>
Updated: The issue is fixed in version 2016 Q1. For previous versions, the OnClientPdfExporting event can be used as a workaround
<telerik:RadGantt OnClientPdfExporting="OnClientPdfExporting" ... >
<script>
var $ = $ || $telerik.$;
function OnClientPdfExporting(sender, args) {
var elem = sender.get_element();
var originalWidth = sender.get_width();
var originalListWidth = sender.get_listWidth();
var width = $(elem).find(".rgtTreelistWrapper").width() +
$(elem).find(".radFauxRows").width();
sender.set_listWidth($(elem).find(".rgtTreelistWrapper").width())
sender.set_width(width);
// http://stackoverflow.com/questions/779379/why-is-settimeoutfn-0-sometimes-useful
setTimeout(function () {
sender.set_width(originalWidth);
sender.set_listWidth(originalListWidth);
})
}
I have tested the provided snippet and the built-in export works as seen in this screenshot.
Here is the full code I have used.
<form id="form1" runat="server">
<telerik:RadScriptManager ID="RadScriptManager1" runat="server">
<Scripts>
<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
</Scripts>
</telerik:RadScriptManager>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pako/1.0.7/pako_deflate.min.js"></script>
<telerik:RadGantt
runat="server"
ID="RadGantt1" Skin="Metro"
ReadOnly="true"
Height="450px"
AutoGenerateColumns="false"
EnablePdfExport="true">
<Columns>
<telerik:GanttBoundColumn DataField="Title" DataType="String" Width="160px"></telerik:GanttBoundColumn>
<telerik:GanttBoundColumn DataField="Start" HeaderText="Start" Width="85px" DataFormatString="dd-MMM-yyyy" DataType="DateTime"></telerik:GanttBoundColumn>
<telerik:GanttBoundColumn DataField="End" HeaderText="End" Width="85px" DataFormatString="dd-MMM-yyyy" DataType="DateTime"></telerik:GanttBoundColumn>
</Columns>
<DataBindings>
<TasksDataBindings
IdField="ID" ParentIdField="ParentID" SummaryField="Summary"
StartField="Start" EndField="End"
TitleField="Title" PercentCompleteField="PercentComplete" />
</DataBindings>
</telerik:RadGantt>
private DataTable GetGanttTasksSource()
{
DataTable dataTable = new DataTable();
dataTable.Columns.Add(new DataColumn("ID", typeof(int)));
dataTable.Columns.Add(new DataColumn("ParentID", typeof(int)));
dataTable.Columns.Add(new DataColumn("OrderID", typeof(int)));
dataTable.Columns.Add(new DataColumn("Title", typeof(string)));
dataTable.Columns.Add(new DataColumn("Start", typeof(DateTime)));
dataTable.Columns.Add(new DataColumn("End", typeof(DateTime)));
dataTable.Columns.Add(new DataColumn("PercentComplete", typeof(decimal)));
dataTable.Columns.Add(new DataColumn("Expanded", typeof(bool)));
dataTable.Columns.Add(new DataColumn("Summary", typeof(bool)));
dataTable.PrimaryKey = new DataColumn[] { dataTable.Columns["ID"] };
int parentsCount = 4;
for (int i = 1; i <= parentsCount; i++)
{
DataRow row = dataTable.NewRow();
row["ID"] = i;
row["ParentID"] = DBNull.Value;
row["OrderID"] = i;
row["Title"] = "Task #" + (i);
row["Start"] = DateTime.Now.AddDays(i - 1);
row["End"] = DateTime.Now.AddDays(i);
row["PercentComplete"] = 0.2M;
if (i == parentsCount)
{
row["Expanded"] = false;
}
else
{
row["Expanded"] = DBNull.Value;
}
row["Summary"] = i == parentsCount; // last task is a parent/summary
dataTable.Rows.Add(row);
}
for (int i = parentsCount + 1; i <= parentsCount + 5; i++)
{
DataRow row = dataTable.NewRow();
row["ID"] = i;
row["ParentID"] = parentsCount;
row["OrderID"] = i;
row["Title"] = "Task #" + (i);
row["Start"] = DateTime.Now.AddDays(i - 1);
row["End"] = DateTime.Now.AddDays(i);
row["PercentComplete"] = 0.4M;
row["Expanded"] = DBNull.Value;
row["Summary"] = false;
dataTable.Rows.Add(row);
}
return dataTable;
}
Some things that I would suggest checking are: