Displaying and printing barcodes

[Albert Morgades]

Hi

I am building an application to display and print a list of barcodes.

I managed to get the list of barcodes displayed in a grid with a template column.

However, the barcodes are not printed by PrintGrid.

Can you please advice how to print barcodes?

thank you.

br albert

[Farveen Sulthana Thameeztheen Basha]

Thanks for your interest in Syncfusion products. 

 

  

We were able to reproduce the reported issue (unable to print barcode (canvas based control)) from our side and we will validate and get back to you with  details on 5th October 2016. 

 

 

  

Regards, 

 

Farveen.T 

[Farveen Sulthana Thameeztheen Basha]

Hi Albert, 

 

Thanks for your patience. 

 

BarCode control is a canvas element and so we cannot directly print that element. So you can use the “beforePrint” event in the “Print” method. In this event, you can  get the canvas element of the barcode, then convert it into image. Thus the barcode image can be printed. 

Please refer the code snippet for printing the barcode in beforePrint event. 

beforePrint: function (args){ 

       if(args.requestType == "print"){ 

                 

               for(var i=0;i<len;i++){ 

                    img = new Image(); 

                    img.src = this.element.find(".barcode").children("canvas")[i].toDataURL(); 

                   args.element.find(".barcode").eq(i).parent("td").append(img); 

              }                                                                 

         } 

} 

 

Please refer the sample attached . 

http://jsplayground.syncfusion.com/aox5siuf 

Please get back to us if you have any queries. 

Regards, 

Farveen.T 

  

[Albert Morgades]

Thank you very much for your answer.

It helped me understanding why barcodes didn't print.

I am trying to modify the code example provided to display a different barcode on each row, e.g. the EmployeeID as barcode.

Unfortunately I don't get it working. It displays/prints the one and same EmployeeID in all elements on a page.

Probably I don't fully understand the data structure of the Grid.

Could you please advice on how to do that?

Thank you very much for your advice.

Br albert

I attach the modification I made to the code to display EmployeeID as barcode39 on each row.

          function template(args) {
            this.element.find(".barcode").ejBarcode({text: String(args.data.EmployeeID) ,symbologyType: "code39"
        }); 
      }

[Albert Morgades]

Adding to my previous message, please see below the source code of my app.

This code displays the barcodes properly but I don't get the beforePrint function to work.

THank you for your advice.

br albert

<script type="text/x-jsrender" id="columnTemplate">
    <div>
        @(Html.EJ().Barcode("{{:SalesPriceID}}")
             .Text("{{:SalesPriceID}}")
             .SymbologyType(BarcodeSymbolType.Code39)
        )
    </div>
</script>

@(Html.EJ().Grid<Object>("FlatGrid")
                .Datasource((IEnumerable<object>)ViewBag.SalesPrices)
                .ToolbarSettings(toolBar => toolBar.ShowToolbar().ToolbarItems(items =>
                {
                    items.AddTool(ToolBarItems.PrintGrid);
                }))
                .Columns(col =>
                {
                    col.HeaderText("Employee Image").Template("#columnTemplate").Add();
                    col.Field("SalesPriceID").Add();
                    col.Field("Saanto").Add();
                })
)

<script type="text/javascript">

    $(function () {
        $("#FlatGrid").ejGrid({
            beforePrint: function (args) {
                debugger;
                if (args.requestType == "print") {
                    var img = new Image();
                    var len = args.element.find(".barcode").children("canvas").length;
                    this.model.allowPaging = false;
                    this.refreshContent();
                    this.getPager().css('display', 'none');
                    for (var i = 0; i < len; i++) {
                        img = new Image();
                        img.src = this.element.find(".barcode").children("canvas")[i].toDataURL();
                        args.element.find(".barcode").eq(i).parent("td").append(img);
                    }
                    this.model.allowPaging = true;
                    this.refreshContent();
                    this.getPager().css('display', 'block');
                }
            }
        });
    });

[Farveen Sulthana Thameeztheen Basha]

Hi Albert, 

We have analyzed your query and if you need to display different barcode on each row, pass the corresponding row value to the "text" property of barcode for the corresponding element. Also use "dataBound" grid event to render barcode at initial render. 

  

Please refer the below code snippet 

function dataBound(args) { 

               var len1= this.model.currentViewData.length; 

               for(var j=0; j<len1; j++){ 

                     var num= this.model.currentViewData[j].EmployeeID; 

                    this.element.find(".barcode").eq(j).ejBarcode({text:  num.toString(),symbologyType: "qrbarcode"}); 

    } 

} 

function templateRefresh(args) { 

                if(!this.initialRender){ 

                      var num1 =args.data.EmployeeID; 

                      $(args.cell).find(".barcode").ejBarcode({text: num1.toString(),symbologyType: "qrbarcode"}); 

         } 

} 

 

Please refer the modified sample according to your requirement. 

http://jsplayground.syncfusion.com/subopamz 

Regards, 

Farveen.T 

[Albert Morgades]

Thank you very much Farveen.T!

Syncfusion products are really good and the support you are providing is really great!

I got my app working following your instructions but I still have one issue I don't understand.

In case 2 consecutive rows have the same value to be displayed as barcodes, they get merged into one row.

You can simulate that in your example also. If you use "Country" as the field to be barcoded, you will see rows getting merged.

My app has to display many similar barcodes and this issue makes it a real problem.

Can you please advice on how to fix that?

Thank you again.

Br albert

[Farveen Sulthana Thameeztheen Basha]

Hi Albert, 

  

Thanks for your patience. 

We have analyzed your query and when we gave “Country” field values to be shown in barcode on the dataBound event, the rows doesn’t get merged. The mentioned issue has been reproduced only if we give the “Country” field value as “ id” in the column template. The issue occurred because the multiple elements has same “id” attribute value. It must be unique. So you have to use the column id with “unique row values”. Then you can set country field value to barcode on dataBound  event. 

Please refer the code snippet : 

<script type="text/x-jsrender" id="columnTemplate"> 

 

    <div id="{{:EmployeeID}}barcode" class="barcode"></div> //use column with unique rowvalues 

 

<script> 

Please refer the modified sample according to your requirement. 

http://jsplayground.syncfusion.com/edan3hr2 

  

Regards, 

Farveen.T