We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Displaying and printing barcodes

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

7 Replies

FS Farveen Sulthana Thameeztheen Basha Syncfusion Team October 3, 2016 12:06 PM UTC

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 



FS Farveen Sulthana Thameeztheen Basha Syncfusion Team October 5, 2016 05:56 AM UTC

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 . 

Please get back to us if you have any queries. 

Regards, 

Farveen.T 


  



AM Albert Morgades October 8, 2016 06:57 AM UTC

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



AM Albert Morgades October 8, 2016 02:26 PM UTC

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


FS Farveen Sulthana Thameeztheen Basha Syncfusion Team October 10, 2016 04:07 PM UTC

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. 


Regards, 

Farveen.T 



AM Albert Morgades October 11, 2016 02:30 PM UTC

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



FS Farveen Sulthana Thameeztheen Basha Syncfusion Team October 13, 2016 12:32 PM UTC

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. 

  
Regards, 

Farveen.T 





Loader.
Up arrow icon