Barcode on Grid Row

[ISMAIL HAMZAH]

Hi,

I want to show barcode on my grid row and when export to Excel, I want that barcode can be exported also with the data. But I did not know how to do it. Any simple example to get started?

below the illustrations of my goal:

Best Regards,

Ismail H

[Johnson Soundararajan S]

Hi ISMAIL HAMZAHi ,

We understand your query, you want to display a barcode on the grid row and in the exported Excel file as well. To achieve this, we recommend using Exporting with a column template. In this approach, you can utilize the barcode as an image format.

For your reference, we have shared a sample and documentation details.

Sample : Usjjik (forked) - StackBlitz

documentation link: Exporting Grid with Templates in EJ2 JavaScript Grid control | Syncfusion

Please get back to us, if you need further assistance

Regards,

Johnson Soundararajan S

[ISMAIL HAMZAH]

Hi Johnson,

Thank you for the respond. I'm aware of how to display image using template. But still did not understand how to show barcode as grid template?

Below is the code to show barcode on an ordinary HTML:

                            <div id="barcode" style="display: inline-block;"></div>
                            <script>
                                var barcodeCode128 = new ej.barcodegenerator.BarcodeGenerator({
                                    type: 'Code128',
                                    value: '@Model.Product.Number',
                                    width: '250px', height: '100px',
                                    mode: 'SVG',
                                });
                                barcodeCode128.appendTo('#barcode');
                            </script>

But how to convert it to grid template? the link you provide did not show how to create barcode on the grid.

Best Regards,

Ismail H

[Joseph Christ Nithin Issack]

Hi Ismail,

  From your query we understand that you are trying to render a barcode. 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,

Please refer the below code example:

 

<script id="template" type="text/x-template">

    <div class="barcode-elem">${OrderID}</div>

</script>

<script>

    function dataBound(args) {

        var barCodeElements = this.element.querySelectorAll('.barcode-elem');

        var i = 0;

        while (i < barCodeElements.length) {

            var value = barCodeElements[i].innerHTML;

            barCodeElements[i].innerHTML = '';

            var barcode = new ej.barcodegenerator.BarcodeGenerator({

                width: '200px',

                height: '150px',

                mode: 'SVG',

                type: 'Code128',

                value: value,

            });

            barcode.appendTo(barCodeElements[i]);

            i++;

        }

    }

</script>

 

[ISMAIL HAMZAH]

Hi Joseph,

Thank you for the code snippet, it works with little changes:

note: can not access the row element using this.element from dataBound, should access via the grid instance. ref: https://ej2.syncfusion.com/javascript/documentation/grid/row/row-template

so my final dataBound code:

                    var gridInstance = document.getElementById('Grid').ej2_instances[0];
                    var barcodeElements = gridInstance.getContentTable().querySelectorAll('.barcode-element');


                    if (barcodeElements) {
                        var i = 0;
                        while (i < barcodeElements.length) {


                            var value = barcodeElements[i].innerHTML;
                            barcodeElements[i].innerHTML = '';
                            var barcode = new ej.barcodegenerator.BarcodeGenerator({
                                width: '200px',
                                height: '80px',
                                mode: 'SVG',
                                type: 'Code128',
                                value: value,
                            });
                            barcode.appendTo(barcodeElements[i]);
                            i++;
                        }


                    }

the result is awesome:

Unfortunately the Excel export still did not work because error when converting the barcode to base64:

                excelQueryCellInfo: (args) => {
                    if (args.column.headerText === 'Number') {


                        var barcode = new ej.barcodegenerator.BarcodeGenerator({
                            width: '200px',
                            height: '80px',
                            mode: 'SVG',
                            type: 'Code128',
                            value: args.data.Number,
                        });


                        args.image = {
                            base64: barcode.exportAsBase64Image('JPG'),
                            height: 70,
                            width: 70,
                        };
                    }
                },

with error:

barcode export ref: https://ej2.syncfusion.com/javascript/documentation/barcode/export

Could you please show me to solve this one?

Best regards,

Ismail H

[Johnson Soundararajan S]

Hi ISMAIL HAMZAH,

We have received your request to show a barcode in both the grid row and the exported Excel file. We have fulfilled your requirement by converting the barcode to a base64 string during the dataBound event. we need to split the base64 string for Excel export

Please refer to the below sample and code snippet for more information.

Code sample :

index.js

 

 

function dataBound(args) {

  var grid = document.getElementsByClassName('e-grid')[0].ej2_instances[0];

  const rowData = grid.getDataRows();

  for (let i = 0; i < rowData.length; i++) {

    var value = rowData[i].querySelector('.barcode-elem').innerHTML;

    rowData[i].querySelector('.barcode-elem').innerHTML = '';

    var barcode = new ej.barcodegenerator.BarcodeGenerator({

      width: '240px',

      height: '100px',

      mode: 'SVG',

      type: 'Code128',

      value: value,

    });

    barcode.appendTo(rowData[i].querySelector('.barcode-elem'));

    const base64 = barcode.exportAsBase64Image('JPG');

    base64

      .then((result) => {

        barcodes.push(result);

      })

      .catch((error) => {

        console.error(error);

      });

  }

}

function toolbarClick(args) {

  if (args.item.id === 'Grid_excelexport') {

    var grid = document.getElementsByClassName('e-grid')[0].ej2_instances[0];

    for (let i = 0; i < barcodes.length; i++) {

      const splits = barcodes[i].split(';base64,');

      const base64Data = splits[1];

      grid.dataSource[i].Barcode = base64Data;

    }

    grid.excelExport();

  }

}

function excelQueryCellInfo(args) {

  if (args.column.headerText === 'Barcode') {

    args.image = {

      base64: args.data.Barcode,

      height: 100,

      width: 250,

    };

  }

}

 

Sample : Usjjik (forked) - StackBlitz

Please get back to us, if you need further assistance

Regards,

Johnson Soundararajan S

[ISMAIL HAMZAH]

Hi Johnson,

Thank you for the update. On my side there is error at toolbarClick:

function toolbarClick(args) {

  if (args.item.id === 'Grid_excelexport') {

    var grid = document.getElementsByClassName('e-grid')[0].ej2_instances[0];

    for (let i = 0; i < barcodes.length; i++) {

      const splits = barcodes[i].split(';base64,');

      const base64Data = splits[1];

      grid.dataSource[i].Barcode = base64Data;

    }

    grid.excelExport();

  }

}

The grid.dataSource[i] is undefined. when I debuging, grid.dataSource is undefined also. Is it because I'm using ODataV4 ?

Do you have example that using ODataV4 ?

Thank you,

Ismail H

[Johnson Soundararajan S]

Hi ISMAIL HAMZAH,

We have changed the sample for remote data (OData V4) to meet your requirements. We create a barcode in the dataBound event and store it as a base64 string in an array. Then, in the excelQueryCellInfo function, we set the base64 string based on the row index. Subsequently, we split the base64 string for Excel export.

Please refer to the below sample and code snippet for more information.

Code sample :
 

index.js

 

function dataBound(args) {

  var grid = document.getElementsByClassName('e-grid')[0].ej2_instances[0];

  const rowData = grid.getDataRows();

  for (let i = 0; i < rowData.length; i++) {

    var value = rowData[i].querySelector('.barcode-elem').innerHTML;

    rowData[i].querySelector('.barcode-elem').innerHTML = '';

    var barcode = new ej.barcodegenerator.BarcodeGenerator({

      width: '240px',

      height: '100px',

      mode: 'SVG',

      type: 'Code128',

      value: value,

    });

    barcode.appendTo(rowData[i].querySelector('.barcode-elem'));

    const base64 = barcode.exportAsBase64Image('JPG');

    base64

      .then((result) => {

        barcodes.push(result);

      })

      .catch((error) => {

        console.error(error);

      });

  }

}
 

function toolbarClick(args) {

  if (args.item.id === 'Grid_excelexport') {

    grid.excelExport();

  }

}
 

function excelQueryCellInfo(args) {

  if (args.column.headerText === 'Barcode') {

    const rowIndox = grid.getRowIndexByPrimaryKey(args.data.OrderID);

    if (barcodes[rowIndox]) {

      const splits = barcodes[rowIndox].split(';base64,');

      const base64Data = splits[1];

      args.image = {

        base64: base64Data,

        height: 100,

        width: 250,

      };

    }

  }

}
 

Sample : Usjjik (forked) - StackBlitz

Please get back to us, if you need further assistance.

Regards,

Johnson Soundararajan S

[ISMAIL HAMZAH]

Hi Johnson,

Thank you for the update, that's what I need. 

Successfully export grid with barcode to Excel.

Best regards,

Ismail H

[Johnson Soundararajan S]

Hi ISMAIL HAMZAH,

You're welcome! Please feel free to contact us if you need any other assistance.

Regards,

Johnson Soundararajan S