Template DataGrid with Barcode

Question

Good afternoon, I'm trying to add a BarCode control inside a DataGrid using a custom template, my net core version is 3.1 and synfusion is the last update.I leave my code and template

Sujith Kumar Rajkumar · Answer

Hi Diego, Greetings from Syncfusion support. From your query we understand that you are trying to render a barcode using core tag helpers inside the script tag used for grid column template. The tag helpers cannot be directly used inside the script tag, because we cannot serialize the data and bind to tag helpers that are initialized under script tag. So you can achieve this requirement by rendering a div element inside the script tag, then initialize and append barcode component to this div element rendered inside each of the row cell in the grid’s dataBound event as demonstrated in the below code snippet, We have prepared a sample based on this for your reference which you can find below, Sample: https://www.syncfusion.com/downloads/support/forum/152885/ze/GridTemplateWithBarCode161621674 Please get back to us if you require further assistance. Regards, Sujith R

diego · Answer

Perfect I understand that this is similar for all objects, to enter the barcode when printing or exporting to PDF ?

Sujith Kumar Rajkumar · Answer

Hi Diego, 

Before print you would need to perform the same operation done in the dataBound event as only div element is rendered inside the column template. This can be done in the beforePrint event of the Grid as demonstrated in the below code snippet, 





// Grid’s beforePrint event function 
function beforePrint(args) { 
        var barCodeElements = args.element.querySelectorAll('.barcode-elem'); 
        var i = 0; 
        while (i < barCodeElements.length) { 
            var barcode = new ej.barcodegenerator.BarcodeGenerator({ 
                width: '200px', 
                height: '150px', 
                mode: 'SVG', 
                type: 'Ean13', 
                value: '123123123124', 
            }); 
            barcode.appendTo(barCodeElements[i]); 
            i++; 
        } 
    } 

As for Pdf - Currently, we do not have support to export EJ2 components of column/row templates using the Pdf Export. 

However we have prepared a work around that tries to meet your requirement. In this initially the BarCode component is converted to canvas and from canvas to a jpeg format image. This image is then assigned as the cell value in the pdfQueryCellInfo event(for the column that has the BarCode rendered in it) which renders the component in the exported document. This is demonstrated in the below code snippet, 





// Barcode component is initialized 
var barcode = new ej.barcodegenerator.BarcodeGenerator({ 
                width: '200px', 
                height: '150px', 
                mode: 'SVG', 
                type: 'Ean13', 
                value: '123123123124', 
}); 
 
var image = []; 
var imgStrings = []; 
 
// Grid's toolbarClick event 
function toolbarClick(args) { 
        var gridObj = document.getElementById("Grid").ej2_instances[0]; 
        if (args.item.id === 'Grid_pdfexport') { 
            var barcodeInst = barcode; 
            // Executed for each data 
            for (var i = 0; i < gridObj.dataSource.length; i++) { 
                // blob url is created for the barcode component 
                var url = window.URL.createObjectURL(new Blob([(new XMLSerializer()).serializeToString(barcodeInst.barcodeCanvas)], { type: 'image/svg+xml' })); 
                image.push(new Image()); 
                // Triggered on image load 
                image[i].onload = (e) => { 
                    // A blank canvas is created with the required properties 
                    var element = document.createElement("canvas"); 
                    element.setAttribute("id", "ej2-canvas" + i); 
                    element.setAttribute("width", "150"); 
                    element.setAttribute("height", "150"); 
                    // The target image is drawn in the drawing context of the canvas 
                    var ctx = element.getContext('2d'); 
                    ctx.drawImage(e.currentTarget, 0, 0); 
                    // The context is converted to image string and pushed into a global variable 
                    var imageString = element.toDataURL('image/jpeg').replace('image/jpeg', 'image/octet-stream'); 
                    imageString = imageString.slice(imageString.indexOf(',') + 1); 
                    imgStrings.push(imageString); 
                    // Pdf is exported when all the image are convreted 
                    imgStrings.length == gridObj.dataSource.length && gridObj.pdfExport(); 
                } 
                image[i].src = url; 
            } 
        } 
} 
 
// Grid's pdfQueryCellInfo event 
function pdfQueryCellInfo(args) { 
        if (args.column.headerText == 'CodigoBarras') { 
            // The image string is mapped as bitmap and assigned to the cell value 
            args.value = new ej.pdfexport.PdfBitmap(imgStrings[args.cell.row.rowIndex]); 
        } 
} 

We have prepared a sample based on the above queries for your reference which you can find below, 

Sample: https://www.syncfusion.com/downloads/support/forum/152885/ze/ExportAndPrintWithGridTemplate-2038578796  

Let us know if you have any concerns. 

Regards, 
Sujith R

diego · Answer

Thanks for the support, I am going to do the direct printing of the Qr when generating the PDF not in the grid

Sujith Kumar Rajkumar · Answer

Hi Diego, 

Thanks for the update. Please get back to us if you face any issues or require any further assistance. 

Regards, 
Sujith R

diego · Answer

Hi Diego, 

Thanks for the update. Please get back to us if you face any issues or require any further assistance. 

Regards, 
Sujith R I need to print or generate the pdf, I only manage to do it if I first generate it in the grid, is it possible without showing it in the grid?

Sujith Kumar Rajkumar · Answer

Hi Diego, 

We are not able to properly understand the requirement from your query. Is your requirement to print or generate a pdf in a page directly in the browser without invoking the Grid’s print/pdf export method or cancel the print/pdf export that is called from the Grid. Please provide more details on the this so that we can further validate it from our end and provide you the response. 

Let us know if you have any concerns. 
  
Regards, 
Sujith R

diego · Answer

Hi Diego, 

We are not able to properly understand the requirement from your query. Is your requirement to print or generate a pdf in a page directly in the browser without invoking the Grid’s print/pdf export method or cancel the print/pdf export that is called from the Grid. Please provide more details on the this so that we can further validate it from our end and provide you the response. 

Let us know if you have any concerns. 
  
Regards, 
Sujith R Hello, I need to export and generate the barcode when printing or exporting to PDF

Sujith Kumar Rajkumar · Answer

Hi Diego, 
 
For “Export and generate the barcode when printing or exporting to PDF”  we had provided the solution in our previous update itself for which you had updated you are going to do the direct printing. So if you need to perform this operation please refer to the code snippet provided in that update to achieve it. 
 
Regards, 
Sujith R