如何在Kendo Grid中显示Qr代码？ [英] How to show Qr Code in Kendo Grid?

问题描述

这是我的div，但它在剑道网格之外

This is my div but it outside kendo grid

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

这是我的剑道网格字段

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

在这种情况下，我的Qrcode在网格外生成，其中uniq （网址+ id）
但我想在我的剑道网格中使用这个全部qrcode。

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

如果我当时尝试使用div id我按照要求获得qrcodes但是在这里，我希望在我的网格中完成这个事情。

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.

请帮帮我。

谢谢提前。

推荐答案

模板函数需要返回将使用的HTML字符串。我希望模板在网格单元格中创建一个空DIV，其中包含class =QRME和id的数据属性。然后在网格的dataBound事件中，遍历所有QRME div，获取id并创建QR码：

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

这篇关于如何在Kendo Grid中显示Qr代码？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！