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.
Unfortunately, activation email could not send to your email. Please try again.

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

Thread ID:





128695 Feb 6,2017 10:47 AM Feb 7,2017 06:11 AM ASP.NET MVC 3
Tags: PDF
Edward Norris
Asked On February 6, 2017 10:47 AM

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

Edward Norris
Replied On February 6, 2017 11:04 AM

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)#\n#= 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>

Edward Norris
Replied On February 6, 2017 02:33 PM

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

Prakash Viswanathan [Syncfusion]
Replied On February 7, 2017 06:11 AM

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. 


This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.