Barcode Overview

The Barcode represents data in a machine-readable format. You can choose from several supported standards.

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

Telerik UI for Blazor Ninja image

The Barcode component is part of Telerik UI for Blazor, a professional grade UI library with 85+ native components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.

Basics

To add a Telerik Barcode to your Blazor app:

  1. Add the TelerikBarcode tag.
  2. Provide Value property
  3. Set its Height and Width
  4. Optionally, choose a Type (one of the encodings we support).
    • Its default encoding is Code39.

The following example demonstrates how to initialize the Barcode with its default configuration.

A basic configuration of the Telerik Barcode

<TelerikBarcode Width="300px"
                Height="200px"
                Value="123456789">
</TelerikBarcode>

The result from the above code snippet

For more information, refer to the article on encoding regarding the set of types supported by the Barcode.

Features

The Barcode provides the following features:

General Properties

  • RenderAs - enum - defines the preferred rendering engine - svg/canvas.

  • Checksum - bool - by setting it to true, the Barcode will display the checksum digit next to the value in the text area.

  • Type - enum - defines the symbology (encoding) the Barcode will use - (full list of supported encodings)

  • Value - string - defines the initial value of the Barcode.

  • Width - string.

  • Height - string.

  • Class - string - the CSS class that will be rendered on the main wrapping element of the Barcode component.

  • Background - string.

  • Color - string - defines the color of the bar elements.

Properties for the Barcode Text

  • BarcodeText - object.

  • BarcodeText.Color - string.

  • BarcodeText.Font - string.

  • BarcodeText.BarcodeTextMargin - object.

  • BarcodeText.BarcodeTextMargin.Bottom - double.

  • BarcodeText.BarcodeTextMargin.Left - double.

  • BarcodeText.BarcodeTextMargin.Right - double.

  • BarcodeText.BarcodeTextMargin.Top - double.

  • BarcodeText.Visible - bool - by setting it to false, the Barcode will not display the value as a text below the barcode lines.

Properties for the Barcode Border

  • BarcodeBorder - object.

  • BarcodeBorder.Color - string.

  • BarcodeBorder.DashType - enum.

  • BarcodeBorder.Width - double.

Properties for the Barcode Padding

  • BarcodePadding - object.

  • BarcodePadding.Bottom - double.

  • BarcodePadding.Left - double.

  • BarcodePadding.Right - double.

  • BarcodePadding.Top - double.

Methods

The Barcode methods are accessible through it's reference.

  • Refresh - redraws the component.

Get a reference to the Barcode and use its methods

@* This code snippet showcases an example usage of the Refresh() method. *@

<TelerikButton OnClick="@ChangeSize">Change Size!</TelerikButton>
<br />
<br />
<TelerikButton OnClick="@(() => TelerikBarcodeRef.Refresh())">Refresh component after changes!</TelerikButton>
<br />
<br />

<TelerikBarcode @ref="TelerikBarcodeRef" Width="@Width"
                Height="@Height"
                Value="123456789">
</TelerikBarcode>

@code{
    Telerik.Blazor.Components.TelerikBarcode TelerikBarcodeRef { get; set; }

    string Height { get; set; } = "200px";
    string Width { get; set; } = "300px";

    public void ChangeSize()
    {
        Height = "400px";
        Width = "500px";
    }
}

See Also

In this article
Not finding the help you need? Improve this article