ui.igQRCodeBarcode

ui.igQRCodeBarcode_image

Code Sample

 
<!DOCTYPE html>
<html>
<head>
    <title>QR - Basic Configuration</title>

    <!-- Ignite UI Required Combined CSS Files -->
    <link href="../../igniteui/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
    <link href="../../igniteui/css/structure/infragistics.css" rel="stylesheet" />

    <!-- Used to style the API Viewer and Explorer UI -->
    <link href="../../css/apiviewer.css" rel="stylesheet" type="text/css" />

    <script src="../../js/modernizr.min.js"></script>
    <script src="../../js/jquery.min.js"></script>
    <script src="../../js/jquery-ui.min.js"></script>

    <!-- Ignite UI Required Combined JavaScript Files -->
    <script src="../../igniteui/js/infragistics.core.js"></script>
    <script src="../../igniteui/js/infragistics.dv.js"></script>

</head>
<body> 
    <div id="barcode"></div>

    <script type="text/javascript">
        $(function () {
            $("#barcode").igQRCodeBarcode({
                height: "300px",
                width: "100%", 
                data: "http://www.infragistics.com/products/jquery/samples"
            });
        });
    </script>
</body>
</html>

Related Samples

Related Topics

Dependencies

jquery-1.8.3.js
jquery.ui.core.js
jquery.ui.widget.js
infragistics.util.js
infragistics.dv.simple.core.js
infragistics.barcode_qrcodebarcode.js

Inherits

  • applicationIndicator

    Type:
    string
    Default:
    ""

    Gets or sets the Application Indicator assigned to identify the specification concerned by AIM International.
    The value is respected only when the Fnc1Mode is set to Industry. Its value may take the form of any single Latin alphabetic character from the set {a - z, A - Z} or a two-digit number.

    Code Sample

     
// Initialize
$(".selector").igQRCodeBarcode({
    fnc1Mode: "industry",
    data: "(30)000 258 2365 569",
    applicationIndicator: "25"
});

// Get
var applicationIndicator = $(".selector").igQRCodeBarcode("option", "applicationIndicator");

// Set
$(".selector").igQRCodeBarcode("option", "applicationIndicator", "25");

  • backingBrush

    Type:
    string
    Default:
    "white"

    Gets or sets the brush to use to fill the backing of the barcode.

    Code Sample

     
// Initialize
$(".selector").igQRCodeBarcode({
    backingBrush: "#164F6D"
});

// Get
var backingBrush = $(".selector").igQRCodeBarcode("option", "backingBrush");

// Set
$(".selector").igQRCodeBarcode("option", "backingBrush", "#164F6D");

  • backingOutline

    Type:
    string
    Default:
    "transparent"

    Gets or sets the brush to use for the outline of the backing.

    Code Sample

     
// Initialize
$(".selector").igQRCodeBarcode({
    backingOutline: "#164F6D"
});

// Get
var backingOutline = $(".selector").igQRCodeBarcode("option", "backingOutline");

// Set
$(".selector").igQRCodeBarcode("option", "backingOutline", "#164F6D");

  • backingStrokeThickness

    Type:
    number
    Default:
    0

    Gets or sets the stroke thickness of the backing outline.

    Code Sample

     
// Initialize
$(".selector").igQRCodeBarcode({
    backingStrokeThickness: 3
});

// Get
var backingStrokeThickness = $(".selector").igQRCodeBarcode("option", "backingStrokeThickness");

// Set
$(".selector").igQRCodeBarcode("option", "backingStrokeThickness", 3);

  • barBrush

    Type:
    string
    Default:
    "black"

    Gets or sets the brush to use to fill the background of the bars.

    Code Sample

     
// Initialize
$(".selector").igQRCodeBarcode({
    barBrush: "#164F6D"
});

// Get
var barBrush = $(".selector").igQRCodeBarcode("option", "barBrush");

// Set
$(".selector").igQRCodeBarcode("option", "barBrush", "#164F6D");

  • barsFillMode

    Type:
    enumeration
    Default:
    fillSpace

    Gets or sets a value which specifies how the grid fills within the barcode control dimensions.

    Members

    • fillSpace
    • Type:string
    • FillSpace mode ensures that the barcode grid fills the control dimensions.
    • ensureEqualSize
    • Type:string
    • EnsureEqualSize mode ensures that every grid column/row has the same pixels number width/height. The sum of all columns/rows pixels may be less than the width/height of the control.

    Code Sample

     
// Initialize
$(".selector").igQRCodeBarcode({
    barsFillMode: "ensureEqualSize"
});

// Get
var barsFillMode = $(".selector").igQRCodeBarcode("option", "barsFillMode");

// Set
$(".selector").igQRCodeBarcode("option", "barsFillMode", "ensureEqualSize");

  • data

    Type:
    string
    Default:
    ""

    Gets or sets the data value.

    Code Sample

     
// Initialize
$(".selector").igQRCodeBarcode({
    data: "http://www.infragistics.com/products/jquery/help"
});

// Get
var data = $(".selector").igQRCodeBarcode("option", "data");

// Set
$(".selector").igQRCodeBarcode("option", "data", "http://www.infragistics.com/products/jquery/help");

  • eciHeaderDisplayMode

    Type:
    enumeration
    Default:
    hide

    Gets or sets a value indicating whether to show the ECI header.

    Members

    • hide
    • Type:string
    • Hide the header.
    • show
    • Type:string
    • Show the header.

    Code Sample

     
// Initialize
$(".selector").igQRCodeBarcode({
    eciHeaderDisplayMode: "show"
});

// Get
var eciHeaderDisplayMode = $(".selector").igQRCodeBarcode("option", "eciHeaderDisplayMode");

// Set
$(".selector").igQRCodeBarcode("option", "eciHeaderDisplayMode", "show");

  • eciNumber

    Type:
    number
    Default:
    3

    Each Extended Channel Interpretation (ECI) is designated by a six-digit assignment number: 000000 - 999999.
    The default value depends on the loaded encodings. The default is ECI 000003 (representing ISO/IEC 8859-1) if the ISO/IEC 8859-1 character set is loaded. Otherwise the default value is 000026 (representing UTF-8).

    Code Sample

     
// Initialize
$(".selector").igQRCodeBarcode({
    eciNumber: 10
});

// Get
var eciNumber = $(".selector").igQRCodeBarcode("option", "eciNumber");

// Set
$(".selector").igQRCodeBarcode("option", "eciNumber", 10);

  • encodingMode

    Type:
    enumeration
    Default:
    undefined

    Gets or sets the encoding mode for compaction of the QR Code symbol data. The default value is undefined if the Shift_JIS encoding is loaded. Otherwise the default value is byte.

    Members

    • undefined
    • Type:string
    • When Undefined encoding mode is set, the QR code barcode internally switches between modes as necessary in order to achieve the most efficient conversion of data into a binary string.
    • numeric
    • Type:string
    • Numeric mode encodes data from decimal digit set (0-9). Normally 3 data characters are represented by 10 bits.
    • alphanumeric
    • Type:string
    • Alphanumerc mode encodes data from a set of 45 characters (digits 0-9, upper case letters A-Z, nine other characters: space, $ % * + _ . / : ). Normally two input characters are represented by 11 bits.
    • byte
    • Type:string
    • In Byte mode the data is encoded at 8 bits per character. The character set of the Byte encoding mode is byte data (by default it is ISO/IEC 8859-1 character set).
    • kanji
    • Type:string
    • The Kanji mode efficiently encodes Kanji characters in accordance with the Shift JIS system based on JIS X 0208. Each two-byte character value is compactedd to a 13-bit binary codeword.

    Code Sample

     
// Initialize
$(".selector").igQRCodeBarcode({
    data: "花",
    encodingMode: "kanji"
});

// Get
var applicationIndicator = $(".selector").igQRCodeBarcode("option", "applicationIndicator");

// Set
$(".selector").igQRCodeBarcode("option", "applicationIndicator", "kanji");

  • errorCorrectionLevel

    Type:
    enumeration
    Default:
    medium

    Gets or sets the error correction level of the QR Code symbol.

    Members

    • low
    • Type:string
    • Low error correction level allows recovery of 7% of the symbol codewords.
    • medium
    • Type:string
    • Medium error correction level allows recovery of 15% of the symbol codewords.
    • quartil
    • Type:string
    • Quartil error correction level allows recovery of 25% of the symbol codewords.
    • high
    • Type:string
    • High error correction level allows recovery of 30% of the symbol codewords.

    Code Sample

     
// Initialize
$(".selector").igQRCodeBarcode({
    errorCorrectionLevel: "medium"
});

// Get
var errorCorrectionLevel = $(".selector").igQRCodeBarcode("option", "errorCorrectionLevel");

// Set
$(".selector").igQRCodeBarcode("option", "errorCorrectionLevel", "medium");

  • errorMessageText

    Type:
    string
    Default:
    ""

    Gets or sets the message text displayed when some error occurs.

    Code Sample

     
// Initialize
$(".selector").igQRCodeBarcode({
    errorMessageText: "A custom error message!"
});

// Get
var errorMessageText = $(".selector").igQRCodeBarcode("option", "errorMessageText");

// Set
$(".selector").igQRCodeBarcode("option", "errorMessageText", "A custom error message!");

  • fnc1Mode

    Type:
    enumeration
    Default:
    none

    Gets or sets the FNC1 mode indicator which identifies symbols encoding messages formatted according to specific predefined industry or application specificatoins.

    Members

    • none
    • Type:string
    • Do not use any Fnc1 symbols, i.e. the data is not identified according to specific predefined industry or application specifications.
    • gs1
    • Type:string
    • Uses Fnc1 symbol in the first position of the character in Code 128 symbols and designates data formatted in accordance with the GS1 General Specification.
    • industry
    • Type:string
    • Uses Fnc1 symbol in the second position of the character in Code 128 symbols and designates data formatted in accordance with a specific indystry application previously agreed with AIM Inc.

    Code Sample

     
// Initialize
$(".selector").igQRCodeBarcode({
    data: "(10)07294760157667492700",
    fnc1Mode: "gs1"
});

// Get
var fnc1Mode = $(".selector").igQRCodeBarcode("option", "fnc1Mode");

// Set
$(".selector").igQRCodeBarcode("option", "fnc1Mode", "gs1");

  • font

    Type:
    string
    Default:
    null

    Gets or sets the font of the text displayed by the control.

    Code Sample

     
// Initialize
$(".selector").igQRCodeBarcode({
    font: "20px Georgia"
});

// Get
var font = $(".selector").igQRCodeBarcode("option", "font");

// Set
$(".selector").igQRCodeBarcode("option", "font", "20px Georgia");

  • fontBrush

    Type:
    string
    Default:
    null

    Gets or sets the brush to use for the label font.

    Code Sample

     
// Initialize
$(".selector").igQRCodeBarcode({
    fontBrush: "blue"
});

// Get
var fontBrush = $(".selector").igQRCodeBarcode("option", "fontBrush");

// Set
$(".selector").igQRCodeBarcode("option", "fontBrush", "blue");

  • height

    Type:
    enumeration
    Default:
    null

    The height of the barcode. It can be set as a number in pixels, string (px) or percentage (%).

    Members

      • string
      • The widget height can be set in pixels (px) and percentage (%).
      • number
      • The widget height can be set as a number.

    Code Sample

     
// Initialize
$(".selector").igQRCodeBarcode({
    height: "400px"
});

// Get
var height = $(".selector").igQRCodeBarcode("option", "height");

// Set
$(".selector").igQRCodeBarcode("option", "height", "400px");

  • sizeVersion

    Type:
    enumeration
    Default:
    undefined

    Gets or sets the size version of the QR Code symbol.

    Members

    • undefined
    • Type:string
    • If set, the QR code barcode sets internally the smallest version that will accommodate the data.
    • version1
    • Type:string
    • Version1 defines size of 21x21 modules for the symbol.
    • version2
    • Type:string
    • Version2 defines size of 25x25 modules for the symbol.
    • version3
    • Type:string
    • Version3 defines size of 29x29 modules for the symbol.
    • version4
    • Type:string
    • Version4 defines size of 33x33 modules for the symbol.
    • version5
    • Type:string
    • Version5 defines size of 37x37 modules for the symbol.
    • version6
    • Type:string
    • Version6 defines size of 41x41 modules for the symbol.
    • version7
    • Type:string
    • Version7 defines size of 45x45 modules for the symbol.
    • version8
    • Type:string
    • Version8 defines size of 49x49 modules for the symbol.
    • version9
    • Type:string
    • Version9 defines size of 53x53 modules for the symbol.
    • version10
    • Type:string
    • Version10 defines size of 57x57 modules for the symbol.
    • version11
    • Type:string
    • Version11 defines size of 61x61 modules for the symbol.
    • version12
    • Type:string
    • Version12 defines size of 65x65 modules for the symbol.
    • version13
    • Type:string
    • Version13 defines size of 69x69 modules for the symbol.
    • version14
    • Type:string
    • Version14 defines size of 73x73 modules for the symbol.
    • version15
    • Type:string
    • Version15 defines size of 77x77 modules for the symbol.
    • version16
    • Type:string
    • Version16 defines size of 81x81 modules for the symbol.
    • version17
    • Type:string
    • Version17 defines size of 85x85 modules for the symbol.
    • version18
    • Type:string
    • Version18 defines size of 89x89 modules for the symbol.
    • version19
    • Type:string
    • Version19 defines size of 93x93 modules for the symbol.
    • version20
    • Type:string
    • Version20 defines size of 97x97 modules for the symbol.
    • version21
    • Type:string
    • Version21 defines size of 101x101 modules for the symbol.
    • version22
    • Type:string
    • Version22 defines size of 105x105 modules for the symbol.
    • version23
    • Type:string
    • Version23 defines size of 109x109 modules for the symbol.
    • version24
    • Type:string
    • Version24 defines size of 113x113 modules for the symbol.
    • version25
    • Type:string
    • Version25 defines size of 117x117 modules for the symbol.
    • version26
    • Type:string
    • Version26 defines size of 121x121 modules for the symbol.
    • version27
    • Type:string
    • Version27 defines size of 125x125 modules for the symbol.
    • version28
    • Type:string
    • Version28 defines size of 129x129 modules for the symbol.
    • version29
    • Type:string
    • Version29 defines size of 133x133 modules for the symbol.
    • version30
    • Type:string
    • Version30 defines size of 137x137 modules for the symbol.
    • version31
    • Type:string
    • Version31 defines size of 141x141 modules for the symbol.
    • version32
    • Type:string
    • Version32 defines size of 145x145 modules for the symbol.
    • version33
    • Type:string
    • Version33 defines size of 149x149 modules for the symbol.
    • version34
    • Type:string
    • Version34 defines size of 153x153 modules for the symbol.
    • version35
    • Type:string
    • Version35 defines size of 157x157 modules for the symbol.
    • version36
    • Type:string
    • Version36 defines size of 161x161 modules for the symbol.
    • version37
    • Type:string
    • Version37 defines size of 165x165 modules for the symbol.
    • version38
    • Type:string
    • Version38 defines size of 169x169 modules for the symbol.
    • version39
    • Type:string
    • Version39 defines size of 173x173 modules for the symbol.
    • version40
    • Type:string
    • Version40 defines size of 177x177 modules for the symbol.

    Code Sample

     
// Initialize
$(".selector").igQRCodeBarcode({
    sizeVersion: "version12"
});

// Get
var sizeVersion = $(".selector").igQRCodeBarcode("option", "sizeVersion");

// Set
$(".selector").igQRCodeBarcode("option", "sizeVersion", "version12");

  • stretch

    Type:
    enumeration
    Default:
    uniform

    Gets or sets the stretch.

    Members

    • none
    • Type:string
    • .
    • fill
    • Type:string
    • .
    • uniform
    • Type:string
    • .
    • uniformToFill
    • Type:string

    Code Sample

     
// Initialize
$(".selector").igQRCodeBarcode({
    stretch: "uniformToFill"
});

// Get
var stretch = $(".selector").igQRCodeBarcode("option", "stretch");

// Set
$(".selector").igQRCodeBarcode("option", "stretch", "uniformToFill");

  • width

    Type:
    enumeration
    Default:
    null

    The width of the barcode. It can be set as a number in pixels, string (px) or percentage (%).

    Members

      • string
      • The widget width can be set in pixels (px) and percentage (%).
      • number
      • The widget width can be set as a number.

    Code Sample

     
// Initialize
$(".selector").igQRCodeBarcode({
    width: "400px"
});

// Get
var width = $(".selector").igQRCodeBarcode("option", "width");

// Set
$(".selector").igQRCodeBarcode("option", "width", "400px");

  • widthToHeightRatio

    Type:
    number
    Default:
    3

    Gets or sets the width (XDimension) to height (YDimension) ratio. It accepts only positive values. This property does not apply for the QR barcode.

    Code Sample

     
// Initialize
$(".selector").igQRCodeBarcode({
    widthToHeightRatio: 2
});

// Get
var widthToHeightRatio = $(".selector").igQRCodeBarcode("option", "widthToHeightRatio");

// Set
$(".selector").igQRCodeBarcode("option", "widthToHeightRatio", 2);

  • xDimension

    Type:
    number
    Default:
    0.25

    Gets or sets the X-dimension (narrow element width) for a symbol in mm. It accepts values from 0.01 to 100.

    Code Sample

     
// Initialize
$(".selector").igQRCodeBarcode({
    xDimension: 2
});

// Get
var xDimension = $(".selector").igQRCodeBarcode("option", "xDimension");

// Set
$(".selector").igQRCodeBarcode("option", "xDimension", 2);

For more information on how to interact with the Ignite UI controls' events, refer to
Using Events in Ignite UI.

Note: Calling API methods programmatically does not raise events related to their operation unless specifically stated otherwise by the corresponding API documentation; those events are only raised by their respective user interaction.

Show Details

  • dataChanged

    Cancellable:
    false

    Occurs when the data has changed.
    Function takes first argument evt and second argument ui.
    Use ui.owner to obtain reference to the barcode widget.
    Use ui.newData to obtain the new data.

    Code Sample

     
//Bind
$(document).delegate(".selector", "igqrbarcodedatachanged", function (evt, ui) {
    // Get reference to the the barcode widget.
    ui.owner;
   
    // Get the new data value
    ui.newData; 
});
  
// Initialize
$(".selector").igQRCodeBarcode({
    dataChanged: function(evt, ui) {...}
});

  • errorMessageDisplaying

    Cancellable:
    false

    Occurs when an error has happened.
    Function takes first argument evt and second argument ui.
    Use ui.owner to obtain reference to the barcode widget.
    Use ui.errorMessage to get or set the error message that is to be shown.

    Code Sample

     
//Bind
$(document).delegate(".selector", "igqrbarcodeerrormessagedisplaying", function (evt, ui) {
    // Get reference to the barcode widget.
    ui.owner;
   
    // Get or set the error message that is to be shown
    ui.errorMessage; 
});
  
// Initialize
$(".selector").igQRCodeBarcode({
    errorMessageDisplaying: function(evt, ui) {...}
});

  • destroy

    .igQRCodeBarcode( "destroy" );

    Destroys widget.

    Code Sample

     $(".selector").igQRCodeBarcode("destroy");

  • exportVisualData

    .igQRCodeBarcode( "exportVisualData" );
    Return Type:
    object
    Return Type Description:
    a JavaScript object containing the visual data.

    Returns information about how the barcode is rendered.

    Code Sample

     $(".selector").igQRCodeBarcode("exportVisualData");

  • flush

    .igQRCodeBarcode( "flush" );

    Causes all pending changes of the barcode e.g. by changed property values to be rendered immediately.

    Code Sample

     $(".selector").igQRCodeBarcode("flush");

  • styleUpdated

    .igQRCodeBarcode( "styleUpdated" );

    Re-polls the css styles for the widget. Use this method when the css styles have been modified.

    Code Sample

     $(".selector").igQRCodeBarcode("styleUpdated");

  • ui-barcode

    Class applied to main element: ui-barcode ui-corner-all ui-widget-content.

  • ui-barcode-backing

    Class applying background-color and border-color to the backing element.

  • ui-barcode-bar

    Class applying background-color to the bar elements.

  • ui-barcode-label

    Class applying background-color to the text elements.

  • ui-html5-non-html5-supported-message ui-helper-clearfix ui-html5-non-html5

    Class applied to main element, shown when the QRCodeBarcode is opened in a non HTML5 compatible browser.

Copyright © 1996 - 2024 Infragistics, Inc. All rights reserved.