Can you please guide me or show me how I can use the #displayFilters to be used with a header and footer and the footer continuing the page numbering. Currently the header and footer only displays with the grid pages and then it does a page-break with the filters with no styling. I’ve tried adding the styling but I don’t get the results I’m looking for.
Another solution could be that it appends the displayFilters just after the grid without the page-break.
below is my code for exporting:
var grid = $("#grid").data("kendoGrid");
var root = new kendo.drawing.Group();
kendo.drawing.drawDOM($("#displayFilters"))
.done(function (displayFilters){
grid._drawPDF(progress)
.then(function (root) {
root.children.push(displayFilters);
return kendo.drawing.exportPDF(root, {
multiPage: true,
allPages: true,
avoidLinks: true,
margin: { top: "3cm", left: "1cm", right: "1cm", bottom: "1cm" },
landscape: true,
template: $("#page-template").html()
});
})
.done(function (dataURI) {
kendo.saveAs({
dataURI: dataURI,
fileName: reportModel.Report.ReportName + ".pdf"
});
progress.resolve();
});
});
Here is my template:
<script type="x/kendo-template" id="page-template">
<div class="page-template">
<div class="header">
<div style="float: left; width:33%;"><img src="./Content/Images/SB Logo.png" /></div>
<div id="reportName" style="width: 33%; height:100px; text-align:center; color: black; font-size:30px;vertical-align:middle;display:inline-block;padding-top:20px;">@ViewBag.Report.ReportName</div>
<div id="currentDate" style="float:right;width:33%; text-align:right; color: black; font-size:30px;padding-top:36px;display:inline-block;">23/07/2021</div>
</div>
<div class="footer" >
Page #: pageNum #
</div>
</div>
</script>
Hello Nolan,
It is not clear from the posted snippet what "displayFilter" is. I see "#displayFilters" being passed to the drawDOM method, but what the element with that id contains, and what the problem with exporting it along with the Grid is unknown.
Here's a dojo example that uses your export logic:
https://dojo.telerik.com/UlOjinog
I'm using the dojo, since the export logic is identical for the MVC wrappers and the Kendo UI widgets, and running the example and testing the export is faster in a dojo, than setting up an MVC project. In the example "#displayFilters" is a div that contains some text. Could you demonstrate the problem and elaborate more on the expected result?
Hi Ivan, Jeandre here. Nolan is my boss.
I've sent him this support request to be created.
All I want to achieve is to continue the page numbering from the grid export feature to the (#displayFilters) DOM element printed on the next page and if you can show me how I can center align the DOMelement being printed(#displayFilters) i'm sending through for the pdf export, that would be excellent. The #displayFilters could be any content / text -> <div>content</div>.
I see your headers and footers are missing. And I also don't understand why your export grid is not exporting the whole grid, but at least mine is.
So in short how can I append headers and footers on the #displayFilters DOM element that was written to the new page, and hopefully get that footer page numbering to continue from the rest of the pages. Kindly advise me on the best way forward.
Appreciate, thanks
Jeandre
Hi Jeandre,
Since this thread is in the UI for ASP.NET MVC Grid forums, I want to mention that the Grid does not have capabilities of "plugging" its exported pages into an existing element on the page. You can export the Grid's content on several pages and you can have numbering if you configure a template in the Grid's pdf configuration: https://docs.telerik.com/aspnet-mvc/html-helpers/data-management/grid/export/pdf-export#specifying-page-templates Thus, the template gives an option to display a header and a footer for every exported page of the data. If you want to display an element in those pages, that element must be added to the template.
However, exporting an element and adding the Grid's exported content split in pages along with the headers and footers into an that element, this is not available as a functionality in the Grid. It might be possible to achieve with the Drawing API, but even then it would require a custom solution. Consider asking on the Kendo UI for jQuery forums with tag Drawing API, whether someone in community has implemented such a custom scenario.