Edit this page

Barcode HtmlHelper Overview

The Barcode HtmlHelper extension is a server-side wrapper for the Kendo UI Barcode widget.

Configuration

Below are listed the steps for you to follow when configuring the Kendo UI Barcode.

  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.

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

    Example
    
            <%: 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 options listed here. Specify it through the Encoding method which accepts an enum value.

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

Reference

Existing Instances

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

Example
  //Put this after your Kendo UI Barcode for ASP.NET MVC declaration.
  <script>
  $(function() {
      //Notice that the Name() of the Barcode is used to get its client-side instance.
      var barcode = $("#barcode").data("kendoBarcode");
      barcode.value("foo") //make sure you supply valid value for that encoding then the barcode will redraw automatically
  });
  </script>

See Also

Other articles on Telerik UI for ASP.NET MVC and on the Barcode: