How to export Full View of RadGantt to PDF?

Question

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>

Answer 1

---

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:

• Is the issue replicated with the latest version of Telerik
• Is this a browser specific issue, i.e. is it observed on all browsers or only in one of them
• Are there any JavaScript errors in the browser console