New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Barcode Types

12349

  • Demo Configurator
  • Barcode Type: Code11
  • Lines length:90%
    Font Size: 16px
  • Output Type: SVG_VML

RadBarcode control can be used to visualize text as Barcode using the popular Barcode standards. It is designed to be maximum light and easy to use and still to do its job. It renders Scalable Vector Graphics (SVG) directly into the HTML of your page by specifying encoding barcode standard and text to be encoded. In browsers, like IE7 and IE8, which do not support SVG, the barcode is dynamically converted to Vector Markup Language (VML) on the client.

Here are the basic properties for configuring the RadBarcode control and its appearance.

Text - Use to set the text that will be encoded and rendered as a barcode. Note: If the value in the Text property is invalid for the selected type, the Barcode will not be visible.

Type - Use to change the type (standard) of the rendered barcode. See all possible types in the documentation provided in the related resources section.

ShowText - Set to "true" or "false" to show or hide the text under the barcode.

ShowChecksum - Set to "true" or "false" to show or hide checksum at the end of the text. This will matter only if ShowText is set to "true".

RenderChecksum - Set to "false" if you don't like to include the checksum to the barcode's image. By default this property is "true", and scanning barcodes with most of the standards will be possible only when they include checksum. You could use this properly to turn off the auto calculated checksum if you already calculated it by yourself and passed to the Text property text that contains checksum.

Width and Height - Use to specify width and height of the control. By default they are set to "300px" and "150px", but you can use any Unit you like. In some scenarios you may need to avoid inline rendering of Width and Height in order to style easier with CSS. In this case use Width="" and Height="" By design setting empty string is different from Width=null, which will make the control to use its default values.

ShortLinesLengthPercentage - Specifies the ration between long and short lines in the rendered barcode and adjusts the Height and Width of the bars as percentage of the barcode's wrapper. Expects value varies from 0.00 to 100.00 (90 by default). ShortLinesLengthPercentage is designed to be used in combination with the Font-Size property when you need to make bigger text and shorter bars in order to avoid overlapping.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • scripts.js
  • styles.css
<%@ Page Language="c#" CodeFile="DefaultCS.aspx.cs" AutoEventWireup="false" Inherits="Telerik.BarcodeExamplesCS.BarcodeTypes.DefaultCS" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link type="text/css" rel="Stylesheet" href="styles.css" />
    <script type="text/javascript" src="scripts.js"></script>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <telerik:RadScriptBlock runat="server">
        <script type="text/javascript">
            Sys.Application.add_load(function () {
                demo.barcodeFirstChild = $get("<%=RadBarcode1.ClientID %>").firstChild;
                demo.textBox = $find("<%= RadTextBoxText.ClientID %>");
                demo.validateTextBox();
            });
        </script>
    </telerik:RadScriptBlock>
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="ConfigurationPanel1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadBarcode1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <div class="demo-container size-thin">
        <telerik:RadBarcode runat="server" ID="RadBarcode1" Type="Code11" Text="1234" Font-Size="16px"
            LineWidth="4">
        </telerik:RadBarcode>
    </div>
    <br class="qsf-clear-float" />
    <qsf:ConfiguratorPanel runat="server" ID="ConfigurationPanel1">
        <Views>
            <qsf:View>
                <qsf:ConfiguratorColumn runat="server" Size="Medium">
                    <ul class="fb-group">
                        <li>
                            <qsf:TextBox ID="RadTextBoxText" Size="Auto" runat="server"
                                OnTextChanged="RadTextBoxText_TextChanged" Text="1234" AutoPostBack="True" Label="Barcode Text: ">
                            </qsf:TextBox>
                        </li>
                        <li>
                            <qsf:DropDownList Size="Auto" Label="Barcode Type: " runat="server" ID="RadComboBoxType"
                                OnSelectedIndexChanged="RadComboBoxType_SelectedIndexChanged" OnLoad="RadComboBoxType_Load"
                                AutoPostBack="true">
                            </qsf:DropDownList>
                        </li>
                        <li>
                            <span class="checkbox">
                                <asp:CheckBox ID="CheckBoxShowText" Text="Show Text" AutoPostBack="true" runat="server" OnCheckedChanged="CheckBoxShowText_CheckedChanged" Checked="true" />
                            </span>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn runat="server" Size="Medium">
                    <ul class="fb-group">
                        <li>
                            <qsf:DropDownList Size="Medium" Label="Lines length:" runat="server" ID="RadComboBoxRatio"
                                OnSelectedIndexChanged="RadComboBoxRatio_SelectedIndexChanged" AutoPostBack="true">
                                <Items>
                                    <telerik:DropDownListItem Value="90" Text="90%"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Value="85" Text="85%"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Value="80" Text="80%"></telerik:DropDownListItem>
                                </Items>
                            </qsf:DropDownList>
                            <qsf:DropDownList Size="Medium" Label="Font Size: " runat="server" ID="RadComboBoxFontSize"
                                OnSelectedIndexChanged="RadComboBoxFontSize_SelectedIndexChanged" AutoPostBack="true">
                                <Items>
                                    <telerik:DropDownListItem Value="16px" Text="16px"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Value="20px" Text="20px"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Value="30px" Text="30px"></telerik:DropDownListItem>
                                </Items>
                            </qsf:DropDownList>
                        </li>
                        <li>
                            <qsf:DropDownList Size="Auto" Label="Output Type: " runat="server" ID="RadComboBoxOutputType"
                                OnSelectedIndexChanged="RadComboBoxOutputType_SelectedIndexChanged" OnLoad="RadComboBoxOutputType_Load"
                                AutoPostBack="true">
                            </qsf:DropDownList>
                        </li>
                        <li>
                            <span class="checkbox">
                                <asp:CheckBox ID="CheckBoxShowChecksum" Text="Show Checksum" AutoPostBack="true" runat="server" OnCheckedChanged="CheckBoxShowChecksum_CheckedChanged" Checked="true" />
                            </span>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance