Edit this page

Barcode Overview

The Kendo UI Barcode widget is used to represent data in a machine-readable format.

All graphics are rendered on the client by using Scalable Vector Graphics (SVG).

Getting Started

Create the Barcode

To create the Barcode, use an HTML div element and, optionally, set a height and width via CSS.

Example
<div id="barcode"></div>

Initialize the Barcode

To initialize the Barcode with its default configuration, use the following example. The default encoding is code39.

Example
$(document).ready(function() {
    $("#barcode").kendoBarcode({
        value:"FOO"
    });
});

Configuration

Specifying the Type

After you provide the Barcode value, select the encoding type (symbology) as demonstrated in the following example. For more information on what type of encoding to select, refer to the article about encoding.

Example
$(document).ready(function() {
    $("#barcode").kendoBarcode({
        value:"1234567",
        type:"ean8"
    });
});

Styling the Appearance

To fine-tune the color, background, and padding margin of the text, refer to the Barcode API.

See Also

Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy