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

[Edward Norris]

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.

Thanks,

Ed

Attachment: CodeAndExample_8ef1f4e1.zip

[Edward Norris]

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

<script>

    $(document).ready(function () {

        kendo.ui.progress($("#ProgressPipelineSummaryChart"), true);

    });

    function PipelineSummaryChartRender() {

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

    }

</script>

<div style="position: relative;">

    @(Html.Kendo().Chart<GIS.Types.Pulse.Performance.PipelineSummary>

            ()

            .Name("PipelineSummaryChart")

            .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

            .Visible(false)

            )

            .SeriesDefaults(seriesDefaults =>

            seriesDefaults.Bar().Stack(true)

            )

            .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

            .Numeric()

            .Labels(labels => labels.Format("{0:n0}%"))

            .Line(line => line.Visible(false))

            .Max(100)

            .MajorGridLines(lines => lines.Visible(true))

            )

            .Tooltip(tooltip => tooltip

            .Visible(true)

            .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>

    </div>

[Edward Norris]

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")';

        console.log(htmlString.length);

        $.ajax({

            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]

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.   

 

Sample link: http://www.syncfusion.com/downloads/support/forum/128695/ze/HTMLtoPDFWebKit-340841952  

Input HTML link:  http://www.syncfusion.com/downloads/support/forum/128695/ze/Input183456630  

 

If the chart is still not rendered please provide complete HTML document(with scripts and styles) that will helpful for us to proceed further.  

 

Regards, 

Prakash V.