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.

Getting Started with Ignite UI for jQuery

In this topic

This topic contains the following sections:

Introduction

Ignite UI for jQuery™ is an advanced HTML5+ toolset that helps you create stunning, modern Web apps. Building on jQuery and jQuery UI, it primarily consists of feature rich, high-performing UI controls/widgets such as all kinds of charts, data visualization maps, (hierarchical, editable) data grids, pivot grids, enhanced editors (combo box, masked editors, HTML editor, date picker, to name a few), flexible data source connectors, and a whole lot more.

Ignite UI for jQuery comes in two vesions:

Open Source - a free version that contains a subset of the complete toolset. Grids and Data Visualization controls are excluded. For more information checkout the Ignite UI for jQuery OSS project on GitHub™.
Full - a paid version that contains the complete toolset.

Host Ignite UI for jQuery in your project

You have several options to host Ignite UI for jQuery in your project:

Use Ignite UI CLI
Use Package Manager like NPM, JSPM, NuGet
Use Infragistics Content Delivery Network (CDN)

Using Ignite UI CLI

The Ignite UI CLI is a tool to initialize, develop, scaffold and maintain applications in Angular, React and jQuery. To start using it, you need to install the npm package as a global module:

    npm install -g igniteui-cli

For more information read Using Ignite UI CLI topic.

Using NPM, JSPM, NuGet

The primary distribution method for the Ignite UI for jQuery family of controls is through package managers such as NPM, JSPM and NuGet.

NPM (installs Ignite UI for jQuery Open Source)

    npm install ignite-ui

For instructions how to configure the full licensed package, please check Using Ignite UI for jQuery npm packages topic.

NuGet (installs Ignite UI for jQuery Trial)

    Install-Package IgniteUI

For instructions how to configure the licensed package, please check Using Ignite UI for jQuery NuGet packages topic.

JSPM (installs Ignite UI for jQuery Open Source)

    jspm install npm:ignite-ui

For instructions how to configure the full licensed package, please check Using System.JS with Ignite UI for jQuery controls topic.

Add CSS and JavaScript references

Ignite UI for jQuery depends on jQuery and jQuery UI libraries and you need to add references to them before the Ignite UI for jQuery scripts. You also have several options to include the Ignite UI for jQuery controls in the page

Referencing combined and minified bundle files - the package comes with combined and minified files which group controls by type. There are infragistics.core.js (mandatory), infragistics.lob.js which contains the Line of Business controls like Grids, infragistics.dv.js which contains the Data Visualization controls like Charts, infragistics.excel-bundled.js which contains all excel exporting related logic, infragistics.spreadsheet-bundled.js which contains only spreadsheet user interface implementation and infragistics.scheduler-bundled.js which contains all scheduler related logic. For more information check Adding Required Resources Manually topic.
Referencing individual control files - For more information check JavaScript Files in Ignite UI for jQuery topic.
Using Infragistics Loader - The Infragistics Loader is a loader that can automatically load Ignite UI for jQuery files (and not only). It saves you the burden to reference control files manually. For more information check Adding Required Resources Automatically with the Infragistics Loader topic.
Using AMD Loader - Ignite UI for jQuery is AMD compatible and can be used with all popular AMD loaders.

Sample Ignite UI for jQuery Boilerplate HTML page (using trial CDN links)

The following code represents a sample boilerplate HTML page containing the required references (CDN links) needed to start using Ignite UI for jQuery.

<!DOCTYPE html>
<html>
<head>
    <title></title>

    <!-- Ignite UI for jQuery Required Combined CSS Files -->
    <link href="http://cdn-na.infragistics.com/igniteui/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
    <link href="http://cdn-na.infragistics.com/igniteui/latest/css/structure/infragistics.css" rel="stylesheet" />

    <style>

        /* ----- CSS Goes Here ----- */

    </style>
</head>
<body>

    <!-- ----- HTML Goes Here ----- -->

    <table id="grid"></table>

    <!-- JavaScript Library Dependencies -->
    <script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

    <!-- Ignite UI for jQuery Required Combined JavaScript Files -->
    <script src="http://cdn-na.infragistics.com/igniteui/latest/js/infragistics.core.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/latest/js/infragistics.dv.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/latest/js/infragistics.lob.js"></script>    
    <script>

        $(function () {

            // ----- JavaScript Goes Here ----- //

        });

    </script>

</body>
</html>

Add your first control

There are two options available: Directly or with Page Designer

Add an igGrid Directly

igGrid Paging

Add an igGrid using Page Designer

The Ignite UI for jQuery Page Designer gives you a complete designer experience to configure any Ignite UI for jQuery control by only using the mouse. To add igGrid to a page design area (on the left) in the toolbox (on the right) find "List & Pickers" section and drag and drop the Grid control. Then use the Property Editor to configure the grid. When ready just copy the resulting generated page.

Get just what you need

The Ignite UI for jQuery Custom Download Page gives you the option to choose only the Ignite UI for jQuery controls and features you use in your project and download optimized (minified and combined) JavaScript and CSS files for maximum page load performance.

Using CDN Links

Instead of hosting the Ignite UI for jQuery script files into your project, you can just use Ignite UI for jQuery CDN links. For Internet applications CDN usually serves files faster to the end users compared to host them on premise.

Following are the Ignite UI for jQuery Trial links. For more details checkout Infragistics Content Delivery Network (CDN) for Ignite UI for jQuery topic.

    <!-- Ignite UI for jQuery Required Combined CSS Files (Trial) -->
    <link href="http://cdn-na.infragistics.com/igniteui/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
    <link href="http://cdn-na.infragistics.com/igniteui/latest/css/structure/infragistics.css" rel="stylesheet" />

    <!-- JavaScript Library Dependencies -->
    <script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

    <!-- Ignite UI for jQuery Required Combined JavaScript Files (Trial) -->
    <script src="http://cdn-na.infragistics.com/igniteui/latest/js/infragistics.core.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/latest/js/infragistics.lob.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/latest/js/infragistics.dv.js"></script>

TypeScript Definitions

Ignite UI for jQuery provides type definitions for TypeScript allowing you to take advantage of strong typing, compile time checking and IntelliSense features. For more information check Using Ignite UI for jQuery with TypeScript topic.

AngularJS Extensions

Ignite UI for jQuery AngularJS extenstions provide two-way data binding and declarative initialization for controls used in AngularJS applications. For more information check Using Ignite UI for jQuery with AngularJS topic.

Angular Extensions

Ignite UI for jQuery Angular Extensions provide two-way data binding, declarative initialization and native API for controls used in Angular applications. For more information check Ignite UI for jQuery extensions for Angular on GitHub.

ReactJS Extensions

Ignite UI for jQuery ReactJS extenstions provide JSX markup and React API initialization. For more information check Ignite UI for jQuery extensions for React on GitHub.

Ignite UI for MVC

Ignite UI for MVC provide Model and View Chaining initialization as well as out of the box server-side remote requests handling. For more information check Adding Controls to an MVC Project topic.

Ignite UI | Help Topics