Custom Design for Barcode control.
5 Dec 201817 minutes to read
The Barcode can be easily configured to the DOM element, such as div. you can create a Barcode with a highly customizable look and feel.
Syntax
ej-barcode
Example
//Add div container for Barcode rendering.
<div ng-controller="BarcodeCtrl"></div>
//Create the Barcode by setting the symbologyType and providing input URL to the text property. QR Barcode is rendered by default.
<div id="barcode" ej-barcode e-text="http://www.syncfusion.com"></div>
Members
barcodeToTextGapHeight number
Specifies the distance between the Barcode and text below it.
NOTE
This property is applicable only for one dimensional barcode.
Default Value:
- 10 pixels
Example
//Add div container for Barcode rendering.
<div ng-controller="BarcodeCtrl"></div>
// Add the below code to set barcodeToTextGapHeight during initialization.
<div id="code39" ej-barcode e-text="SYNCFUSION" e-barcodeToTextGapHeight="50" e-symbologytype="code39"> </div>
barHeight number
Specifies the height of bars in the Barcode. By modifying the barHeight, the entire Barcode height can be customized. Please refer to xDimension for two dimensional barcode height customization.
NOTE
This property is applicable only for one dimensional barcode.
Default Value:
- 150 pixels
Example
//Add div container for Barcode rendering.
<div ng-controller="BarcodeCtrl"></div>
// Add the below code to set barHeight during initialization.
<div id="code39" ej-barcode e-text="SYNCFUSION" e-barHeight="50" e-symbologytype="code39"> </div>
darkBarColor object
Specifies the dark bar color of the Barcode. One dimensional barcode contains a series of dark and light bars which are usually colored as black and white respectively.
NOTE
- For the Barcode should be properly detected by all scanners, choose the best possible contrast color.
2. This property is applicable only for one dimensional barcode.
Default Value:
- black
Example
//Add div container for Barcode rendering.
<div ng-controller="BarcodeCtrl"></div>
// Add the below code to set darkBarColor during initialization.
<div id="code39" ej-barcode e-text="SYNCFUSION" e-darkBarColor="blue" e-symbologytype="code39"> </div>
displayText boolean
Specifies whether the text below the Barcode is visible or hidden.
NOTE
This property is applicable only for one dimensional barcode.
Default Value:
- true
Example
//Add div container for Barcode rendering.
<div ng-controller="BarcodeCtrl"></div>
// Add the below code to hide displayText during initialization.
<div id="code39" ej-barcode e-text="SYNCFUSION" e-displayText="false" e-symbologytype="code39"> </div>
enabled boolean
Specifies whether the control is enabled.
Default Value:
- true
Example
//Add div container for Barcode rendering.
<div ng-controller="BarcodeCtrl"></div>
// Add the below code to hide displayText during initialization.
<div id="code39" ej-barcode e-text="SYNCFUSION" e-enabled="false" e-symbologytype="code39"> </div>
encodeStartStopSymbol boolean
Specifies the start and stop encode symbol in the Barcode. In one dimensional barcodes, an additional character is added as start and stop delimiters. These symbols are optional and the unique of the symbol allows the reader to determine the direction of the Barcode being scanned.
NOTE
This property is applicable only for one dimensional barcode.
Default Value:
- true
Example
//Add div container for Barcode rendering.
<div ng-controller="BarcodeCtrl"></div>
// Add the below code to remove encodeStartStopSymbol during initialization.
<div id="code39" ej-barcode e-text="SYNCFUSION" e-encodeStartStopSymbol="false" e-symbologytype="code39"> </div>
lightBarColor object
Specifies the light bar color of the Barcode. One dimensional barcode contains a series of dark and light bars which are usually colored as black and white respectively.
NOTE
- For the Barcode should be properly detected by all scanners, choose the best possible contrast color.
2. This property is applicable only for one dimensional barcode.
Default Value:
- white
Example
//Add div container for Barcode rendering.
<div ng-controller="BarcodeCtrl"></div>
// Add the below code to set lightBarColor during initialization.
<div id="code39" ej-barcode e-text="SYNCFUSION" e-lightBarColor="blue" e-symbologytype="code39"> </div>
narrowBarWidth number
Specifies the width of the narrow bars in the Barcode. The dark bars in the one dimensional barcode contains random narrow and wide bars based on the provided input which can be specified during initialization.
NOTE
This property is applicable only for one dimensional barcode.
Default Value:
- 1 pixel
Example
//Add div container for Barcode rendering.
<div ng-controller="BarcodeCtrl"></div>
// Add the below code to set narrowBarWidth during initialization.
<div id="code39" ej-barcode e-text="SYNCFUSION" e-narrowBarWidth="5" e-symbologytype="code39"> </div>
quietZone object
Specifies the width of the quiet zone. In barcode, a quiet zone is the blank margin on either side of a barcode which informs the reader where a barcode’s symbology starts and stops. The purpose of a quiet zone is to prevent the reader from picking up unrelated information.
quietZone.all number
Specifies the quiet zone around the Barcode.
Default Value:
- 1 pixel
Example
//Add div container for Barcode rendering.
<div ng-controller="BarcodeCtrl"></div>
// Add the below code to set quiet zone during initialization.
<div id="code39" ej-barcode e-text="SYNCFUSION" e-quietZone-all="10" e-symbologytype="code39"> </div>
quietZone.bottom number
Specifies the bottom quiet zone of the Barcode.
Default Value:
- 1 pixel
Example
//Add div container for Barcode rendering.
<div ng-controller="BarcodeCtrl"></div>
// Add the below code to set quiet zone during initialization.
<div id="code39" ej-barcode e-text="SYNCFUSION" e-quietZone-bottom="10" e-symbologytype="code39"> </div>
quietZone.left number
Specifies the left quiet zone of the Barcode.
Default Value:
- 1 pixel
Example
//Add div container for Barcode rendering.
<div ng-controller="BarcodeCtrl"></div>
// Add the below code to set quiet zone during initialization.
<div id="code39" ej-barcode e-text="SYNCFUSION" e-quietZone-left="10" e-symbologytype="code39"> </div>
quietZone.right number
Specifies the right quiet zone of the Barcode.
Default Value:
- 1 pixel
Example
//Add div container for Barcode rendering.
<div ng-controller="BarcodeCtrl"></div>
// Add the below code to set quiet zone during initialization.
<div id="code39" ej-barcode e-text="SYNCFUSION" e-quietZone-right="10" e-symbologytype="code39"> </div>
quietZone.top number
Specifies the top quiet zone of the Barcode.
Default Value:
- 1 pixel
Example
//Add div container for barcode rendering.
<div ng-controller="BarcodeCtrl"></div>
// Add the below code to set quiet zone during initialization.
<div id="code39" ej-barcode e-text="SYNCFUSION" e-quietZone-top="10" e-symbologytype="code39"> </div>
symbologyType enum
Specifies the type of the Barcode. See SymbologyType
Name | Description |
---|---|
QRBarcode | Represents the QR code |
DataMatrix | Represents the Data Matrix barcode |
Code39 | Represents the Code 39 barcode |
Code39Extended | Represents the Code 39 Extended barcode |
Code11 | Represents the Code 11 barcode |
Codabar | Represents the Codabar barcode |
Code32 | Represents the Code 32 barcode |
Code93 | Represents the Code 93 barcode |
Code93Extended | Represents the Code 93 Extended barcode |
Code128A | Represents the Code 128 A barcode |
Code128B | Represents the Code 128 B barcode |
Code128C | Represents the Code 128 C barcode |
UPCBarcode | Represents the UPC barcode |
Default Value:
- e-symbologytype=”qrbarcode”
Example
//Add div container for Barcode rendering.
<div ng-controller="BarcodeCtrl"></div>
// Add the below code to set the SymbologyType during initialization.
<div id="qrbarcode" ej-barcode e-text="http://www.syncfusion.com" e-symbologytype="qrbarcode"> </div>
text string
Specifies the text to be encoded in the Barcode.
Default Value:
- empty
Example
//Add div container for Barcode rendering.
<div ng-controller="BarcodeCtrl"></div>
// Add the below code to set the text to be encoded while initialization.
<div id="barcode" ej-barcode e-text="http://www.syncfusion.com"> </div>
textColor object
Specifies the color of the text/data at the bottom of the Barcode.
NOTE
This property is applicable only for one dimensional barcode.
Default Value:
- black
Example
//Add div container for Barcode rendering.
<div ng-controller="BarcodeCtrl"></div>
// Add the below code to set the textColor while initialization.
<div id="code39" ej-barcode e-text="SYNCFUSION" e-textColor="blue" e-symbologytype="code39"> </div>
wideBarWidth number
Specifies the width of the wide bars in the Barcode. One dimensional barcode usually contains random narrow and wide bars based on the provided which can be customized during initialization.
NOTE
This property is applicable only for one dimensional barcode.
Default Value:
- 3 pixels
Example
//Add div container for Barcode rendering.
<div ng-controller="BarcodeCtrl"></div>
// Add the below code to set wideBarWidth during initialization.
<div id="code39" ej-barcode e-text="SYNCFUSION" e-wideBarWidth="10"" e-symbologytype="code39"> </div>
xDimension number
Specifies the width of the narrowest element(bar or space) in a Barcode. The greater the x dimension, the more easily a barcode reader will scan.
NOTE
This property is applicable only for two dimensional barcode.
Default Value:
- 4 pixels
Example
//Add div container for Barcode rendering.
<div ng-controller="BarcodeCtrl"></div>
// Add the below code to set xDimension during initialization.
<div id="barcode" ej-barcode e-text=http://www.syncfusion.com e-xDimension="20"> </div>
Methods
disable()
To disable the Barcode
Example
//Add div container for Barcode rendering.
<div ng-controller="BarcodeCtrl"></div>
// Create Barcode
<div id="code39" ej-barcode e-text="SYNCFUSION" e-textColor="blue" e-symbologytype="code39"> </div>
<script id="code39" type="text/javascript">
// disable the Barcode
$(function () {
var barcodeCtrl = $("#code39").data("ejBarcode");
barcodeCtrl.disable();
});
</script>
//Add div container for Barcode rendering.
<div ng-controller="BarcodeCtrl"></div>
// Create Barcode
<div id="code39" ej-barcode e-text="SYNCFUSION" e-textColor="blue" e-symbologytype="code39"> </div>
<script id="code39" type="text/javascript">
// disable the Barcode
$(function () {
$("#code39").ejBarcode("disable");
});
</script>
enable()
To enable the Barcode
Example
//Add div container for Barcode rendering.
<div ng-controller="BarcodeCtrl"></div>
// Create Barcode
<div id="code39" ej-barcode e-text="SYNCFUSION" e-textColor="blue" e-symbologytype="code39"> </div>
<script id="code39" type="text/javascript">
// enable the Barcode
$(function () {
var barcodeCtrl = $("#code39").data("ejBarcode");
barcodeCtrl.enable();
});
</script>
//Add div container for Barcode rendering.
<div ng-controller="BarcodeCtrl"></div>
// Create Barcode
<div id="code39" ej-barcode e-text="SYNCFUSION" e-textColor="blue" e-symbologytype="code39"> </div>
<script id="code39" type="text/javascript">
// enable the Barcode
$(function () {
$("#code39").ejBarcode("enable");
});
</script>
Events
load
Fires after Barcode control is loaded.
Name | Type | Description | |||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
Object | Event parameters from barcode
|
Example
<html ng-app="syncApp">
<head>
<title>Simple Barcode</title>
<!-- Add Scripts and CSS for rendering Essential JS components -->
<link href="css/default-theme/ej.widgets.all.min.css" rel="stylesheet" />
<script src="scripts/jquery-1.11.3.min.js"></script>
<script src="scripts/angular.min.js"></script>
<script src="scripts/ej.web.all.min.js"></script>
<script src="scripts/ej.widget.angular.min.js"></script>
</head>
<body>
<div ng-controller="BarcodeCtrl">
<div id="code39" ej-barcode e-text="SYNCFUSION" e-symbologytype="code39" e-load="load"> </div>
</div>
</body>
</html>
syncApp.controller('BarCodeController', function ($scope) {
$scope.text_39 = "SYNCFUSION";
$scope.load = function (args)
{
alert("Event loaded");
};
});