Version

Getting Started with Ignite UI

In this topic

This topic contains the following sections:

Introduction

Ignite UI™ 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 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 OSS project on GitHub™.
  • Full - a paid version that contains the complete toolset.

Download and Install

You can download the Ignite UI from its download page. Depending on your operating system you have several options to install the product, both trial and licensed.

For Windows:

  • Platform Installer: Platform Installer is a Windows only online installer that gives you a wizard like experience to manage (install, update, uninstall) Ignite UI and all other Infragistics Developer tools their help and samples.

  • Download full product: A Windows only offline MSI installer containing the product, help and samples.

For MacOs, Linux, Unix etc.

Host Ignite UI in your project

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

Using NPM, JSPM, NuGet

Ignite UI supports a number of package managers: NPM, JSPM and NuGet.

NPM (installs Ignite UI Open Source)

    npm install ignite-ui

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

NuGet (installs Ignite UI Trial)

    Install-Package IgniteUI

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

JSPM (installs Ignite UI Open Source)

    jspm install npm:ignite-ui

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

Add CSS and JavaScript references

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

  • Referencing combined and minified bundle files - installation 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 topic.
  • Using Infragistics Loader - The Infragistics Loader is a loader that can automatically load Ignite UI 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 is AMD compatible and can be used with all popular AMD loaders.

Sample Ignite UI 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.

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

    <!-- Ignite UI 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 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

Add an igGrid using Page Designer

The Ignite UI Page Designer gives you a complete designer experience to configure any Ignite UI 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 Custom Download Page gives you the option to choose only the Ignite UI 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 script files into your project, you can just use Ignite UI 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 Trial links. For more details checkout Infragistics Content Delivery Network (CDN) for Ignite UI topic.

    <!-- Ignite UI 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 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 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 with TypeScript topic.

AngularJS Extensions

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

Angular 2 Extensions

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

ReactJS Extensions

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

ASP.NET MVC Wrappers

Ignite UI ASP.NET MVC Wrappers 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.

Related Content

Topics

View on GitHub