Easily Add Industry-standard Barcodes to Your ASP.NET AJAX Application with RadBarcode

Barcodes are everywhere. They are printed on retail products for easier identification. They are used for encoding numbers and keys for all kinds of tickets for concerts, shows and movies. They are even used to track your luggage with a baggage tag in the airport.

Most of these uses are out of our industry, but barcodes are getting more and more popularity on the web as well. What is more, they are easy to use, because they are scalable with smartphones.  A common scenario is when you show a barcode with some data in your site, and your clients are able to scan it with their phones directly from their monitors.

During the last year we received requests for an ASP.NET AJAX Barcode control that encodes and displays barcodes. As we constantly grow our suite, we follow your requests and decided to implement such a control.

RadBarcode control in Q2 2012

Our goal was to make a control that is easy to use, yet fully customizable, and at the same time fast and light with good performance.

We decided first to implement the linear barcodes and then to go for the more complex 2D(matrix) codes like QR code.

We support various standards that are listed in our documentation and you can also see this online demo of the RadBarcode control and play with its configurator. Here is an example of markup that you can use to declare RadBarcode in your page:

And the result will be:

Here in the blog the barcode is uploaded as PNG and I admit it is a print screen from the browser ;) The control actually outputs SVG (Scalable Vector Graphics). This markup works for the modern browsers, but not for the older versions of Internet Explorer. In case you browse the demo page linked above with IE8 for example you will see the barcode in VML (Vector Markup Language) that is supported by IE8. We do this conversion with JavaScript, if the browser does not support SVG. These scripts of the control get included in the page only when you browse it with IE. So in Firefox, Chrome or Opera, there will be absolutely no client-side scripts. And since the SVG is imported in your markup, the barcode shows during the page load without the need to make an additional connection to download the image.

Here is how the output HTML looks like:

As you see, we use relative values for the dimensions inside the <svg> element. This allows you to resize the barcode more easily by changing the height and width of its wrapper.

Furthermore if you declare the control using:

Then no inline styles will be applied, and it will render like:

In this case, you can set the dimensions for your barcode using CSS. And when the wrapper is styled, the inside SVG element will fill all the width and height and all lines inside the code will be positioned properly.

Further development

The control development is still not over and we will continue to add features to RadBarcode during the next releases. Feel free to write to us on what you’d like to see in this control in future.

More standards with the next release

Telerik’s RadBarcode control will support QR (Quick Response) codes in Q3 2012.

QR codes are being used more and more in sites across the web. Mostly (but not only) they are used for sharing URIs for some sites or resources in the web. Quickest and easier way to transfer some information from your monitor to your smartphone is just to scan the QR code with the phone and use some of the popular free programs to decode it.

Generating QR codes is not a trivial task, so we decided to make it easier for you. In Q3 2012 our RadBarcode control will supports QR codes. It really simplifies showing QR codes. In general, all you will have to do is to select Type of the RadBarcode to be QRCode and Text to be encoded.

And the result will be:

Even if it is easy to use, it will be also highly customizable. From the QRCodeSettings you will be able to specify the barcode’s error correction level, the encoding, text mode(numeric, kanji, etc. ) and dimensions.

Different type of output

We are also working on a way to render RadBarcode as an image like PNG or GIF, in order to make it possible for you to use it in mailing lists or export it in PDF. We know that this has been requested from you, so we will try to include it for our next release (expected in mid October).