RadGrid Not Printing in Chrome

8 posts, 2 answers
  1. Brian
    Brian avatar
    14 posts
    Member since:
    Aug 2013

    Posted 01 Sep 2015 Link to this post

    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.}

  2. Answer
    Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    1793 posts

    Posted 02 Sep 2015 Link to this post

    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Brian
    Brian avatar
    14 posts
    Member since:
    Aug 2013

    Posted 02 Sep 2015 in reply to Konstantin Dikov Link to this post

    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!

  5. Shivi
    Shivi avatar
    1 posts
    Member since:
    Nov 2015

    Posted 04 Nov 2015 in reply to Konstantin Dikov Link to this post

    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

  6. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    1793 posts

    Posted 09 Nov 2015 Link to this post

    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
  7. Answer
    Roberto
    Roberto avatar
    13 posts
    Member since:
    Mar 2011

    Posted 16 Jun in reply to Shivi Link to this post

    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>

     

  8. Brian
    Brian avatar
    14 posts
    Member since:
    Aug 2013

    Posted 22 Jun in reply to Roberto Link to this post

    Thanks so much, Roberto!  It works perfectly!
  9. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    1793 posts

    Posted 24 Jun Link to this post

    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017