How to Solve Export To PDF Using RadClientExportManager For RadHtmlChart

11 posts, 0 answers
  1. Majid
    Majid avatar
    6 posts
    Member since:
    Nov 2019

    Posted 12 Nov Link to this post

    Hi
    How to Solve Export To PDF Using RadClientExportManager For RadHtmlChart
    not support Persian Characters in Export PDF Using "RadClientExportManager"
    As pictured below : 

        Attached file


    Is there another way :   Client Side OR Server Side

  2. Eric R | Technical Support Engineer
    Admin
    Eric R | Technical Support Engineer avatar
    233 posts

    Posted 14 Nov Link to this post

    Hi Majid,

    It is difficult to understand if this is being caused by the HTML5 Chart or the RadClientExportManager. Is is possible to provide the markup, code-behind and any JavaScript associated with the chart and export manager?

    Additionally, I recommend reviewing the following HTML5 Chart localization and styling options which may provide more information for achieving the desired result.

    1. Localization

    2. Labels Styling

    3. Legend Settings

    I hope this helps. Please let me know if you need any additional information. Thank you for using the ASP.NET AJAX Forums.

    Regards,


    Eric R | Technical Support Engineer
    Progress Telerik

    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  3. Majid
    Majid avatar
    6 posts
    Member since:
    Nov 2019

    Posted 16 Nov in reply to Eric R | Technical Support Engineer Link to this post

    Hi "Eric R" Dear

    I use from "RadClientExportManager" output "HtmlChart" to pdf file

    But My problem is the opposite of writing and separating Persian letters, That Not supported in HtmlChart

    As pictured Attached file

    -----

    I tested different solutions :

    Localization and Legend Settings and font

    But I didn't answer and I did not succeed

     

    Regards, Majid

  4. Eric R | Technical Support Engineer
    Admin
    Eric R | Technical Support Engineer avatar
    233 posts

    Posted 18 Nov Link to this post

    Hi Majid,

    Thank you for the additional information. Although, I will need more information to troubleshoot this. Can you provide the following information?

    1. The HTML5 Chart markup, code-behind, any custom styling and any JavaScript events.

    2. The Client Export Manager markup, code-behind, any custom styling and any JavaScript events.

    Once I have the above information, I will try to investigate this issue locally and provide a more thorough response.

    In the meantime, please let me know if you need any additional information. Thank you and I look forward to your reply.

    Regards,


    Eric R | Technical Support Engineer
    Progress Telerik

    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  5. Majid
    Majid avatar
    6 posts
    Member since:
    Nov 2019

    Posted 25 Nov in reply to Eric R | Technical Support Engineer Link to this post

    Hi "Eric R"
    1- I use from "RadPivotGrid" and "SqlDataSource" and "RadHtmlChart".

    2- "RadPivotGrid" and "RadHtmlChart" Connected to "SqlDataSource" named "dsChart"

    <telerik:RadPivotGrid ID="PivotGridChart" runat="server" AllowFiltering="true"
            EnableZoneContextMenu="true" AllowSorting="true" AllowPaging="true" ShowFilterHeaderZone="false"
            EmptyValue="0" DataSourceID="dsChart" Culture="fa-IR"
            OnCellDataBound="PivotGridChart_CellDataBound">
            <ClientSettings EnableFieldsDragDrop="true">
                <ClientEvents OnPivotGridCreated="pivotGridFilterDialogHandler" />
                <Scrolling AllowVerticalScroll="true" SaveScrollPosition="true"></Scrolling>
                <Resizing AllowColumnResize="false" EnableRealTimeResize="true" />
            </ClientSettings>
            <Fields>
                <telerik:PivotGridReportFilterField>
                </telerik:PivotGridReportFilterField>
                <telerik:PivotGridRowField>
                </telerik:PivotGridRowField>
                <telerik:PivotGridColumnField>
                </telerik:PivotGridColumnField>
                <telerik:PivotGridAggregateField>
                </telerik:PivotGridAggregateField>
            </Fields>
        </telerik:RadPivotGrid>
     
    ----------------------------------------------------------------------------------------------------------
    <telerik:RadHtmlChart ID="ColumnChart" runat="server" Height="560" Transitions="true" Skin="Silk" style="direction: ltr; text-align: right;"
            DataSourceID="dsChart" Visible="true"
            ChartTitle-Appearance-Align="Right" Legend-Appearance-Position="Top" Legend-Appearance-Align="End"
            PlotArea-XAxis-LabelsAppearance-RotationAngle="315"
            PlotArea-XAxis-LabelsAppearance-DataFormatString="{0:0.00}"
            PlotArea-CommonTooltipsAppearance-DataFormatString="{0:0.00}"
            Font-Names="Tahoma" ChartTitle-Appearance-TextStyle-FontFamily="Tahoma" Legend-Appearance-TextStyle-FontFamily="Tahoma"
            PlotArea-XAxis-LabelsAppearance-TextStyle-FontFamily="Tahoma" PlotArea-XAxis-TitleAppearance-TextStyle-FontFamily="Tahoma"
            PlotArea-YAxis-LabelsAppearance-TextStyle-FontFamily="Tahoma" PlotArea-YAxis-TitleAppearance-TextStyle-FontFamily="Tahoma">
        </telerik:RadHtmlChart>

     

    3- Export to PDF : Used form "RadClientExportManager" and "RadButton" that call JS function into "RadCodeBlock"

    <telerik:RadClientExportManager ID="RadClientExportManager1" runat="server">
            </telerik:RadClientExportManager>
     
    ----------------------------------------------------------------------------------------------------------
     
    <telerik:RadButton ID="btnExportToPDF" runat="server" RenderMode="Lightweight" ToolTip="Export To PDF"
                AutoPostBack="false" UseSubmitBehavior="false" OnClientClicked="exportChartToPDF" Visible="true">
                <ContentTemplate>
                    <asp:Image ID="imgExportToPDF" runat="server" ImageUrl="~/RGS/Images/ExportToPDF.png" Width="25px" Height="25px" />
                </ContentTemplate>
            </telerik:RadButton>
     
    ----------------------------------------------------------------------------------------------------------
    function exportChartToPDF() {
                try {
                    var $ = $telerik.$;
                <%--$find('<%=RadClientExportManager1.ClientID%>').exportPDF($(".RadHtmlChart"));--%>
                    $find('<%=RadClientExportManager1.ClientID%>').exportPDF($(<%=divHtmlChart.ClientID%>));
                     
                }
                catch (response) {
                    alert("error: " + response);
                }
            }

     

     

  6. Majid
    Majid avatar
    6 posts
    Member since:
    Nov 2019

    Posted 25 Nov in reply to Majid Link to this post

    "RadPivotGrid" creates the chart with the "OnCellDataBound" event

    in code behind : set fields PivotGrid and fileName Export PDF and Font

    PivotGridChart.Fields[1].Caption = "Caption";
    PivotGridChart.Fields[1].DataField = "DataField";
     
    RadClientExportManager1.PdfSettings.FileName = reportPivotGrid.ChartTitleText;
    RadClientExportManager1.PdfSettings.Fonts.Add("Tahoma", "Fonts/Tahoma.ttf");

     

     

    Regards, Majid

  7. Eric R | Technical Support Engineer
    Admin
    Eric R | Technical Support Engineer avatar
    233 posts

    Posted 26 Nov Link to this post

    Hi Majid,

    Thank you for sending over the information. It is really helpful. For the Labels and Titles, it is possible to reduce the FontSize, Margins and Padding. For the Legend, the width can also be adjusted using the Orientation. I recommend trying different combinations of these until it is exported as desired.

    If the issue persists, I would need to see a sample of the Data, the Chart Labels and the Legend Information. This is only because I am unable to translate the information locally. It would be helpful if this was in a SQL Script or CSV. For security reasons, it doesn't have to be the exact data just a representation of it. In order to obtain the SQL Scripts from the Data Source use the Import and Export SQL Database as Scripts documentation.

    Please let me know if you need any additional information. Thank you and I look forward to your reply.

    Regards,


    Eric R | Technical Support Engineer
    Progress Telerik

    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  8. Majid
    Majid avatar
    6 posts
    Member since:
    Nov 2019

    Posted 02 Dec in reply to Eric R | Technical Support Engineer Link to this post

    Hi "Eric R"

    Very Thanks

    Testing the SQL script from the data source I used with the output data instance

    and my DataBase Collation : SQL_Latin1_General_CP1256_CI_AS

     

    SELECT
        N'ارزشیابی عملکرد سال 1395 کارکنان و مدیران'    AS  ped_Gathering_Title     ,
        N'کارکنان و مدیران پایه'                            AS  ped_SematGroup_Title    ,
        CAST(96 AS decimal)                                 AS  ValuePercent
     
    UNION   ALL
     
    SELECT
        N'ارزشیابی عملکرد سال 1396 کارکنان و مدیران'    AS  ped_Gathering_Title     ,
        N'مدیران میانی و هم تراز آن'                        AS  ped_SematGroup_Title    ,
        CAST(58 AS decimal)                                 AS  ValuePercent
     
    UNION   ALL
     
    SELECT
        N'ارزشیابی عملکرد سال 1395 کارکنان و مدیران'    AS  ped_Gathering_Title     ,
        N'کارکنان و مدیران پایه'                            AS  ped_SematGroup_Title    ,
        CAST(79 AS decimal)                                 AS  ValuePercent
     
    UNION   ALL
     
    SELECT
        N'ارزشیابی عملکرد سال 1396 کارکنان و مدیران'    AS  ped_Gathering_Title     ,
        N'کارکنان و مدیران پایه'                            AS  ped_SematGroup_Title    ,
        CAST(100 AS decimal)                                AS  ValuePercent
     
    UNION   ALL
     
    SELECT
        N'ارزشیابی عملکرد سال 1395 کارکنان و مدیران'    AS  ped_Gathering_Title     ,
        N'مدیران میانی و هم تراز آن'                        AS  ped_SematGroup_Title    ,
        CAST(65 AS decimal)                                 AS  ValuePercent


    Regards, Majid

     

  9. Eric R | Technical Support Engineer
    Admin
    Eric R | Technical Support Engineer avatar
    233 posts

    Posted 02 Dec Link to this post

    Hi Majid,

    Thank you for providing the SQL Select Statements. Although, in order to fully troubleshoot this I need the SQL Create Scripts for the Tables along with sample data. Can you provide the tables SQL Scripts with data as outlined in the Import and Export SQL Database as Scripts?

    Please let me know if this is possible. Thank you and I look forward to your reply.

    Regards,


    Eric R | Technical Support Engineer
    Progress Telerik

    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  10. Majid
    Majid avatar
    6 posts
    Member since:
    Nov 2019

    Posted 03 Dec in reply to Eric R | Technical Support Engineer Link to this post

    Hi "Eric R"
    Thank you very much for your time

    SQL Create Scripts from Tables with sample data:

    USE [ReportGenerator_DB]
    GO
     
    SET ANSI_NULLS ON
    GO
    SET QUOTED_IDENTIFIER ON
    GO
    CREATE TABLE [dbo].[RGS_TableData](
        [Id] [int] IDENTITY(1,1) NOT NULL,
        [ped_Gathering_Title] [nvarchar](150) NULL,
        [ped_SematGroup_Title] [nvarchar](150) NULL,
        [ValuePercent] [decimal](18, 0) NULL,
     CONSTRAINT [PK_RGS_TableData] PRIMARY KEY CLUSTERED
    (
        [Id] ASC
    )WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
    ) ON [PRIMARY]
    GO
    SET IDENTITY_INSERT [dbo].[RGS_TableData] ON
     
    INSERT [dbo].[RGS_TableData] ([Id], [ped_Gathering_Title], [ped_SematGroup_Title], [ValuePercent]) VALUES (1, N'ارزشیابی عملکرد سال 1395 کارکنان و مدیران', N'کارکنان و مدیران پایه', CAST(96 AS Decimal(18, 0)))
    INSERT [dbo].[RGS_TableData] ([Id], [ped_Gathering_Title], [ped_SematGroup_Title], [ValuePercent]) VALUES (2, N'ارزشیابی عملکرد سال 1396 کارکنان و مدیران', N'مدیران میانی و هم تراز آن', CAST(58 AS Decimal(18, 0)))
    INSERT [dbo].[RGS_TableData] ([Id], [ped_Gathering_Title], [ped_SematGroup_Title], [ValuePercent]) VALUES (3, N'ارزشیابی عملکرد سال 1395 کارکنان و مدیران', N'کارکنان و مدیران پایه', CAST(79 AS Decimal(18, 0)))
    INSERT [dbo].[RGS_TableData] ([Id], [ped_Gathering_Title], [ped_SematGroup_Title], [ValuePercent]) VALUES (4, N'ارزشیابی عملکرد سال 1396 کارکنان و مدیران', N'کارکنان و مدیران پایه', CAST(100 AS Decimal(18, 0)))
    INSERT [dbo].[RGS_TableData] ([Id], [ped_Gathering_Title], [ped_SematGroup_Title], [ValuePercent]) VALUES (5, N'ارزشیابی عملکرد سال 1395 کارکنان و مدیران', N'مدیران میانی و هم تراز آن', CAST(65 AS Decimal(18, 0)))
    SET IDENTITY_INSERT [dbo].[RGS_TableData] OFF

     

    and "RadPivotGrid" and "RadHtmlChart" Connected to "SqlDataSource" named "dsChart"

    <asp:SqlDataSource ID="dsChart" runat="server" ConnectionString="<%$ ConnectionStrings:MainConnection %>" SelectCommandType="Text"
        SelectCommand="SELECT   Id, ped_Gathering_Title, ped_SematGroup_Title, ValuePercent     FROM    RGS_TableData"></asp:SqlDataSource>

     

    Regards, Majid

  11. Eric R | Technical Support Engineer
    Admin
    Eric R | Technical Support Engineer avatar
    233 posts

    Posted 03 Dec Link to this post

    Hi Majid,

    Thank you for providing the additional information. Unfortunately, the HTML5 Chart is a client-side rendered control that is rendered dynamically. When using Special Characters, this may export differently to PDF. However, there are some design changes that can be made to allow the chart so that it can export legibly. Let me review them below. 

    1. Removing Rotation Angle from the X-Axis Labels will stop the text from bleeding over the chart. This should render appropriately when exported to PDF. 

    2. The Legend Position and Orientation settings can be changed to accommodate various sizes. For example, using a Custom Position can move the location of the Legend. Then adjust the Height and Width Orientation settings so the width of the Legend is acceptable for exporting.

    I hope this helps. Please let me know if you need any additional information. Thank you.

    Regards,


    Eric R | Technical Support Engineer
    Progress Telerik

    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top