ignite-ui

Ignite UI for jQuery

Ignite UI for jQuery™ helps you build powerful, high-performance web-based applications. Inside Ignite UI for jQuery you'll find user experience controls and components for creating engaging line-of-business web applications which target the browsers for both mobile & desktop environments.

About Ignite UI for jQuery

Ignite UI for jQuery is built on jQuery and jQuery UI and ties in seamlessly with the jQuery core model and conventions including all styling support via jQuery UI Theme Roller. Beyond jQuery Ignite UI for jQuery features support for Bootstrap themes, AngularJS, Knockout and jQuery Mobile.

Available Features in Ignite UI for jQuery open-source version

Feature	Ignite UI for jQuery OSS	Ignite UI for jQuery Full	Infragistics Ultimate	Help
Editors
igCombo	:white_check_mark:	:white_check_mark:	:white_check_mark:	api \ help \ topics source
igHtmlEditor	:white_check_mark:	:white_check_mark:	:white_check_mark:	api \ help \ topics source
igRating	:white_check_mark:	:white_check_mark:	:white_check_mark:	api \ help \ topics source
igValidator	:white_check_mark:	:white_check_mark:	:white_check_mark:	api \ help \ topics source
igCurrencyEditor	:white_check_mark:	:white_check_mark:	:white_check_mark:	api \ help \ topics source
igDateEditor	:white_check_mark:	:white_check_mark:	:white_check_mark:	api \ help \ topics source
igMaskEditor	:white_check_mark:	:white_check_mark:	:white_check_mark:	api \ help \ topics source
igNumericEditor	:white_check_mark:	:white_check_mark:	:white_check_mark:	api \ help \ topics source
igPercentEditor	:white_check_mark:	:white_check_mark:	:white_check_mark:	api \ help \ topics source
igTextEditor	:white_check_mark:	:white_check_mark:	:white_check_mark:	api \ help \ topics source
igCheckboxEditor	:white_check_mark:	:white_check_mark:	:white_check_mark:	api \ help \ topics source
igDatePicker	:white_check_mark:	:white_check_mark:	:white_check_mark:	api \ help \ topics source
Frameworks
igLoader	:white_check_mark:	:white_check_mark:	:white_check_mark:	api \ help \ topics source
igDataSource	:white_check_mark:	:white_check_mark:	:white_check_mark:	api \ help \ topics source
Templating Engine	:white_check_mark:	:white_check_mark:	:white_check_mark:	api \ help \ topics source
JS Excel Engine	:x:	:white_check_mark:	:white_check_mark:	api \ help \ topics source
igGridExcelExporter	:x:	:white_check_mark:	:white_check_mark:	api \ help \ topics source
Interactions
igTree	:white_check_mark:	:white_check_mark:	:white_check_mark:	api \ help \ topics source
igDialog	:white_check_mark:	:white_check_mark:	:white_check_mark:	api \ help \ topics source
igToolbar	:white_check_mark:	:white_check_mark:	:white_check_mark:	api \ help \ topics source
igToolbarButton	:white_check_mark:	:white_check_mark:	:white_check_mark:	api \ help \ topics source
igSplitButton	:white_check_mark:	:white_check_mark:	:white_check_mark:	api \ help \ topics source
igNotifier	:white_check_mark:	:white_check_mark:	:white_check_mark:	api \ help \ topics source
igPopover	:white_check_mark:	:white_check_mark:	:white_check_mark:	api \ help \ topics source
igRadialMenu	:x:	:white_check_mark:	:white_check_mark:	api \ help \ topics source
igColorPicker	:white_check_mark:	:white_check_mark:	:white_check_mark:	api \ help \ topics source
igColorPickerSplitButton	:white_check_mark:	:white_check_mark:	:white_check_mark:	api \ help \ topics source
igUpload	:white_check_mark:	:white_check_mark:	:white_check_mark:	api \ help \ topics source
igVideoPlayer	:white_check_mark:	:white_check_mark:	:white_check_mark:	api \ help \ topics source
igScroll	:white_check_mark:	:white_check_mark:	:white_check_mark:	api \ help \ topics source
Data Visualization
igDataChart	:x:	:white_check_mark:	:white_check_mark:	api \ help \ topics source
igCategoryChart	:x:	:white_check_mark:	:white_check_mark:	api \ help \ topics source
igShapeChart	:x:	:white_check_mark:	:white_check_mark:	api \ help \ topics source
igPieChart	:x:	:white_check_mark:	:white_check_mark:	api \ help \ topics source
igDoughnutChart	:x:	:white_check_mark:	:white_check_mark:	api \ help \ topics source
igFunnelChart	:x:	:white_check_mark:	:white_check_mark:	api \ help \ topics source
igBulletGraph	:x:	:white_check_mark:	:white_check_mark:	api \ help \ topics source
igLinearGauge	:x:	:white_check_mark:	:white_check_mark:	api \ help \ topics source
igRadialGauge	:x:	:white_check_mark:	:white_check_mark:	api \ help \ topics source
igMap	:x:	:white_check_mark:	:white_check_mark:	api \ help \ topics source
igSparkline	:x:	:white_check_mark:	:white_check_mark:	api \ help \ topics source
igQRCodeBarcode	:x:	:white_check_mark:	:white_check_mark:	api \ help \ topics source
igZoombar	:white_check_mark:	:white_check_mark:	:white_check_mark:	api \ help \ topics source
Scheduling
igScheduler	:x:	:white_check_mark:	:white_check_mark:	api \ help \ topics source
Layout
igLayoutManager	:white_check_mark:	:white_check_mark:	:white_check_mark:	api \ help \ topics source
igSplitter	:white_check_mark:	:white_check_mark:	:white_check_mark:	api \ help \ topics source
igTileManager	:white_check_mark:	:white_check_mark:	:white_check_mark:	api \ help \ topics source
Grids
igGrid	:x:	:white_check_mark:	:white_check_mark:	api \ help \ topics source
igHierarchicalGrid	:x:	:white_check_mark:	:white_check_mark:	api \ help \ topics source
igTreeGrid	:x:	:white_check_mark:	:white_check_mark:	api \ help \ topics source
Spreadsheet	:x:	:white_check_mark:	:white_check_mark:	api \ help \ topics source
Grid Features
Column Management Features	:x:	:white_check_mark:	:white_check_mark:	api \ help \ topics source
Column Fixing	:x:	:white_check_mark:	:white_check_mark:	api \ help \ topics source
Column Grouping	:x:	:white_check_mark:	:white_check_mark:	api \ help \ topics source
Column Hiding	:x:	:white_check_mark:	:white_check_mark:	api \ help \ topics source
Column Moving	:x:	:white_check_mark:	:white_check_mark:	api \ help \ topics source
Column Resizing	:x:	:white_check_mark:	:white_check_mark:	api \ help \ topics source
Column Summaries	:x:	:white_check_mark:	:white_check_mark:	api \ help \ topics source
Column Template	:x:	:white_check_mark:	:white_check_mark:	api \ help \ topics source
Multi-Column Headers	:x:	:white_check_mark:	:white_check_mark:	api \ help \ topics source
Collapsible Column Groups	:x:	:white_check_mark:	:white_check_mark:	api \ help \ topics source
Filtering	:x:	:white_check_mark:	:white_check_mark:	api \ help \ topics source
Sorting	:x:	:white_check_mark:	:white_check_mark:	api \ help \ topics source
Unbound Columns	:x:	:white_check_mark:	:white_check_mark:	api \ help \ topics source
Feature Chooser	:x:	:white_check_mark:	:white_check_mark:	api \ help \ topics source
Row Selectors	:x:	:white_check_mark:	:white_check_mark:	api \ help \ topics source
Selection	:x:	:white_check_mark:	:white_check_mark:	api \ help \ topics source
Tooltips	:x:	:white_check_mark:	:white_check_mark:	api \ help \ topics source
Updating	:x:	:white_check_mark:	:white_check_mark:	api \ help \ topics source
Paging	:x:	:white_check_mark:	:white_check_mark:	api \ help \ topics source
Cell Merging	:x:	:white_check_mark:	:white_check_mark:	api \ help \ topics source
Responsive Web Design (RWD) Mode	:x:	:white_check_mark:	:white_check_mark:	api \ help \ topics source
jsRender Integration	:x:	:white_check_mark:	:white_check_mark:	api \ help \ topics source
REST Updating	:x:	:white_check_mark:	:white_check_mark:	api \ help \ topics source
Knockout Support	:x:	:white_check_mark:	:white_check_mark:	api \ help \ topics source
Columns and Layout	:x:	:white_check_mark:	:white_check_mark:	api \ help \ topics source
Virtualization	:x:	:white_check_mark:	:white_check_mark:	api \ help \ topics source
Grid Multi-Row Layout	:x:	:white_check_mark:	:white_check_mark:	api \ help \ topics source
Grid Load On Demand	:x:	:white_check_mark:	:white_check_mark:	api \ help \ topics source
OLAP Pivot
igPivotDataSelector	:x:	:white_check_mark:	:white_check_mark:	api \ help \ topics source
igPivotGrid	:x:	:white_check_mark:	:white_check_mark:	api \ help \ topics source
igPivotView	:x:	:white_check_mark:	:white_check_mark:	api \ help \ topics source
Knockout Extensions
Combo	:white_check_mark:	:white_check_mark:	:white_check_mark:	help \ topics source
Editors	:white_check_mark:	:white_check_mark:	:white_check_mark:	help \ topics source
Tree	:white_check_mark:	:white_check_mark:	:white_check_mark:	help \ topics source
Grid	:x:	:white_check_mark:	:white_check_mark:	help \ topics source
Chart	:x:	:white_check_mark:	:white_check_mark:	help \ topics source
Theming
Metro	:white_check_mark:	:white_check_mark:	:white_check_mark:	help \ topics source
iOS	:white_check_mark:	:white_check_mark:	:white_check_mark:	help \ topics source
Bootstrap Default	:white_check_mark:	:white_check_mark:	:white_check_mark:	help \ topics source
Bootstrap 4 Default	:white_check_mark:	:white_check_mark:	:white_check_mark:	help \ topics source
Bootstrap Superhero	:white_check_mark:	:white_check_mark:	:white_check_mark:	help \ topics source
Bootstrap Flatly	:white_check_mark:	:white_check_mark:	:white_check_mark:	help \ topics source
Bootstrap Yeti	:white_check_mark:	:white_check_mark:	:white_check_mark:	help \ topics source
Infragistics	:white_check_mark:	:white_check_mark:	:white_check_mark:	help \ topics source
Infragistics2012	:white_check_mark:	:white_check_mark:	:white_check_mark:	help \ topics source
MVC Extensions	:x:	:white_check_mark:	:white_check_mark:	help \ topics source
Developer Support 24/5	:x:	:white_check_mark:	:white_check_mark:

Install

The package for this development repository is available on both npm and bower. To get started follow the respective package manager installation:

Ignite UI for jQuery CLI

To get started with the Ignite UI for jQuery CLI and Ignite UI for jQuery:

npm i -g igniteui-cli
ig new <project name> --framework=jquery
cd <project name>
ig add combo <component name>
ig start

npm

npm install ignite-ui

bower

bower install ignite-ui

Package contains similar files and structure to what you'd find in the full version of Ignite UI for jQuery with complete styles and lite versions of the combined script files:

<script src="<node_modules|bower_components>/ignite-ui/js/infragistics.core-lite.js" type="text/javascript"></script>
<script src="<node_modules|bower_components>/ignite-ui/js/infragistics.lob-lite.js" type="text/javascript"></script>

The full built content for both packages can be browsed at the Ignite UI for jQuery Bower Shim repository.

Running demos locally

Besides browsing our online samples, you can also run the demos included with this repo in a local clone. Those are useful for quickly trying out some control features, as a base for other samples or even testing local changes.

To setup the repository run the following in the root directory:

npm install

The command will install all build dependencies as well as bower packages used in the demos.

To build the product:

grunt build

This will create source files under the dist/ folder complete with merged locales, combined script and structure CSS and can be called again to include new changes.

The html demos under demos/<control> can now be run directly from the file system.

Getting Help

• Ignite UI for jQuery help API
• Ignite UI for jQuery help topics
• Ignite UI for jQuery online samples
• Ignite UI for jQuery questions on StackOverflow

Contributing

You can find all guidelines on how to contribute on the wiki page.

• How to contribute
• API documentation guidelines