Print on Chrome black color

4 posts, 0 answers
  1. Stefania
    Stefania avatar
    107 posts
    Member since:
    May 2013

    Posted 27 May 2014 Link to this post

    Hi
    I'm trying to copy into a new div my htmlchart and print it with Chrome (Version 35.0.1916.114 m).
    My page structure is the following:
    - RadSplitter
            |_ RadPane
                       |_ Div (id = pieContainer)
                                       |_ RadHtlmChart

    - Div (id=newDiv)

    On print button click
    function PrintableVersion() {
                    //find telerik object container              
                   var pieContainer = $telerik.$("#pieDiv");               
                       //append pie
                   $("#newDiv").append(pieContainer.clone(true));
     
                   //imposto la pagina come A4 orizzontale
                   $(".A4Page").css({ width: "29.7cm", "min-height": "19cm", "margin-top": "10px", "padding-top": "10px", visibility: "visible" });
     
                   //hide splitter
                   var splitter = $find("<%=RadSplitter1.ClientID %>");
                   splitter.set_visible(false);              
                  //lancio la stampa
                   window.print();
     
                   //reset page
                   $("#newDiv").empty();
                   $(".A4Page").css({ height: "0", visibility: "hidden" });
                   splitter.set_visible(true);
               }           
           </script>

    See the attach for the result
    pie chart is black

    If I changed this row
         $("#newDiv").append(pieContainer.clone(true));
    with
         $("#newDiv").append($get("pieDiv").innerHTML);              
    same problem

    If I changed with (no clone)
         $("#newDiv").append(pieContainer);
    it works but I lost the pie into the original page

    thanks
  2. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1490 posts

    Posted 30 May 2014 Link to this post

    Hello Stefania,

    I have tried to reproduce the mentioned issue but to no avail - the Pie chart is properly printed in Chrome version 35.0.1916.114 m. You can watch the short video test and then tell me what I am missing.

    Could you please try to reproduce the issue with the attached VS example and then tell us what changes you have made, so that I can proceed further with the investigation?

    Regards,
    Danail Vasilev
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Stefania
    Stefania avatar
    107 posts
    Member since:
    May 2013

    Posted 30 May 2014 in reply to Danail Vasilev Link to this post

    Hi Danail,
    thanks for the example

    I made two example but I can't attach the zip
    The selected file(s) cannot be attached because it may exceed the maximum attachment size (2 MB) or is from not allowed type (allowed: .jpg, .jpeg, .gif, .png).

    Anyway.. this the code (there is no code-behind just .aspx)
    Both of my example return a black pie

    1. create and remove the print div directly from js function

    <form id="form1" runat="server">
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
        <Scripts>
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
        </Scripts>
    </telerik:RadScriptManager>
    <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
        <script type="text/jscript">
     
            function PrintableVersion() {
     
               var $div = $('<div />').appendTo($("#form1"));
                $div.attr('id', 'divPrintableArea');
                $div.css({
                    width: "29.7cm",
                    "vertical-align": top,
                    "min-height": "19cm",
                    "margin": "10px",
                    "padding": "10px",
                    visibility: "visible"
                });
     
                //recupero gli oggetti da stampare
                var pieContainer = $telerik.$("#pieDiv");
                pieContainer.css({ float: "none", width: "90%" });
     
     
                //aggiungo la torta
                $ = $telerik.$;
                //$("#newDiv").append(pieContainer.clone(true));
                $div.append(pieContainer.clone(true));
     
     
     
                //nascondo lo splitter principale
                var splitter = $find("<%=RadSplitter1.ClientID %>");
                splitter.set_visible(false);
     
                //lancio la stampa
                window.print();
     
                //svuoto il contenitore da stampare e resetto il css nascondendo il div
                $div.remove();
                //$("#newDiv").empty();
                //rivisualizzo lo splitter principale
                splitter.set_visible(true);
            }           
        </script>
    </telerik:RadScriptBlock
     
    <telerik:RadSplitter ID="RadSplitter1" runat="server" Width="100%" Height="90%" SplitBarsSize="5px"
        meta:resourcekey="RadSplitter1Resource1">
        <telerik:RadPane ID="RadPane3" runat="server" Width="20%" Index="0" meta:resourcekey="RadPane1Resource1">
            <div style="margin: 5px;">
               filter
            </div>
        </telerik:RadPane>
        <telerik:RadSplitBar ID="RadSplitbar1" runat="server" CollapseMode="Forward" Index="1"
            meta:resourcekey="RadSplitbar1Resource1" ResolvedRenderMode="Classic">
        </telerik:RadSplitBar>
        <telerik:RadPane ID="Radpane4" runat="server" Width="80%" Index="2" meta:resourcekey="Radpane2Resource1"
            Visible="true">
            <telerik:RadAjaxPanel runat="server" ID="PivotAndChartPanel" LoadingPanelID="RadAjaxLoadingPanelMain"
                RenderMode="Inline" meta:resourcekey="PivotAndChartPanelResource1">
                <telerik:RadSplitter ID="RadSplitter3" runat="server" Width="100%" Height="100%"
                    SplitBarsSize="5px" Orientation="Horizontal" FullScreenMode="True" meta:resourcekey="RadSplitter2Resource1"
                    ResolvedRenderMode="Classic">
                    <telerik:RadPane ID="RadPane5" runat="server" Height="50%" Width="100%" Index="0"
                        meta:resourcekey="RadPane3Resource1" ResolvedRenderMode="Classic">
                        <telerik:RadAjaxPanel runat="server" ID="RadAjaxPanelPivotGrid" RenderMode="Inline"
                            Visible="true" meta:resourcekey="RadAjaxPanelChartsResource1">
                            <div style="margin: 5px;">
                                <div id="buttons">
                                     
                                    <telerik:RadButton runat="server" ID="RadButton1" Text="Print" AutoPostBack="false"
                                        meta:resourcekey="PrintButtonResource1" OnClientClicked="PrintableVersion">
                                    </telerik:RadButton>
                                </div>
                                <div style="width: 98%; vertical-align: top" id="pivotContainer">
                                    grid
                                </div>
                            </div>
                        </telerik:RadAjaxPanel>
                    </telerik:RadPane>
                    <telerik:RadSplitBar ID="RadSplitbar2" runat="server" CollapseMode="Both" Index="1"
                        meta:resourcekey="RadSplitbar2Resource1">
                    </telerik:RadSplitBar>
                    <telerik:RadPane ID="PaneCharts" runat="server" Height="50%" Width="100%" Index="2"
                        meta:resourcekey="PaneChartsResource1">
                        <telerik:RadAjaxPanel runat="server" ID="RadAjaxPanelCharts" RenderMode="Inline"
                            Visible="true" meta:resourcekey="RadAjaxPanelChartsResource1">
                            <div style="float: left; width: 50%; margin-bottom: 5px;" id="stackedDiv">
                                stacked
                            </div>
                            <div style="float: right; width: 50%; margin-bottom: 5px;" id="pieDiv">
                                <telerik:RadHtmlChart runat="server" ID="PieChart1" Transitions="true" Width="400px"
                                    Height="400px">
                                    <PlotArea>
                                        <Series>
                                            <telerik:PieSeries StartAngle="90">
                                                <LabelsAppearance Position="Center" DataFormatString="{0} %" />
                                                <TooltipsAppearance DataFormatString="{0} %" />
                                                <SeriesItems>
                                                    <telerik:PieSeriesItem BackgroundColor="Purple" Exploded="true" Name="Internet Explorer"
                                                        Y="18.3" />
                                                    <telerik:PieSeriesItem BackgroundColor="Orange" Exploded="false" Name="Firefox" Y="35.8" />
                                                    <telerik:PieSeriesItem BackgroundColor="Green" Exploded="false" Name="Chrome" Y="38.3" />
                                                    <telerik:PieSeriesItem BackgroundColor="Blue" Exploded="false" Name="Safari" Y="4.5" />
                                                    <telerik:PieSeriesItem BackgroundColor="Red" Exploded="false" Name="Opera" Y="2.3" />
                                                </SeriesItems>
                                            </telerik:PieSeries>
                                        </Series>
                                    </PlotArea>
                                    <ChartTitle Text="Browser Usage for April 2012">
                                    </ChartTitle>
                                </telerik:RadHtmlChart>
                            </div>
                        </telerik:RadAjaxPanel>
                    </telerik:RadPane>
                </telerik:RadSplitter>
            </telerik:RadAjaxPanel>
        </telerik:RadPane>
    </telerik:RadSplitter>
    </form>



    2. print pie and pivotgrid

    <form id="form1" runat="server">
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
          <Scripts>
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
        </Scripts>
        </telerik:RadScriptManager>
          <script type="text/jscript">
            function PrintableVersion() {
     
     
                //recupero gli oggetti da stampare
                var pivot = $telerik.$("#pivotGrid");
                var pieContainer = $telerik.$("#pieDiv");
                pieContainer.css({ float: "none", width: "90%" });
     
     
                //aggiungo la torta
                $ = $telerik.$;
                $("#newDiv").append(pieContainer.clone(true));
                $("#newDiv").append(pivot.clone(true));
     
     
                //nascondo lo splitter principale
                var splitter = $find("<%=RadSplitter1.ClientID %>");
                splitter.set_visible(false);
     
                //lancio la stampa
                window.print();
     
                //svuoto il contenitore da stampare e resetto il css nascondendo il div            
                $("#newDiv").empty();
                //rivisualizzo lo splitter principale
                splitter.set_visible(true);
            }  
             
        </script>
         
        <div id="newDiv"></div>
         <telerik:RadSplitter ID="RadSplitter1" runat="server" Width="100%" Height="90%" SplitBarsSize="5px"
        meta:resourcekey="RadSplitter1Resource1">
        <telerik:RadPane ID="RadPane3" runat="server" Width="20%" Index="0" meta:resourcekey="RadPane1Resource1">
            <div style="margin: 5px;">
               filter
            </div>
        </telerik:RadPane>
        <telerik:RadSplitBar ID="RadSplitbar1" runat="server" CollapseMode="Forward" Index="1"
            meta:resourcekey="RadSplitbar1Resource1" ResolvedRenderMode="Classic">
        </telerik:RadSplitBar>
        <telerik:RadPane ID="Radpane4" runat="server" Width="80%" Index="2" meta:resourcekey="Radpane2Resource1"
            Visible="true">
            <telerik:RadAjaxPanel runat="server" ID="PivotAndChartPanel" LoadingPanelID="RadAjaxLoadingPanelMain"
                RenderMode="Inline" meta:resourcekey="PivotAndChartPanelResource1">
                <telerik:RadSplitter ID="RadSplitter3" runat="server" Width="100%" Height="100%"
                    SplitBarsSize="5px" Orientation="Horizontal" FullScreenMode="True" meta:resourcekey="RadSplitter2Resource1"
                    ResolvedRenderMode="Classic">
                    <telerik:RadPane ID="RadPane5" runat="server" Height="50%" Width="100%" Index="0"
                        meta:resourcekey="RadPane3Resource1" ResolvedRenderMode="Classic">
                        <telerik:RadAjaxPanel runat="server" ID="RadAjaxPanelPivotGrid" RenderMode="Inline"
                            Visible="true" meta:resourcekey="RadAjaxPanelChartsResource1">
                            <div style="margin: 5px;">
                                <div id="buttons">
                                     
                                    <telerik:RadButton runat="server" ID="RadButton2" Text="Print" AutoPostBack="false"
                                        meta:resourcekey="PrintButtonResource1" OnClientClicked="PrintableVersion">
                                    </telerik:RadButton>
                                </div>
                                <div style="width: 98%; vertical-align: top" id="pivotContainer">
                                    <telerik:RadPivotGrid runat="server" ID="pivotGrid"></telerik:RadPivotGrid>
                                </div>
                            </div>
                        </telerik:RadAjaxPanel>
                    </telerik:RadPane>
                    <telerik:RadSplitBar ID="RadSplitbar2" runat="server" CollapseMode="Both" Index="1"
                        meta:resourcekey="RadSplitbar2Resource1">
                    </telerik:RadSplitBar>
                    <telerik:RadPane ID="PaneCharts" runat="server" Height="50%" Width="100%" Index="2"
                        meta:resourcekey="PaneChartsResource1">
                        <telerik:RadAjaxPanel runat="server" ID="RadAjaxPanelCharts" RenderMode="Inline"
                            Visible="true" meta:resourcekey="RadAjaxPanelChartsResource1">
                             
                            <div style="float: right; width: 50%; margin-bottom: 5px;" id="pieDiv">
                                <telerik:RadHtmlChart runat="server" ID="PieChart1" Transitions="true" Width="400px"
                                    Height="400px">
                                    <PlotArea>
                                        <Series>
                                            <telerik:PieSeries StartAngle="90">
                                                <LabelsAppearance Position="Center" DataFormatString="{0} %" />
                                                <TooltipsAppearance DataFormatString="{0} %" />
                                                <SeriesItems>
                                                    <telerik:PieSeriesItem BackgroundColor="Purple" Exploded="true" Name="Internet Explorer"
                                                        Y="18.3" />
                                                    <telerik:PieSeriesItem BackgroundColor="Orange" Exploded="false" Name="Firefox" Y="35.8" />
                                                    <telerik:PieSeriesItem BackgroundColor="Green" Exploded="false" Name="Chrome" Y="38.3" />
                                                    <telerik:PieSeriesItem BackgroundColor="Blue" Exploded="false" Name="Safari" Y="4.5" />
                                                    <telerik:PieSeriesItem BackgroundColor="Red" Exploded="false" Name="Opera" Y="2.3" />
                                                </SeriesItems>
                                            </telerik:PieSeries>
                                        </Series>
                                    </PlotArea>
                                    <ChartTitle Text="Browser Usage for April 2012">
                                    </ChartTitle>
                                </telerik:RadHtmlChart>
                            </div>
                        </telerik:RadAjaxPanel>
                    </telerik:RadPane>
                </telerik:RadSplitter>
            </telerik:RadAjaxPanel>
        </telerik:RadPane>
    </telerik:RadSplitter>
     
    </form>

    My final result should be print 2 charts and a pivot into a temporary div
  5. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1490 posts

    Posted 03 Jun 2014 Link to this post

    Hi Stefania,

    Thank you for providing us with a runnable sample that reproduces the issue.

    The clone method actually copies the DOM elements and not the JavaScript object itself, which leads to the mentioned issue with the chart printing when the 'mother' chart is hidden in Chrome. What I can suggest is that you follow the approach from HtmlChart - Chart Printing online demo. For example:
    function PrintableVersion(sender, args) {
     
        var chartContainer = $telerik.$("#pieDiv");
        //save the original CSS rules that will be modified
        var chartOriginalCSS = {
            display: chartContainer.css("display"),
            position: chartContainer.css("position"),
            top: chartContainer.css("top"),
            left: chartContainer.css("left"),
            zIndex: chartContainer.css("zIndex"),
            visibility: chartContainer.css("visibility")
        };
        //make sure the chart container is visible
        chartContainer.css({
            display: "block",
            position: "absolute",
            top: "6px",
            left: "1px",
            zIndex: 10000,
            visibility: "visible"
        }
        );
        var body = $telerik.$("body");
        //store the original CSS rules for the body tag that will be modified
        var bodyOriginalCSS = {
            visibility: body.css("visibility"),
            overflow: body.css("overflow"),
            background: body.css("background"),
            height: body.css("height")
        };
        //hide the body tag
        body.css({
            visibility: "hidden",
            overflow: "hidden",
            background: "transparent",
            height: chartContainer.css("height")
        });
     
        //call the browser print() method
        window.print();
     
        //restore the original CSS properties
        chartContainer.css(chartOriginalCSS);
        body.css(bodyOriginalCSS);
    }


    Regards,
    Danail Vasilev
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top