We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

HTML to PDF Export (Webkit): Kendo UI Ajax Reports are not all rendering.

I have a web page that apparently uses a kendo UI grid and 3 kendo UI charts.
When I attempt to export the url, the ajax report is not being waited on to complete before the rendering.
The web page runs in less than 3 seconds and I have set the additionalDelay value to 50 seconds and it still sets up incorrectly.

The code samples and output examples are below in the zip file (.rtf and .pdf)

The 2 kendo ui charts that are not AJAX are showing correctly.  Only the single AJAX chart is not being fully rendered.

Any advice would be helpful.  I tried pushing it through to a string, and that doesn't do anything either.

I'm rather stumped at this point.


Attachment: CodeAndExample_8ef1f4e1.zip

3 Replies

EN Edward Norris February 6, 2017 04:04 PM UTC

Ok, I'm a horrible copy/paste person.  Here is the kendo chart that is showing up only as the loading icon....

@using GIS.Portal.Pulse.Performance.Models
@using GIS.Types.Pulse.Performance

@model WeeklyReportModel

    $(document).ready(function () {
        kendo.ui.progress($("#ProgressPipelineSummaryChart"), true);

    function PipelineSummaryChartRender() {
        kendo.ui.progress($("#ProgressPipelineSummaryChart"), false);

<div style="position: relative;">
            .Title("% Complete by Activity for All Pipeline Segments ")
            .DataSource(ds =>
                ds.Read(read => read.Action("JsonPipelineSummary", "WeeklyReport", new { id = Model.WeeklyReport.ProjectID, mapCenterlineID = 0, reportDate = Model.WeeklyReport.WeekEnding }));
            .Legend(legend => legend
            .SeriesDefaults(seriesDefaults =>
            .PlotArea(plotArea => plotArea.Margin(0, 35, 0, 0))
            .Series(series =>
                series.Bar(model => model.PercentComplete).ColorField("StatusColor").Labels(labels => labels.Template("#= kendo.format('{0:n2}%', dataItem.PercentComplete)##= kendo.format('{0:n0}', dataItem.MapFeatureLength)# ft").Visible(true));
            .CategoryAxis(axis => axis
            .Categories(model => model.Name)
            .MajorGridLines(lines => lines.Visible(false))
            .ValueAxis(axis => axis
            .Labels(labels => labels.Format("{0:n0}%"))
            .Line(line => line.Visible(false))
            .MajorGridLines(lines => lines.Visible(true))
            .Tooltip(tooltip => tooltip
            .Template("#= kendo.format('{0:n2}%', dataItem.PercentComplete)# (#= kendo.format('{0:n0}', dataItem.MapFeatureLength)# of #= kendo.format('{0:n0}', dataItem.TotalLength)# feet)")
            .Events(e => { e.Render("PipelineSummaryChartRender"); })
    <div id="ProgressPipelineSummaryChart"></div>

EN Edward Norris February 6, 2017 07:33 PM UTC

Ok, now in another attempt, I did a capture of the entire's page html, and pushed it up to be rendered.  This fails to render anything....
The HTML file is attached.  
The JQuery to push up:
    function downloadPage()
        var htmlString = escape($('html')[0].outerHTML);
        var url = '@Url.Action("DownloadString","WeeklyReport")';
            type: 'POST',
            async: false,
            dataType: "html", 
            url: url,
            data: { htmlData: htmlString },
            cache: false

        public ActionResult DownloadString(string htmlData)
            HtmlToPdf htmlToPdf = new HtmlToPdf();
            PDFOptions pdfOptions = new PDFOptions();
            pdfOptions.FileName = "Weekly.pdf";
            pdfOptions.UseWebkit = true;
            pdfOptions.SourceString = System.Web.HttpUtility.UrlDecode(htmlData);
            pdfOptions.WebKitPath = Server.MapPath("~/") + "\\bin\\QtBinaries";
            htmlToPdf.HtmlToPDF(System.Web.HttpContext.Current.Response, pdfOptions);
            return null;

Attachment: HTMLString_ebc20c4e.zip

PV Prakash Viswanathan Syncfusion Team February 7, 2017 11:11 AM UTC

Hi Edward, 
Thanks for contacting Syncfusion support. 
We have tried to modify the given html string, but it does not render the Chart as style and scripts are missing. However, we can wait the HtmlConverter till the chart rendered by using window.status. We have already implemented a support for HTML converter to hook on the window.status, once it is set to completed the loading stops and start converting to PDF.  
Please refer below code snippet to set window status, 
//set window status 
webKitSettings.WindowStatus = "completed"; 
Input HTML script: 
Note: Both window status should be same, else converter never stops the conversion 
How to use it:  
1)      In the HTML document change the window.status to completed once HTML is loaded.  
2)      For Kendo UI chart, please check can you trigger an event once the chart is rendered and set the window.status as completed.  
3)      When the window.status is changed to completed, HTML converter will stop further loading the HTML and process for PDF conversion.  
I have attached simple Window status sample and input HTML for your reference.   
If the chart is still not rendered please provide complete HTML document(with scripts and styles) that will helpful for us to proceed further.  
Prakash V. 

Live Chat Icon For mobile
Up arrow icon