Click here to Skip to main content
15,614,766 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
I am working on a table that can contain all possible products in the warehouse. One of the columns needs to contain some buttons and the QR code in image and text form.
I am currently using w2ui to generate the table and this is the code for the QR code column (I stripped the buttons and custom id to make it more readable:
      field: 'barcode', text: 'QR-Code', size: '200px', sortable: true,   
      resizable: true,
      render: function (record, index, col_index) {

      var html = "<body>" +"<img id='barcode' class =\"thumbnail\"  
      src=\"" + record.barcode +
      "& amp; size = 100x100\" alt=\"\" title=\"\" width=\"50\" height=\"50\" />" +
      record.barcode + "</body >";

      return html;

This works (I know the "' are used kinda bad), but I don't want to depend on the "" api, I'd rather generate it in the browser to also allow offline access to the codes.

The problem is, even tho all my tags have custom ID's, I can't access them right inside this field definition, as they are only created after the return. There are no events that trigger everytime a row / record is loaded (As far my search results told me), so I have to somehow implement it right there in the field render Function.

Is there a library to achieve what I am trying, maybe it only generates the qr code html and I can insert it, or it doesn't require an element to append itself to, or do I have to build something from the ground up? My search hasn't brought me any luck yet.

What I have tried:

I tried a lot of QR generators. "Qrious", "JQuery.ClassyQR", "QRcode.js" and some lesser known ones, but none quite enabled me to do what I want here.
Updated 13-Jan-22 23:03pm

1 solution

The GitHub - nuintun/qrcode: A pure JavaScript QRCode encode and decode library.[^] library provides a function to encode the QR code as a base64 string in GIF format. Perhaps you can use that? You could then just return the img using the string as the content:

<img src="data:image/gif,<string>" alt="">
Share this answer

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900