Hello
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:
@(Html.Kendo().Grid<Planner.Models.GetTaskList_Result1>()
.Name("grid")
.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 =>
{
events.Change("onChange");
events.PdfExport("GetHeaderText");
})
.Sortable()
.ToolBar(toolBar =>
{
toolBar.Template(
@<Text>
<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" />
</Text>);
})
.Pdf(pdf => pdf
.AllPages()
.AvoidLinks()
.PaperSize("A4")
.Scale(0.45)
.Landscape()
.Margin("2cm", "1cm", "1cm", "1cm")
.TemplateId("page-template")
.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
.Ajax()
.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
.Enabled(false))
.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>
<script type="x/kendo-template" id="page-template">
<div class="page-template">
<div class="header">
#: customHeader #
@Html.Label("", new { id = "customHeaderText" })
</div>
<div class="footer">
<div style="float: right">Page #: pageNum # of #: totalPages #</div>
</div>
</div>
</script>
<script type="text/javascript">
function GetHeaderText(e) {
var customHeader = prompt('Please enter a title for the PDF');
}
</script>
1 Answer, 1 is accepted
0
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!
Regards,
Eyup
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.