Barcode Overview

The Barcode TagHelper and HtmlHelper for ASP.NET Core are server-side wrappers for the Kendo UI Barcode widget. To add the component to your ASP.NET Core app, you can use either.

The Barcode represents data in a machine-readable format.

Telerik UI for ASP.NET Core Ninja image
New to Telerik UI for ASP.NET Core?

Telerik UI for ASP.NET Core is a professional grade UI library with 110+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.

To see the component in action, check the examples:

Initializing the Barcode

The following example demonstrates how to define the Barcode.

    @(Html.Kendo().Barcode()
      .Name("barcode")
    <kendo-barcode name="barcode"></kendo-barcode>

Basic Configuration

To configure the Barcode, pass the configuration options as attributes:

  • The name of the Barcode is mandatory. It specifies the "id" attribute of the widget.

  • You can select the appropriate encoding (symbology) from the available options. Specify it by passing an enum value to the encoding method.

    @(Html.Kendo().Barcode()
    .Name("barcode")
    .Value("10110110")
    .Encoding(BarcodeSymbology.Code128)
    .Width(200)
    .Height(100)
    .Border(border => border.Color("red").Width(2)))
)
    <kendo-barcode name="barcode" value="10110110" type="BarcodeSymbology.Code128" width="200" height="100">
        <border color="red" width="2"/>
    </kendo-barcode>

Functionality and Features

The Barcode supports a set of encoding types.

Referencing Existing Instances

To reference an existing Barcode instance, use the jQuery.data() configuration option. Once a reference is established, use the Barcode client-side API to control its behavior.

  // Place the following after the declaration of the Barcode for ASP.NET Core.
  <script>
  $(function() {
      // The Name() of the Barcode is used to get its client-side instance.
      var barcode = $("#barcode").data("kendoBarcode");
      barcode.value("foo") // Supply a valid value for that encoding. Then, the Barcode will redraw automatically.
  });
  </script>

See Also

In this article