Generate QrCode in Editor

[Ruairi]

Im using the Kendo UI Editor and I'd like to dynamically display QrCodes into the Editor.

So Ive added a Custom Tool Button item that calls the following method:

function insertQRCodeTest() {
    var editor = getEditor();
    var qrCodeDiv = "<div id='qrCode1'></div>";
    editor.exec("insertHtml", { html: qrCodeDiv, split: false });

    $("#qrCode1").kendoQRCode({
      value: " my data here...",
      errorCorrection: "M",
      size: 120,
      border: {
        color: "#000000",
        width: 5
      }
    });
  }

 

The qrCode1 div is added however the QrCode is not genearted\displayed - is this even possible?

[Ianko]

Hello Tyler,

You can. In your case, however, if you are using the classic editor (iframe content area) $("#qrCode1") would not return you the element inserted. Thus, you will not have a QR generated. 

Instead, you can handle that by using dynamic DOM elements without beeing added to the DOM of the editor's content area. Plus, use the QRCode API to just get the QR code and not gave the entire widget instance in the content. Here you are an example: http://dojo.telerik.com/IFUkA. 

Regards,
Ianko
Telerik by Progress