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