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

Kendo Grid - Print as it is (WYSIWYG)

3 Answers 236 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Kirubakaran
Top achievements
Rank 1
Kirubakaran asked on 08 Apr 2020, 12:37 PM

 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

Sort by
0
Tsvetomir
Telerik team
answered on 10 Apr 2020, 11:32 AM

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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
Kirubakaran
Top achievements
Rank 1
answered on 13 Apr 2020, 05:47 AM

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

0
Accepted
Tsvetomir
Telerik team
answered on 13 Apr 2020, 05:50 PM

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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
Tags
Grid
Asked by
Kirubakaran
Top achievements
Rank 1
Answers by
Tsvetomir
Telerik team
Kirubakaran
Top achievements
Rank 1
Share this question
or