This is a migrated thread and some comments may be shown as answers.

[Solved] Printer Kendo Grid with Printer Plug-In

1 Answer 82 Views

Apache Cordova

This is a migrated thread and some comments may be shown as answers.

This question is locked. New answers and comments are not allowed.

Devon asked on 12 Sep 2016, 06:04 PM

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

answered on 14 Sep 2016, 12:02 PM

Hi Devon,

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.