问题

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.

回答1:

The template function needs to return a string of the HTML that will be used. I would have the template create an empty DIV in the grid cell with a class="QRME" and a data attribute for the id. Then in the dataBound event of the grid, loop through all the QRME divs, get the id and create the QR codes:

$("#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
         }
       });
    });
  }
});

Working DEMO

回答2:

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