export kendo grid to pdf in arabic/persian

3 posts, 0 answers
  1. sorosh
    sorosh avatar
    2 posts
    Member since:
    Jun 2016

    Posted 13 Jun Link to this post

    hi

    when i export grid and gauge to PDF that have Unicode char its not readable..what should i do?

    its very important for me.please help me.

    its my code.

        <script>
                $("button").on("click", function () {
                    var grid = $("#grid").data("kendoGrid");
                    var progress = $.Deferred();
         
                    kendo.drawing.drawDOM($("#gauge-container"))
                    .done(function (header) {
                      
                        grid._drawPDF(progress)
                        .then(function (root) {
                           
                            return kendo.drawing.exportPDF(root, { multiPage: true });
                        })
                        .done(function (dataURI) {

                            kendo.saveAs({
                                dataURI: dataURI,
                                fileName: "test.pdf"

                            });

                            progress.resolve();
                        })
                    });
                    //})
                });
            </script>

  2. Stef
    Admin
    Stef avatar
    3047 posts

    Posted 13 Jun Link to this post

    Hello sorosh,

    Your question is posted in Telerik Reporting forums.

    Please check if the Drawing of HTML Elements(Configuration) help article helps you to set fonts properly in your application. If you need further help, please post the question in the corresponding Telerik Kendo UI forum.

    Thank you for your understanding.

    Regards,
    Stef
    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. DevCraft banner
  4. sorosh
    sorosh avatar
    2 posts
    Member since:
    Jun 2016

    Posted 13 Jun in reply to Stef Link to this post

    Hello steff

    thanks for your answer .but it dose not work for me.sorry that i send message here.but its problem of very people that i know.

    i send 2 attachment from my website and when i export to pdf and my code.

    in my pdf file font its reverse and not readable.

    but in the web page its OK

    here is my code

    ************************************************************************** Code ***********************************************************

    @{
        ViewBag.Title = "Index";
        Layout = "~/Views/Shared/_LayoutRep.cshtml";
     
    }

    <style>
        .k-pdf-export p {
            border: 2px solid black;
            font-family:Tahoma;
        }
           .k-pdf-export  {
            border: 2px solid black;
            font-family:Tahoma;
        }

          
            /*
                Make sure everything in the page template is absolutely positioned.
                All positions are relative to the page container.
            */
            .page-template > * {
                   font-family: Tahoma, sans-serif;
                font-size: 90%;
            }
            .page-template .header {
                top: 20px;
                border-bottom: 1px solid #000;
                     font-family: Tahoma, sans-serif;
            }
            .page-template .footer {
                bottom: 20px;
                border-top: 1px solid #000;
            }

            /*
                Use the DejaVu Sans font for display and embedding in the PDF file.
                The standard PDF fonts have no support for Unicode characters.
            */
            .k-grid {
                   font-family: Tahoma, sans-serif;
             
            }

        
    </style>

        <div id="grid">

            <style type="text/css">
            #gauge-container {
                background: transparent url(@Url.Content("~/Content/Images/gauge-container2.png")) no-repeat 50% 50%;
                width: 304px;
                height: 304px;
                display:inline-block;
                text-align: center;
                
                margin: 0 auto 30px auto;
                }

    #gauge {
                width: 230px;
                height: 230px;
             
                margin: 0 auto 0;
            }
    #gauge2 {
            width: 230px;
                height: 230px;
                margin: 0 auto 0;
            }
                  #gauge3 {
                width: 230px;
                height: 230px;
                margin: 0 auto 0;
            }
                          #gauge4 {
                width: 230px;
                height: 230px;
                margin: 0 auto 0;
            }
            </style>
            <label  >گزارش پیشرفت فعالیت </label>
     
            <div id="header">
                <button class="k-button">pdf </button>
            </div>
         
            <script>
                $("button").on("click", function () {
                    var grid = $("#grid").data("kendoGrid");
                    var progress = $.Deferred();
                   
                    kendo.drawing.drawDOM($("#gauge-container"))
                    .done(function (header) {
                        //   kendo.drawing.drawDOM($("#footer"))
                        //   .done(function(footer) {
                        grid._drawPDF(progress)
                        .then(function (root) {
                            //    root.children.unshift(header);
                            //   root.children.push(footer);
                            return kendo.drawing.exportPDF(root, { multiPage: true });
                        })
                        .done(function (dataURI) {

                            kendo.saveAs({
                                dataURI: dataURI,
                                fileName: "test.pdf"

                            });

                            progress.resolve();
                        })
                    });
                    //})
                });
            </script>
            <div id="gauge-container">



                @(Html.Kendo().RadialGauge()
              .Name("gauge")
              .Pointer(pointer => pointer.Value(Mabnaa.Functions.CalculateReport.Cal(int.Parse(Request.Params["Id2"].ToString()))))
              .Scale(scale => scale
                  .MinorUnit(5)

                  .Max(100)
                  .Min(0)

                  .Labels(labels => labels
                      .Position(GaugeRadialScaleLabelsPosition.Inside)
                      
                  )
                  .Ranges(ranges =>
                  {
                      ranges.Add().From(0).To(50).Color("#ffc700");
                      ranges.Add().From(50).To(100).Color("#7fd87f");
                      ranges.Add().From(0).To(5).Color("#c20000");
                  })
             )
                )
             
             
                <div style="color:black;">
                    <input type="text" value="تسایتسی" />
                </div>
            
                   
                </div>

        

            <div id="gauge-container">

                @(Html.Kendo().RadialGauge()
              .Name("gauge2")
              .Pointer(pointer => pointer.Value(Mabnaa.Functions.CalculateReport.Cal(int.Parse(Request.Params["Id2"].ToString()))))
              .Scale(scale => scale
                  .MinorUnit(5)

                  .Max(100)
                  .Min(0)

                  .Labels(labels => labels
                      .Position(GaugeRadialScaleLabelsPosition.Inside)
                  )
                  .Ranges(ranges =>
                  {
                      ranges.Add().From(0).To(50).Color("#ffc700");
                      ranges.Add().From(50).To(100).Color("#7fd87f");
                      ranges.Add().From(0).To(5).Color("#c20000");
                  })
             )
                )
                <label>
                    گیج واقعی
                </label>
            </div>


            <div id="gauge-container">

                @(Html.Kendo().RadialGauge()
              .Name("gauge3")
              .Pointer(pointer => pointer.Value(Mabnaa.Functions.CalculateReport.Cal(int.Parse(Request.Params["Id2"].ToString()))))
             .Scale(scale => scale
                  .MinorUnit(5)

                  .Max(100)
                  .Min(-100)

                  .Labels(labels => labels
                      .Position(GaugeRadialScaleLabelsPosition.Inside)
                  )
                  .Ranges(ranges =>
                  {
                      ranges.Add().From(0).To(-50).Color("#ffc700");
                      ranges.Add().From(0).To(100).Color("#7fd87f");
                      ranges.Add().From(-50).To(-100).Color("#c20000");
                  })
             )
                )
                <label>
                    گیج انحراف
                </label>
            </div>

            <div id="gauge-container">



                @(Html.Kendo().RadialGauge()
              .Name("gauge4")
              .Pointer(pointer => pointer.Value(Mabnaa.Functions.CalculateReport.Cal(int.Parse(Request.Params["Id2"].ToString()))))
              .Scale(scale => scale
                  .MinorUnit(5)

                  .Max(100)
                  .Min(0)

                  .Labels(labels => labels
                      .Position(GaugeRadialScaleLabelsPosition.Inside)
                  )
                  .Ranges(ranges =>
                  {
                      ranges.Add().From(0).To(50).Color("#ffc700");
                      ranges.Add().From(50).To(100).Color("#7fd87f");
                      ranges.Add().From(0).To(5).Color("#c20000");
                  })
             )
                )
                <label>
                    گیج  درصد انحراف
                </label>
            </div>



            <script>
                $(".export-pdf").click(function () {
                    var gauge = $("#gauge").getKendoRadialGauge();
                    gauge.exportPDF({ paperSize: "auto", margin: { left: "1cm", top: "1cm", right: "1cm", bottom: "1cm" } }).done(function (data) {
                        kendo.saveAs({
                            dataURI: data,
                            fileName: "chart.pdf",
                            proxyURL: "//demos.telerik.com/kendo-ui/service/export"
                        });
                    });
                });


            </script>


            <script type="text/javascript">
                $(document).ready(function () {
                    $(".box").bind("change", refresh);

                    window.configuredRanges = $("#gauge").data("kendoRadialGauge").options.scale.ranges;
                });

                function refresh() {
                    var gauge = $("#gauge").data("kendoRadialGauge"),
                        showLabels = $("#labels").prop("checked"),
                        showRanges = $("#ranges").prop("checked"),
                        positionInputs = $("input[name='labels-position']"),
                        labelsPosition = positionInputs.filter(":checked").val(),
                        options = gauge.options;

                    options.transitions = false;
                    options.scale.labels = options.scale.labels || {};
                    options.scale.labels.visible = showLabels;
                    options.scale.labels.position = labelsPosition;
                    options.scale.ranges = showRanges ? window.configuredRanges : [];

                    gauge.redraw();
                }
            </script>





            <script type="text/javascript">
                $(document).ready(function () {
                    $(".box").bind("change", refresh);

                    window.configuredRanges = $("#gauge2").data("kendoRadialGauge").options.scale.ranges;
                });

                function refresh() {
                    var gauge = $("#gauge2").data("kendoRadialGauge"),
                        showLabels = $("#labels").prop("checked"),
                        showRanges = $("#ranges").prop("checked"),
                        positionInputs = $("input[name='labels-position']"),
                        labelsPosition = positionInputs.filter(":checked").val(),
                        options = gauge.options;

                    options.transitions = false;
                    options.scale.labels = options.scale.labels || {};
                    options.scale.labels.visible = showLabels;
                    options.scale.labels.position = labelsPosition;
                    options.scale.ranges = showRanges ? window.configuredRanges : [];

                    gauge.redraw();
                }
            </script>

            <script type="text/javascript">
                $(document).ready(function () {
                    $(".box").bind("change", refresh);

                    window.configuredRanges = $("#gauge3").data("kendoRadialGauge").options.scale.ranges;
                });

                function refresh() {
                    var gauge = $("#gauge3").data("kendoRadialGauge"),
                        showLabels = $("#labels").prop("checked"),
                        showRanges = $("#ranges").prop("checked"),
                        positionInputs = $("input[name='labels-position']"),
                        labelsPosition = positionInputs.filter(":checked").val(),
                        options = gauge.options;

                    options.transitions = false;
                    options.scale.labels = options.scale.labels || {};
                    options.scale.labels.visible = showLabels;
                    options.scale.labels.position = labelsPosition;
                    options.scale.ranges = showRanges ? window.configuredRanges : [];

                    gauge.redraw();
                }
            </script>




            <script type="text/javascript">
                $(document).ready(function () {
                    $(".box").bind("change", refresh);

                    window.configuredRanges = $("#gauge4").data("kendoRadialGauge").options.scale.ranges;
                });

                function refresh() {
                    var gauge = $("#gauge4").data("kendoRadialGauge"),
                        showLabels = $("#labels").prop("checked"),
                        showRanges = $("#ranges").prop("checked"),
                        positionInputs = $("input[name='labels-position']"),
                        labelsPosition = positionInputs.filter(":checked").val(),
                        options = gauge.options;

                    options.transitions = false;
                    options.scale.labels = options.scale.labels || {};
                    options.scale.labels.visible = showLabels;
                    options.scale.labels.position = labelsPosition;
                    options.scale.ranges = showRanges ? window.configuredRanges : [];

                    gauge.redraw();
                }
            </script>
        </div>
       



        <script>


            $("#grid").kendoGrid({
                pdf: {

                    allPages: true,
                    //  landscape: true,
                    DefaultFontFamily: "Arial Unicode MS",
                    
                },

            });

        </script>

        ***************************************************************************************** end *************************************************

    thanks

     

Back to Top