Rank 1
i have the following coding. I want to print this as it is in a button click ( with same color, styles etc..)
<div id="grid"></div>
<button id="btnprint" type="submit" name="excel" value="valexcel">Print</button>
<script> $("#grid").kendoGrid({ columns: [{ field: "productName" }, { field: "category" }, { field: "status" }, { field: "Comments" }], dataSource: { data: [{ productName: "Tea", category: "Beverages", status: "Open", "Comments": "" }, { productName: "Coffee", category: "Beverages", status: "Open", "Comments": "comment1" }, { productName: "Ham", category: "Food", status: "Open", "Comments": "" }, { productName: "Bread", category: "Food", status: "Open", "Comments": "" }, { productName: "Hammer", category: "Hardware", status: "Closed", "Comments": "Comment test" }, { productName: "Screw", category: "Hardware", status: "Open", "Comments": "commenting testing" }], group: { field: "category" } }, detailTemplate: "<div class='Comments'>",
detailInit: function (e) { e.detailRow.find(".Comments").html("<p>" + e.data.Comments + "</p>"); }, });</script>
I tried with the following link and cannot achieve this.
https://docs.telerik.com/kendo-ui/controls/data-management/grid/export/print-export
-- I can achieve this by converting this grid to pdf and print it. But i dont want to do it and want to print this directly
Expecting your help.
3 Answers, 1 is accepted
Hi Kirubakaran,
Essentially, the example demonstrates how to create a completely new HTML and print it out. Therefore, if the styles are not applied inline, it will not take place because of how the exported file is constructed. In order to apply the grid's theme, change the style reference. As well as, if you would like to apply any additional styles, you should specify them explicitly in the htmlStart variable:
var htmlStart =
'<!DOCTYPE html>' +
'<html>' +
'<head>' +
'<meta charset="utf-8" />' +
'<title>Kendo UI Grid</title>' +
'<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.406/styles/kendo.bootstrap-v4.min.css" />' +
'<style>#grid td{font-style: italic;}</style>'+
'</head>' +
'<body>';
Check out the corresponding Dojo sample at:
https://dojo.telerik.com/EvoWAFAw
I hope you find this helpful.
Regards,
Tsvetomir
Progress Telerik
Our thoughts here at Progress are with those affected by the outbreak.
Rank 1
Thanks Tsvetomir. Whereas when i click PrintGrid button, i get print page and its showing only un-formatted(no styles) layout. Whereas, on the backside it opens new page with formatted data.
Here i want to cancel the print page and then again i want to print the page which has formatted value.
Is this the procedure we need to follow? For your reference i attached the file
Hi Kirubakaran,
Indeed, there are two windows that are opened when the "Print Grid" button is clicked. In order to prevent the opening of the first unformatted file (browsers remove the styles by default when preparing for a print), you should comment out the following line of code:
doc.write(htmlStart + printableContent + htmlEnd);
doc.close();
// win.print();Regards,
Tsvetomir
Progress Telerik
Our thoughts here at Progress are with those affected by the outbreak.