剣道にQrコードを表示するには？

Question

これは私のdiv要素ですが、それ外剣道グリッドこれは私のQRコードは、uniqの（URL + ID）と外のグリッドを生成し、このような状況で私の剣道のグリッドフィールド

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

ある

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

が、私は剣道のグリッドでこれをすべてqrcodeしたい。

私はservelとこれと別のコードを試しましたが、まだマークに達していません。

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

私はここでの要件はなく外部グリッドごとにqrcodesを得たその時点でのdiv idにしようとした場合、私は私のグリッドにこの事を完了したいです。

私を助けてください。

ありがとうございます。

Answer 1

テンプレート関数は、使用されるHTMLの文字列を返す必要があります。私は、テンプレートの空のDIVをクラス= "QRME"とIDのデータ属性でグリッドセルに作成させます。そして、グリッドのデータバインドされたイベントは、すべてのQRMEのdivタグをループ、IDを取得し、QRコードを作成するには：

$("#grid").kendoGrid({ 
    columns: [ { 
    field: "Id", 
    }, { 
    title: "QrCode", 
    width: 300, 
    template: function(dataItem) { 
     return "<div class='QRME' data-id='" + kendo.htmlEncode(dataItem.Id) + "'></div>"; 
    } 
    }], 
    dataSource: [ { Id: "1" }, { Id: "2" }, { Id: "3" } ], 
    dataBound: function(e) { 
    $("div.QRME").each(function(idx){ 
     $(this).kendoQRCode({ 
     value: "www.google.com"+ $(this).data("id"), 
     errorCorrection: "M", 
     size: 120, 
     border: { 
      color: "#000000", 
      width: 5 
     } 
     }); 
    }); 
    } 
}); 

氏Ezankerが試さごresponse.iありがとうございDEMO