New to Telerik UI for ASP.NET Core? Download free 30-day trial

Add Barcode to Editor and Export to PDF


Product Editor for Progress® Telerik® UI


I want to have a Barcode inside the Editor and export everything to PDF.


You can achieve this requirement using the following approach:

<div id="barcodeContainer" style="display: none;">
    <div style="text-align:center;">

<br />

          .HtmlAttributes(new { style = "width: 100%; height:700px", aria_label = "editor" })
          .Pdf(pdf => pdf
              .Margin(20, 20, 20, 20)
              .ProxyURL(Url.Action("Pdf_Export_Save", "Editor"))
          .Tools(tools => tools
                <p style="text-align:center;">
                    <span style="font-family:Verdana, Geneva, sans-serif;font-size:large;">
                        <strong>Click the Export to PDF button</strong>
    $(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());
In this article