Telerik Product and Version
|
2016.2 607 or above
|
|
Supported Browsers and Platforms
|
|
|
Components/Widgets used (JS frameworks, etc.)
|
|
Project description
This Code Library demonstrates how to print all pages in RadGrid with client-side binding through external button or a custom button within the CommandItemTemplate.
Implementation
For achieving the desired functionality we will need an external button or a custom button in the CommandItemTemplate. Within the client-side click event of that button we will then have to change the page size of the control, so it could display all items on a single page. We can also hide some elements that we do not need in the final layout (like the command, filter or pager item).
Here is the JavaScript that you need for printing all pages within the click event handler of the custom button:
<script type="text/javascript">
function printGrid() {
var grid = $find("<%=RadGrid1.ClientID%>"); //getting reference to the RadGrid object
var that = grid;
var kendo = window.kendo;
var $printingContainer;
var originalSize = grid.MasterTableView.get_pageSize();
var itemsCount = grid.MasterTableView.get_virtualItemCount();
grid.MasterTableView.set_pageSize(itemsCount);
$telerik.$(grid.get_element()).find(".rgCommandTable").hide();//hiding the command item
$telerik.$(grid.get_element()).find(".rgPager").hide();//hiding the pager
if ($telerik.isIE || Telerik.Web.Browser.edge) {
var printWindow = window.open();
if (!printWindow) return false;
$printingContainer = $telerik.$("<div>");
kendo.drawing.drawDOM(that.get_element()).then(function (group) {
return kendo.drawing.Surface.create($printingContainer, { type: "svg" }).draw(group);
}).done(function (data) {
var html = "<html><head>" + that._getHeadLinksForPrint() + "</head><body><form style='height:" + that.get_element().scrollHeight + "px;'>" +
$printingContainer.get(0).innerHTML + "</form></body></html>";
printWindow.document.open();
printWindow.document.write(html);
printWindow.document.close();
printWindow.print();
$printingContainer.remove();
});
} else {
kendo.drawing.drawDOM(that.get_element(), {
margin: "2cm",
scale: 0.7,
paperSize: "A4"
})
.then(function (root) {
return kendo.drawing.exportPDF(root);
})
.done(function (data) {
window.open(data, '', false);
grid.MasterTableView.set_pageSize(originalSize);
$telerik.$(grid.get_element()).find(".rgCommandTable").show();
$telerik.$(grid.get_element()).find(".rgPager").show();
});
}
}
</script>
Attached you can find a runnable sample with the same implementation.
Note
If you have too many records, rendering all items on a single page could prove to be a slow operation and it you could consider (
for better user experience) to manually display an overlay or loading panel that will inform the user that there is pending operation.