Exporting Kendo grid to PDF with header - application soft locks on export

1 Answer 123 Views
Grid View
Top achievements
Rank 1
Bradley asked on 03 Mar 2023, 01:54 PM


I currently have an kendo grid with PDF export functionality, I am trying to add in the facilities to add a line header text to the exported PDF and have tried using both a grid header text box and a javascript alert on button click, however when I try to do this either the application tries to export indefinitely, or the header text is not included. Can anyone suggest where I may be going wrong with this?

View code:

                                                                                .Columns(columns =>
                                                                                    columns.Bound(p => p.DateCreated).Title("Date Created").Format("{0:dd/MM/yy}").Width(120);
                                                                                    columns.Bound(p => p.TaskNo).Title("TaskNo").Width(90);
                                                                                    columns.Bound(p => p.TaskDescription).Title("Task").Width(200);
                                                                                    columns.Bound(p => p.PriorityText).Title("Priority").Width(90);
                                                                                    columns.Bound(p => p.AreaText).Title("Area").Width(140);
                                                                                    columns.Bound(p => p.QS1).Title("Quality Statement").Width(150);
                                                                                    columns.Bound(p => p.KA1).Title("KLOE Area 1").Width(150);
                                                                                    columns.Bound(p => p.KC1).Title("KLOE Characteristic 1").Width(200);
                                                                                    columns.Bound(p => p.KA2).Title("KLOE Area 2").Width(150).Hidden(true);
                                                                                    columns.Bound(p => p.KC2).Title("KLOE Characteristic 2").Width(150).Hidden(true);
                                                                                    columns.Bound(p => p.KA3).Title("KLOE Area 3").Width(150).Hidden(true);
                                                                                    columns.Bound(p => p.KC3).Title("KLOE Characteristic 3").Width(150).Hidden(true);
                                                                                    columns.Bound(p => p.KA4).Title("KLOE Area 4").Width(150).Hidden(true);
                                                                                    columns.Bound(p => p.KC4).Title("KLOE Characteristic 4").Width(150).Hidden(true);
                                                                                    columns.Bound(p => p.KA5).Title("KLOE Area 5").Width(150).Hidden(true);
                                                                                    columns.Bound(p => p.KC5).Title("KLOE Characteristic 5").Width(150).Hidden(true);
                                                                                    columns.Bound(p => p.LeadAssigned).Title("Lead Assigned").Width(120);
                                                                                    columns.Bound(p => p.SupportAssigned).Title("Support Assigned").Width(150);
                                                                                    columns.Bound(p => p.DateDue).Title("Date Due").Format("{0:dd/MM/yyyy}").Width(120);
                                                                                    columns.Bound(p => p.StatusText).Title("Status").Width(120);
                                                                                .Resizable(resize => resize.Columns(true))
                                                                                .Selectable(selectable => selectable.Mode(GridSelectionMode.Single).Type(GridSelectionType.Row))
                                                                                .Events(events =>
                                                                                .ToolBar(toolBar =>

                                                                                        <b class="FloatRight SearchTopMarginExtra">Search by Task Description/Staff: </b>
                                                                                        <input type="search" id="searchbox" class="SearchRight SearchTopMargin" />
                                                                                        <b class="FloatRight">Date From:</b>
                                                                                        <input type="date" id="DateFrom" />
                                                                                        <b class="FloatRight">Date To:</b>
                                                                                        <input type="date" id="DateTo" />
                                                                                        <button id="clearFiltersButton" class="k-button">Clear Filters</button>
                                                                                        <a class="k-button k-button-icontext k-grid-pdf" href="\#"><span class="k-icon k-i-pdf"></span>Export to PDF</a>
                                                                                        <b class="float-right">Title on PDF:</b>
                                                                                        <input type="text" id="PDFTitle" />
                                                                                .Pdf(pdf => pdf
                                                                                        .Margin("2cm", "1cm", "1cm", "1cm")
                                                                                        .FileName("Active tasks " + DateTime.Today.ToString("d") + ".pdf")
                                                                                        .ProxyURL(Url.Action("Pdf_Export_Save", "Grid"))
                                                                                                .Scrollable(scrollable => scrollable.Enabled(true).Height("600px"))
                                                                                                .Filterable(ftb => ftb.Mode(GridFilterMode.Row))
                                                                                                .DataSource(datasource => datasource
                                                                                                .Filter(filters =>
                                                                                                    filters.Add(f => f.Completed).IsEqualTo(false);
                                                                                                .Sort(sort => sort.Add("DateDue").Ascending())
                                                                                                .Model(model => model.Id(p => p.TaskNo))
                                                                                                .Read(read => read.Action("Tasks_Read", "TaskList"))

                                                                                                .Pageable(pageable => pageable
                                                                                                .Events(e => e.DataBound("onDataBound"))


Relevant javascript and template:

<script type="text/javascript">    

    $(document).ready(function () {
        $("#PDFTitle").keyup(function SetViewData() {
            var val = $("#PDFTitle").val();
            var text = document.getElementById('customHeaderText');
            text.val() = val.val();

<script type="x/kendo-template" id="page-template">
    <div class="page-template">
        <div class="header">
            #: customHeader #

            @Html.Label("", new { id = "customHeaderText" })
        <div class="footer">
            <div style="float: right">Page #: pageNum # of #: totalPages #</div>

<script type="text/javascript">
    function GetHeaderText(e) {
        var customHeader = prompt('Please enter a title for the PDF');




1 Answer, 1 is accepted

Sort by
Telerik team
answered on 07 Mar 2023, 08:57 PM

Hi Bradley,


Thank you for reaching out to us!

I will need to gather a bit more information about this inquiry and I will be able to connect you with the proper product specialist. Can you advise of the following information at your convenience:

- Email address
- First and Last Name
- Company
- Address
- Vat ID (if applicable)

Thank you for your help in providing this information!


Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Grid View
Asked by
Top achievements
Rank 1
Answers by
Telerik team
Share this question