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

Adding a Barcode to the Editor and Exporting It to PDF


Product Telerik UI for ASP.NET MVC Editor


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


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());

More ASP.NET MVC Editor Resources

See Also

In this article