We're sorry but this site requires JavaScript.

Version

Is this content useful?

Thank you for your feedback!

Thank you for your feedback! You have rated this topic in the last 30 days.

Configuring the Character Encoding (igQRCodeBarcode)

Topic Overview

Purpose

This topic explains how to configure the desired character encoding in the igQRCodeBarcode™ control.

Required background

The following topics are prerequisites to understanding this topic:

igQRCodeBarcode Overview: This topic provides conceptual information about the igQRCodeBarcode control including its main features and minimum requirements.
Adding igQRCodeBarcode: This is a group of topics demonstrating how to add the igQRCodeBarcode control to an HTML page and to an ASP.NET MVC application.

In this topic

This topic contains the following sections:

Introduction

Character encoding configuration summary

The configuration of the encoding for igQRCodeBarcode is related to the ability of the control to encode the characters fed to its data property.

By default, if the Shift_JIS encoding has been loaded, the igQRCodeBarcode control uses the most efficient conversion of the respective data into a binary string and, in the contrary case, the data is encoded at 8 bits per character.

The default character set the igQRCodeBarcode control is preconfigured to UTF-8. If, however, ISO 8859-1 character set has been loaded instead, it will be used as the default one.

Character encoding configuration summary chart

The following table explains briefly the configurable aspects of igQRCodeBarcode control’s character encoding and maps them to properties that configure them.

Configurable aspect	Details	Properties
The character encoding mode	You can specify what encoding mode to use depending on the type data that needs to be encoded.	encodingMode
The character set	The `igQRCodeBarcode` control allows for encoding data from different character sets.	eciNumber

Configuring the Character Encoding

Overview

The igQRCodeBarcode is capable of encoding large numbers of characters, using compaction, depending on the types of the data characters. It can also encode JIS Kanji characters by setting encodingMode to Kanji (only Kanji characters are encoded).

In order to ensure minimum size of the files carrying the encodings logic, the default value of the encodingMode resolves to undefined if the Shift_JIS encoding has been loaded, and to byte otherwise.

Requirements

For the igQRCodeBarcode control to operate properly, the respective character encoding file(s) for the character sets in use are required and must be loaded to the application. This means loading the files for the individual encodings to be used. These files would be infragistics.encoding.core.js and infragistics.encoding_<encoding-name>.js file. In the latter file, <encoding-name> refers to the name of the encoding type such as ISO-8859. Several infragistics.encoding_<encoding-name>.js files can be included to support multiple languages.

The desired encoding files can be found at the following location under the Ignite UI for jQuery™ package folder structure:

/modules/encoding

Property settings

The following table explains how to set the character encoding mode for the input data depending on the data type.

In order to configure:	Use this property:	And set it to:
Automatic recognition of the optimal encoding mode for the different sequences of data (if there are such)	encodingMode	undefined
Encoding of data from decimal digit set (0-9)	encodingMode	numeric
Encoding of data from a set of 45 characters – digits (0-9), upper case letters (A-Z), and nine other characters (space $ % * + _ . / : ).	encodingMode	alphanumeric
Encoding of 8-bits data (8 bits per character) encodingMode byte. Encoding of Kanji characters in accordance with the Shift JIS system	encodingMode	kanji

For details on the different encoding modes, refer to the jQuery and MVC API Links (igQRCodeBarcode) topic.

Example

In order to use the Kanji mode, the Shift_JIS encoding should be loaded.

The screenshot below demonstrates how the igQRCodeBarcode control looks as a result of the following settings:

Property	Value
width	“200px”
height	“200px”
data	“花"
encodingMode	“kanji”

Following is the code that implements this example.

In HTML:

<html>
<head>
      <link rel="stylesheet" href="../../themes/smoothness/jquery-ui.css"/>      
      <script type="text/javascript" src="../../js/jquery.min.js"></script>
      <script type="text/javascript" src="../../js/jquery-ui.js"></script>

      <!-- Ignite UI for jQuery Required Common JavaScript Files -->
      <script src="../../igniteui/js/modules/infragistics.util.js"></script>
      <script src="../../igniteui/js/modules/infragistics.util.jquery.js"></script>
      <script src="../../igniteui/js/modules/infragistics.dv_core.js"></script>
      <script src="../../igniteui/js/modules/infragistics.dv_jquerydom.js"></script>
      <script src="../../igniteui/js/modules/infragistics.ext_core.js"></script>
      <script src="../../igniteui/js/modules/infragistics.ext_collection.js"></script>
      <script src="../../igniteui/js/modules/infragistics.ext_collectionsextended.js"></script>
      <script src="../../igniteui/js/modules/infragistics.ext_text.js"></script>
      <script src="../../igniteui/js/modules/infragistics.ext_ui.js"></script>

      <!-- QR Code Barcode Specific JavaScript Files -->
      <script src="../../igniteui/js/modules/encoding/infragistics.encoding.core.js"></script>
      <script src="../../igniteui/js/modules/encoding/infragistics.encoding_shift_jis.js"></script>
      <script src="../../igniteui/js/modules/infragistics.barcode_qrcodebarcode.js"></script>
      <script src="../../igniteui/js/modules/infragistics.ui.widget.js"></script>
      <script src="../../igniteui/js/modules/infragistics.ui.barcode.js"></script>

      <script type="text/jscript">
        $(function () {                        
                  $("#barcode").igQRCodeBarcode({
                        width: "200px",
                        height: "200px",
                        data: "花",
                        encodingMode:"kanji"
                   }); 
            });
    </script>
</head>
<body>
      <div id="barcode"></div>
</body>
</html>

Configuring the Character Set

Overview

The igQRCodeBarcode control has a built-in support for encoding data from character sets other than the default one. This support is managed by setting the Extended Channel Interpretation (ECI) number represented by the eciNumber property.

In order to ensure minimum size of the files carrying the encodings logic, the default value of eciNumber resolves to 3 which represents the ISO-8859-1 character set (if this set has been loaded) and to 26 which represents the UTF-8 character set (if the ISO-8859-1 character set hasn’t been loaded).

ECI numbers reference chart

The ECI numbers supported by the igQRCodeBarcode control and the ISO character sets they correspond to are listed in the table below:

ECI Number	ISO Character Set
0	CP 437
1	ISO-8859-1
2	CP 437
3	ISO-8859-1
4	ISO-8859-2
5	ISO-8859-3
6	ISO-8859-4
7	ISO-8859-5
8	ISO-8859-6
9	ISO-8859-7
10	ISO-8859-8
11	ISO-8859-9
13	ISO-8859-11
15	ISO-8859-13
17	ISO-8859-15
20	Shift JIS
21	Windows-1250
22	Windows-1251
23	Windows-1252
24	Windows-1256
25	UTF-16
26	UTF-8
27	ISO-646-US
28	Big5
29	GB 2312
30	KSC-5601

Property settings

The following table maps the desired behavior to property settings.

In order to:	Use this property:	And set it to:
Specify the character set	eciNumber	The ECI number for the ISO character set you want to use
Encode the number of the ISO character set in the barcode	eciHeaderDisplayMode	show
Omit the number of the ISO character set from the barcode	eciHeaderDisplayMode	hide (default)

Example

Assuming that the data to be encoded is in Greek and the eciNumber to be used is 9 which corresponds to character set ISO/IEC 8859-7.

The screenshot below demonstrates how the igQRCodeBarcode control looks as a result of the following settings:

Property	Value
width	“200px”
height	“200px”
data	“ΑΒΓΔΕ”
eciNumber	9
eciHeaderDisplayMode	“show”

Following is the code that implements this example.

In HTML:

<html>
<head>
      <link rel="stylesheet" href="../../themes/smoothness/jquery-ui.css"/>
      <script type="text/javascript" src="../../js/jquery.min.js"></script>
      <script type="text/javascript" src="../../js/jquery-ui.js"></script>

      <!-- Ignite UI for jQuery Required Common JavaScript Files -->
      <script src="../../igniteui/js/modules/infragistics.util.js"></script>
      <script src="../../igniteui/js/modules/infragistics.util.jquery.js"></script>
      <script src="../../igniteui/js/modules/infragistics.dv_core.js"></script>
      <script src="../../igniteui/js/modules/infragistics.dv_jquerydom.js"></script>
      <script src="../../igniteui/js/modules/infragistics.ext_core.js"></script>
      <script src="../../igniteui/js/modules/infragistics.ext_collection.js"></script>
      <script src="../../igniteui/js/modules/infragistics.ext_collectionsextended.js"></script>
      <script src="../../igniteui/js/modules/infragistics.ext_text.js"></script>
      <script src="../../igniteui/js/modules/infragistics.ext_ui.js"></script>

      <!-- QR Code Barcode Specific JavaScript Files -->
      <script src="../../igniteui/js/modules/encoding/infragistics.encoding.core.js"></script>
      <script src="../../igniteui/js/modules/encoding/infragistics.encoding_iso-8859-7.js"></script>
      <script src="../../igniteui/js/modules/infragistics.barcode_qrcodebarcode.js"></script>
      <script src="../../igniteui/js/modules/infragistics.ui.widget.js"></script>
      <script src="../../igniteui/js/modules/infragistics.ui.barcode.js"></script>

      <script type="text/jscript">
              $(function () {                        
                  $("#barcode").igQRCodeBarcode({
                        width: "200px",
                        height: "200px",
                        data: "ΑΒΓΔΕ",
                        eciNumber: 9,
                        eciHeaderDisplayMode: "show"
                 });
            });
          </script>
</head>
<body>
      <div id="barcode"></div>
</body>
</html>

Ignite UI | Help Topics

Configuring the Character Encoding (igQRCodeBarcode)

Topic Overview

Purpose

Required background

In this topic

Introduction

Character encoding configuration summary

Character encoding configuration summary chart

Configuring the Character Encoding

Overview

Requirements

Property settings

Example

Configuring the Character Set

Overview

ECI numbers reference chart

Property settings

Example

Related Content

Topics

Samples