Adding a Barcode to the Editor and Exporting It to PDF

Environment

Product

Telerik UI for ASP.NET Core Editor

Description

I want to have a Barcode inside the Editor and export everything to PDF when working with the Telerik UI for ASP.NET Core components.

Solution

You can achieve this requirement using the following approach:

Index.cshtml

<div id="barcodeContainer" style="display: none;">
    <div style="text-align:center;">
        @(Html.Kendo().Barcode().Name("barcode")
        .Value("2346722")
        .Width(280)
        .Height(100))
    </div>
</div>

<br />

@(Html.Kendo().Editor()
          .Name("editor")
          .HtmlAttributes(new { style = "width: 100%; height:700px", aria_label = "editor" })
          .Pdf(pdf => pdf
              .Margin(20, 20, 20, 20)
              .PaperSize("A4")
              .ProxyURL(Url.Action("Pdf_Export_Save", "Editor"))
          )
          .Tools(tools => tools
              .Clear()
              .Pdf()
          )
          .Value(@<text>
                <br/>
                <p style="text-align:center;">
                    <span style="font-family:Verdana, Geneva, sans-serif;font-size:large;">
                        <strong>Click the Export to PDF button</strong>
                    </span>
                </p>
           </text>)
    )

script.js

    $(document).ready(function () {
        var editor = $("#editor").data().kendoEditor;
        var barcode = $("#barcode").data().kendoBarcode;

        var image;
        barcode.exportImage().done(function (data) {
            image = data;
            editor.value("<div style='width: 100%; text-align: center;'><img src='" +
                image + "'></img>" + "<br/>" + editor.value());
        });
    });

More ASP.NET Core Editor Resources

• ASP.NET Core Editor Documentation

• ASP.NET Core Editor Demos

• ASP.NET Core Editor Product Page

• Telerik UI for ASP.NET Core Video Onboarding Course (Free for trial users and license holders)

• Telerik UI for ASP.NET Core Forums

See Also

• Client-Side API Reference of the Editor for ASP.NET Core
• Server-Side API Reference of the Editor for ASP.NET Core
• Telerik UI for ASP.NET Core Breaking Changes
• Telerik UI for ASP.NET Core Knowledge Base