How to show Qr Code in Kendo Grid?

user_7469490 0
Viewed 903

This is my div but it outside kendo grid

<div>
<div id="qrUrl"></div> 
</div>

This is my kendo grid field

 columns: [
    {
     field: "Id",
    },
    {
    title: "QrCode",
    width: 300,
    template: function(dataItem) 
    {     
       $(#Qrurl).kendoQRCode({ 
       value: "www.google.com"+ dataItem.Id,
       errorCorrection: "M",
       size: 120,
       border: {
       color: "#000000",
       width: 5
               }
       });
    }

In this situation my Qrcode generated outside grid with uniq (url+id ) but i want to this all qrcode in my kendo grid.

i tried servel time this and another code but still not reached up to mark.

 template: function(dataItem) 
        {     
           $('<div></div>')
           .kendoQRCode({ 
           value: "www.google.com"+ dataItem.Id,
           errorCorrection: "M",
           size: 120,
           border: {
           color: "#000000",
           width: 5
                   }
           });
        }

If i tried with div id at that time i got qrcodes as per requirement but outside grid here, i want to complete this thing in my grid.

Please help me.

Thank you for advance.

kendo-grid kendo-ui qr-code jquery javascript
2 Answers

I can't use dataBound and therefore I was looking for a solution that works with template. First I make a div instance and put the QR code there and return outerHTML.

template: function(dataItem) {
  return jQuery("<div class='qrcode'></div>")
          .kendoQRCode({
          value: kendo.htmlEncode(dataItem["Id"]),
          errorCorrection: "M",
          size: 60,
          border: {
            color: "#000",
            width: 1
          }
        }).html();
}

working DEMO

user_19970070
Related