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

RadGrid Not Printing in Chrome

7 Answers 155 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Brian
Top achievements
Rank 2
Iron
Brian asked on 01 Sep 2015, 06:55 PM

Hi,

I'm attempting to print a RadGrid via JavaScript in Chrome.  I'm getting one of two results:

  1. A blank preview window appears and prints a blank page.
  2. An error stating "Print preview failed" appears.

Everything works as intended in IE 11. 

Here is my code.  Thanks!

01.function RadButtonRCCPrint_ClientClick() {
02.  var previewWnd = window.open('about:blank', '', '', false);
03.  var sh = '<%= ClientScript.GetWebResourceUrl(RadGridRCC.GetType(), String.Format("Telerik.Web.UI.Skins.{0}.Grid.{0}.css", RadGridRCC.Skin)) %>';
04.  var styleStr = "<html><head><style>.RadGrid_Windows7 .rgRow td, .RadGrid_Windows7 .rgAltRow td { border: solid 1px #000000; }</style><link href='" + sh + "' rel='stylesheet' type='text/css'></link></head>";
05.  var htmlContent = styleStr + "<body>" + $find('<%= RadGridRCC.ClientID %>').get_element().outerHTML + "</body></html>";
06.  previewWnd.document.open();
07.  previewWnd.document.write(htmlContent);
08.  previewWnd.document.close();
09.  previewWnd.print();
10.  previewWnd.close();
11.}

7 Answers, 1 is accepted

Sort by
0
Accepted
Konstantin Dikov
Telerik team
answered on 02 Sep 2015, 01:17 PM
Hello Brian,

I have tested the approach demonstrated in the following Code Library and everything seems to work correctly in Chrome on my side:
Additionally, here is a simplified example with dummy data:
<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
    <script type="text/javascript">
        function printGrid() {
            var previewWnd = window.open('about:blank', '', '', false);
            var sh = '<%= ClientScript.GetWebResourceUrl(RadGrid1.GetType(),String.Format("Telerik.Web.UI.Skins.{0}.Grid.{0}.css",RadGrid1.Skin)) %>';
            var styleStr = "<html><head><link href = '" + sh + "' rel='stylesheet' type='text/css'></link></head>";
            var htmlcontent = styleStr + "<body>" + $find('<%= RadGrid1.ClientID %>').get_element().outerHTML + "</body></html>";
            previewWnd.document.open();
            previewWnd.document.write(htmlcontent);
            previewWnd.document.close();
            previewWnd.print();
            previewWnd.close();
        }
    </script>
</telerik:RadCodeBlock>
 
<telerik:RadButton runat="server" ID="RadButton1" AutoPostBack="false" Text="Print" OnClientClicked="printGrid"></telerik:RadButton>
<telerik:RadGrid runat="server" ID="RadGrid1" OnNeedDataSource="RadGrid1_NeedDataSource">
</telerik:RadGrid>

And the code-behind:
protected void RadGrid1_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
{
    DataTable table = new DataTable();
    table.Columns.Add("field1", typeof(string));
    table.Columns.Add("field2", typeof(string));
    table.Columns.Add("field3", typeof(string));
    table.Columns.Add("field4", typeof(string));
    table.Columns.Add("field5", typeof(string));
    table.Columns.Add("field6", typeof(string));
    for (int i = 0; i < 5; i++)
    {
        table.Rows.Add("test", "test", "test", "test", "test", "test");
    }
 
    (sender as RadGrid).DataSource = table;
}

If the issue persists, please open a regular support ticket with a sample, runnable project attached, so we can test it locally and see what could cause the problem in your project.


Regards,
Konstantin Dikov
Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Brian
Top achievements
Rank 2
Iron
answered on 02 Sep 2015, 02:22 PM

Hi Konstantin,

Unfortunately, the sample you provided resulted in a blank screen when printing in Chrome as well.  I'm thinking it's a problem with either my Chrome install or something in our network.  I don't think this is on Telerik's end.

Thanks for your help!

0
Shivi
Top achievements
Rank 1
answered on 04 Nov 2015, 10:26 AM
Hi Konstantin,

Unfortunately, the sample you provided resulted in a blank screen when printing in Chrome as well.  
I have used this code to solve the issue of print prieview in chrome but it is not working.

Can you help me?

Regards
Shivi

0
Konstantin Dikov
Telerik team
answered on 09 Nov 2015, 10:36 AM
Hi Shivi,

I have once again tested the example from my previous post in Chrome and the print previous displays the RadGrid correctly on my side.

Can you please confirm that you are using the same example and elaborate on what version of the controls you are using.


Kind Regards,
Konstantin Dikov
Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Accepted
Roberto
Top achievements
Rank 1
answered on 16 Jun 2016, 05:57 PM

Add setTimeout to call print():

<script type="text/javascript" language="javascript">
    function PrintRadGrid() {
        var previewWnd = window.open('about:blank', '', '', false);
        var sh = '<%= ClientScript.GetWebResourceUrl(RadGrid1.GetType(), String.Format("Telerik.Web.UI.Skins.{0}.Grid.{0}.css", RadGrid1.Skin))%>';
        var styleStr = "<html><head><link href = '" + sh + "' rel='stylesheet' type='text/css'></link></head>";
        var htmlcontent = styleStr + "<body>" + $find('<%= radGrid1.ClientID %>').get_element().outerHTML + "</body></html>";
        previewWnd.document.open();
        previewWnd.document.write(htmlcontent);
        previewWnd.document.close();
        setTimeout(function () {
            previewWnd.print();
            previewWnd.close();
        }, 50);
        return false;
    }
</script>

 

0
Brian
Top achievements
Rank 2
Iron
answered on 22 Jun 2016, 11:59 AM
Thanks so much, Roberto!  It works perfectly!
0
Konstantin Dikov
Telerik team
answered on 24 Jun 2016, 01:05 PM
Hello Brian,

You can also check the new built-in printing functionality, introduced in R2 2016:
As you will notice, it preserves all styles and the entire state of the grid.


Best Regards,
Konstantin Dikov
Telerik
Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
Tags
Grid
Asked by
Brian
Top achievements
Rank 2
Iron
Answers by
Konstantin Dikov
Telerik team
Brian
Top achievements
Rank 2
Iron
Shivi
Top achievements
Rank 1
Roberto
Top achievements
Rank 1
Share this question
or