Available in the Full Version

Barcode - QR Settings

This sample demonstrates configuring the QR-code-specific settings.
Options
Eci Number ECC Level
Size Version Encoding Mode
Eci Header Display Mode

This sample is designed for a larger screen size.

On mobile, try rotating your screen, view full size, or email to another device.

This sample demonstrates configuring the QR-code-specific settings.

Code View

Copy to Clipboard 
<!DOCTYPE html>
<html>
<head>
    <!-- Ignite UI for jQuery Required Combined CSS Files -->
    <link href="http://cdn-na.infragistics.com/igniteui/2024.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
    <link href="http://cdn-na.infragistics.com/igniteui/2024.2/latest/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="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>

    <!-- Ignite UI for jQuery Required Combined JavaScript Files -->
    <script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/infragistics.core.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/modules/encoding/infragistics.encoding.core.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/modules/encoding/infragistics.encoding_big5.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/modules/encoding/infragistics.encoding_cp437.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/modules/encoding/infragistics.encoding_gb2312.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/modules/encoding/infragistics.encoding_iso646-us.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/modules/encoding/infragistics.encoding_iso-8859-1.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/modules/encoding/infragistics.encoding_iso-8859-2.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/modules/encoding/infragistics.encoding_iso-8859-3.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/modules/encoding/infragistics.encoding_iso-8859-4.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/modules/encoding/infragistics.encoding_iso-8859-5.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/modules/encoding/infragistics.encoding_iso-8859-6.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/modules/encoding/infragistics.encoding_iso-8859-7.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/modules/encoding/infragistics.encoding_iso-8859-8.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/modules/encoding/infragistics.encoding_iso-8859-9.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/modules/encoding/infragistics.encoding_iso-8859-11.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/modules/encoding/infragistics.encoding_iso-8859-13.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/modules/encoding/infragistics.encoding_iso-8859-15.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/modules/encoding/infragistics.encoding_ksc5601.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/modules/encoding/infragistics.encoding_shift_jis.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/modules/encoding/infragistics.encoding_windows-1250.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/modules/encoding/infragistics.encoding_windows-1251.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/modules/encoding/infragistics.encoding_windows-1252.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/modules/encoding/infragistics.encoding_windows-1256.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/infragistics.dv.js"></script>
</head>
<body>
    <div id="barcode"></div>

    <fieldset id="barcodeOptions" style="margin-top: 30px">
        <legend>Options</legend>
        <table>
            <tr>
                <td colspan="4">
                    <label style="width:16%; display:inline-block" for="dataInput">Data</label>
                    <input id="dataInput" style="width:70%" value="http://www.infragistics.com/products/jquery/help"/>
                    <input  id="setButton" type="button" value="Set" style="width:10%"/>
                </td>
            </tr>
            <tr>
                <td>Eci Number</td>
                <td>
                    <select id="eciNumber" style="width: 100px; margin: 12px">
                        <option value="0">0 - CP 437</option>
                        <option value="1">1 - ISO-8859-1</option>
                        <option value="2">2 - CP 437</option>
                        <option value="3" selected>3 - ISO-8859-1</option>
                        <option value="4">4 - ISO-8859-2</option>
                        <option value="5">5 - ISO-8859-3</option>
                        <option value="6">6 - ISO-8859-4</option>
                        <option value="7">7 - ISO-8859-5</option>
                        <option value="8">8- ISO-8859-6</option>
                        <option value="9">9 - ISO-8859-7</option>
                        <option value="10">10 - ISO-8859-8</option>
                        <option value="11">11 - ISO-8859-9</option>
                        <option value="13">13 - ISO-8859-11</option>
                        <option value="15">15 - ISO-8859-13</option>
                        <option value="17">17 - ISO-8859-15</option>
                        <option value="20">20 - Shift JIS</option>
                        <option value="21">21 - Windows-1250</option>
                        <option value="22">22 - Windows-1251</option>
                        <option value="23">23 - Windows-1252</option>
                        <option value="24">24 - Windows-1256</option>
                        <option value="25">25 - UTF-16</option>
                        <option value="26">26 - UTF-8</option>
                        <option value="27">27 - ISO-646-US</option>
                        <option value="28">28 - Big5</option>
                        <option value="29">29 - GB 2312</option>
                        <option value="30">30 - KSC-5601</option>
                    </select>
                </td>
                <td>ECC Level</td>
                <td>
                    <select id="eccLevel" style="width: 100px; margin: 12px">
                        <option>Low</option>
                        <option selected>Medium</option>
                        <option>Quartil</option>
                        <option>High</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>Size Version</td>
                <td>
                    <select id="sizeVersion" style="width: 100px; margin: 12px" ></select>
                </td>
                <td>Encoding Mode</td>
                <td>
                    <select id="encodingMode" style="width: 100px; margin: 12px">
                        <option>Undefined</option>
                        <option>Numeric</option>
                        <option>Alphanumeric</option>
                        <option>Byte</option>
                        <option>Kanji</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>Eci Header Display Mode</td>
                <td>
                    <select id="eciHeaderDisplayMode" style="width: 100px; margin: 12px">
                        <option>Hide</option>
                        <option>Show</option>
                    </select>
                </td>
            </tr>
        </table>
    </fieldset>

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

            $("#setButton").click(function () {
                $("#barcode").igQRCodeBarcode("option", "data", $("#dataInput").val());
            });

            $("#eciNumber").change(function () {
                var val = $("#eciNumber").val().toLowerCase();
                $("#barcode").igQRCodeBarcode("option", "eciNumber", parseInt(val));
            });

            $("#eccLevel").change(function () {
                var val = $("#eccLevel").val().toLowerCase();
                $("#barcode").igQRCodeBarcode("option", "errorCorrectionLevel", val);
            });

            $("#sizeVersion").append("<option>Undefined</option>");
            for (var i = 1; i < 41; i++) {
                $("#sizeVersion").append("<option>Version" + i + "</option>");
            }

            $("#sizeVersion").change(function () {
                var val = $("#sizeVersion").val().toLowerCase();
                $("#barcode").igQRCodeBarcode("option", "sizeVersion", val);
            });

            $("#encodingMode").change(function () {
                var val = $("#encodingMode").val().toLowerCase();
                $("#barcode").igQRCodeBarcode("option", "encodingMode", val);
            });

            $("#eciHeaderDisplayMode").change(function () {
                var val = $("#eciHeaderDisplayMode").val().toLowerCase();
                $("#barcode").igQRCodeBarcode("option", "eciHeaderDisplayMode", val);
            });

            $("#dataInput").keydown(function ( event ) {
                //check for Enter key
                if (event.which == 13) {
                    $("#barcode").igQRCodeBarcode("option", "data", $("#dataInput").val());
                }
            });
        });
    </script>
</body>
</html>