Hello!
I'm having trouble implementing a piece of functionality I need for my app. I am using a Kendo Grid in my mobile app that I am building with AppBuilder, and I want the user to be able to print the grid from the mobile device. The device will be an Android device. I am currently attempting to use the Printer plug-in from the Telerik Plug-Ins Marketplace, and I am able to print data from the page, but none of it is formatted. I get the headers and the data, but there are no grid lines or columns at all.
I guess I'm just wondering if there is a way to print a Kendo Grid from a mobile device?
Thanks in advance!
The basic version of my code:
<div id="gridContainer"> <div id="temp-grid"> </div> <script type="text/x-kendo-template" id="toolbar-template"> <button type="button" class="k-button" id="printGrid">Print Data</button> </script></div>
$('#printGrid').click(function () { print();});function print() { var printableContent = document.getElementById("temp-grid"); cordova.plugins.printer.print( printableContent, { name: "Temperature Report" }, function(success) {console.log('OK: ' + success)}, function(error) {console.log('Error: ' + error)} );1 Answer, 1 is accepted
On Android, you can only print the entire page content, as described in the plugin documentation:
Printer
Also, as noted in the comments inside the code snippets, in order to display styles in the printed document, you need to declare the styles within the document body tag:
<body> <link href="kendo/styles/kendo.common.min.css" rel="stylesheet" /> <link href="kendo/styles/kendo.mobile.nova.min.css" rel="stylesheet" /> <link href="kendo/styles/kendo.nova.min.css" rel="stylesheet" /> <link href="styles/main.css" rel="stylesheet" />.......</body>I tried this and the Grid got fully styled on the print preview.
Regards,
Tsvetina
Telerik by Progress
Visit the Telerik Verified Plugins Marketplace and get the custom Cordova plugin you need, already tweaked to work seamlessly with AppBuilder.