Barcode HtmlHelper Overview

The Telerik UI Barcode HtmlHelper for ASP.NET MVC is a server-side wrapper for the Kendo UI Barcode widget.

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

Basic Configuration

  1. Make sure you followed all the steps from the introductory article on Telerik UI for ASP.NET MVC.
  2. Create a new action method which renders the view.

    public ActionResult Index()
    {
        return View();
    }
    
  3. Add a Barcode.

        <%: Html.Kendo().Barcode()
                .Name("barcode") // The name of the Barcode is mandatory. It specifies the "id" attribute of the widget.
                .Value("foo") // Set the value of the Barcode.
        %>
    
        @(Html.Kendo().Barcode()
                .Name("barcode") // The name of the Barcode is mandatory. It specifies the "id" attribute of the widget.
                .Value("foo") // Set the value of the Barcode.
        )
    
  4. Choose the appropriate symbology (encoding) from the available Kendo UI for jQuery API options. Specify it through the Encoding method which accepts an enum value.

        <%: Html.Kendo().Barcode()
                .Name("barcode")
                .Encoding(BarcodeSymbology.EAN13) // By default, Code39 encoding is used.
                .Value("123456789123")
        %>
    
        @(Html.Kendo().Barcode()
                .Name("barcode")
                .Encoding(BarcodeSymbology.EAN13) // By default, Code39 encoding is used.
                .Value("123456789123")
        )
    

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 MVC.
<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
Not finding the help you need? Improve this article