Version

Adding igQRCodeBarcode to an HTML Page

Topic Overview

Purpose

This topic demonstrates, with code examples, how to add the igQRCodeBarcode™ control to an HTML page.

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.

In this topic

This topic contains the following sections:

Adding igQRCodeBarcode to an HTML Page – Conceptual Overview

Adding igQRCodeBarcode summary

To add igQRCodeBarcode control to a web page requires an HTML element, a <div> to serve as the base for instantiation. The basic configuration of igQRCodeBarcode requires providing a value for the data option (to feed the control with the data to display) along with setting values for its width and height.

Requirements

The following table summarizes the requirements for using the igQRCodeBarcode control.

Required Resources Description What you need to do…
jQuery and jQuery UI JavaScript resources Ignite UI for jQuery™ is built on top of the following frameworks: Add script references to both libraries in the <head> section of your page.
General igQRCodeBarcode JavaScript Resources The igQRCodeBarcode control depends on functionality distributed across several files in the Ignite UI for jQuery Library. You can load the required resources in one of the following ways:
  • Use the Infragistics® Loader (igLoader™). You only need to include a script reference to igLoader on your page.
  • Load the required resources manually. You need to use the dependencies listed in the table below.
  • Load the two combined files, containing the logic for all data visualization controls from the Ignite UI for jQuery package - infragistics.core.js, infragistics.dv.js.
The following table lists the Ignite UI for jQuery library dependences related to the igQRCodeBarcode control. These resources need to be referred to explicitly if you chose not to use igLoader or the combined files.
JS Resource Description
infragistics.util.js
infragistics.util.jquery.js 		Ignite UI for jQuery utilities
infragistics.dv_core.js
infragistics.dv_jquerydom.js
infragistics.ext_core.js
infragistics.ext_collection.js
infragistics.ext_collectionsextended.js
infragistics.ext_text.js
infragistics.ext_ui.js 		Data visualization core functionality
infragistics.encoding.core.js
infragistics.encoding_<encoding-name>.js 		Character encodings. The various supported encodings can be found under the Ignite UI for jQuery™ package folder structure:
/modules/encoding

Please see the Configuring the Character Encoding topic for more detail.
infragistics.barcode_core.js
infragistics.barcode_qrcodebarcode.js 		The igQRCodeBarcode control
infragistics.ui.widget.js Common widget
infragistics.ui.qrcodebarcode.js The igQRCodeBarcode widget

Add one of the following:
  • A reference to igLoader
  • A reference to all the required JavaScript files (listed in the table on the left).
  • A reference to the combined files and optionally to the file containing the encodings.

Steps

Following are the general conceptual steps for adding igQRCodeBarcode to an HTML Page.

  1. Creating the target element for storing the igQRCodeBarcode control

  2. Instantiating the igQRCodeBarcode control

  3. Configuring the basic rendering options

Adding igQRCodeBarcode to an HTML Page – Procedure

Introduction

This procedure adds an instance of igQRCodeBarcode to an HTML page and configures its basic options - data, width and height. The string data to encode is http://www.infragistics.com. The procedure presumes the required resources are added to the header of the HTML page, so it instantiates the igQRCodeBarcode control in the document ready event to prevent any errors due to DOM being not fully loaded.

Preview

The following screenshot is a preview of the result.

Prerequisites

To complete the procedure, you need the required JavaScript and CSS files referenced on the HTML page.

In HTML:

<!DOCTYPE html>
<html>
<head>
      <!-- Ignite UI for jQuery  CSS File -->
      <link href="../../igniteui/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />

      <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/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>
</head>
<body>
</body>
</html>

Steps

Follow these steps to add an igQRCodeBarcode to an HTML page.

  1. Create the target element for storing the igQRCodeBarcode control.

    Create a <div> element within the HTML body on which to instantiate the igQRCodeBarcode control.

    In HTML:

     <body>
     <!-- Target element for the igQRCodeBarcode -->
     <div id="barcode"></div>
 </body>

  2. Instantiate the igQRCodeBarcode control.

    Use the selector of the target element defined in step 1 to instantiate the igQRCodeBarcode control.

    In HTML:

     <script type="text/jscript">
     $(function () {                        
               $("#barcode").igQRCodeBarcode({
         });
         });
 </script>

  3. Configure the basic rendering options.

    When instantiating the igQRCodeBarcode, configure the data, width, and height options.

    In HTML:

     $("#barcode").igQRCodeBarcode({
             width: "200px",
             height: "200px",
             data: "http://www.infragistics.com"
 });

Full code

Following is the full code for this procedure.

In HTML:

<!DOCTYPE html>
<html>
<head>
      <!-- Ignite UI for jQuery  CSS File -->
      <link href="../../igniteui/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />

      <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/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: "http://www.infragistics.com"
            });            
        });
      </script>
</head>
<body>
      <div id="barcode"></div>      
</body>
</html>

Related Content

Topics

The following topics provide additional information related to this topic.

Samples

The following sample provides additional information related to this topic.

  • Basic Configuration: This sample demonstrates a basic configuration of the igQRCodeBarcode control.

View on GitHub