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	✅	✅	✅	api \ help \ topics source
igHtmlEditor	✅	✅	✅	api \ help \ topics source
igRating	✅	✅	✅	api \ help \ topics source
igValidator	✅	✅	✅	api \ help \ topics source
igCurrencyEditor	✅	✅	✅	api \ help \ topics source
igDateEditor	✅	✅	✅	api \ help \ topics source
igMaskEditor	✅	✅	✅	api \ help \ topics source
igNumericEditor	✅	✅	✅	api \ help \ topics source
igPercentEditor	✅	✅	✅	api \ help \ topics source
igTextEditor	✅	✅	✅	api \ help \ topics source
igCheckboxEditor	✅	✅	✅	api \ help \ topics source
igDatePicker	✅	✅	✅	api \ help \ topics source
Frameworks
igLoader	✅	✅	✅	api \ help \ topics source
igDataSource	✅	✅	✅	api \ help \ topics source
Templating Engine	✅	✅	✅	api \ help \ topics source
JS Excel Engine	❌	✅	✅	api \ help \ topics source
igGridExcelExporter	❌	✅	✅	api \ help \ topics source
Interactions
igTree	✅	✅	✅	api \ help \ topics source
igDialog	✅	✅	✅	api \ help \ topics source
igToolbar	✅	✅	✅	api \ help \ topics source
igToolbarButton	✅	✅	✅	api \ help \ topics source
igSplitButton	✅	✅	✅	api \ help \ topics source
igNotifier	✅	✅	✅	api \ help \ topics source
igPopover	✅	✅	✅	api \ help \ topics source
igRadialMenu	❌	✅	✅	api \ help \ topics source
igColorPicker	✅	✅	✅	api \ help \ topics source
igColorPickerSplitButton	✅	✅	✅	api \ help \ topics source
igUpload	✅	✅	✅	api \ help \ topics source
igVideoPlayer	✅	✅	✅	api \ help \ topics source
igScroll	✅	✅	✅	api \ help \ topics source
Data Visualization
igDataChart	❌	✅	✅	api \ help \ topics source
igCategoryChart	❌	✅	✅	api \ help \ topics source
igShapeChart	❌	✅	✅	api \ help \ topics source
igPieChart	❌	✅	✅	api \ help \ topics source
igDoughnutChart	❌	✅	✅	api \ help \ topics source
igFunnelChart	❌	✅	✅	api \ help \ topics source
igBulletGraph	❌	✅	✅	api \ help \ topics source
igLinearGauge	❌	✅	✅	api \ help \ topics source
igRadialGauge	❌	✅	✅	api \ help \ topics source
igMap	❌	✅	✅	api \ help \ topics source
igSparkline	❌	✅	✅	api \ help \ topics source
igQRCodeBarcode	❌	✅	✅	api \ help \ topics source
igZoombar	✅	✅	✅	api \ help \ topics source
Scheduling
igScheduler	❌	✅	✅	api \ help \ topics source
Layout
igLayoutManager	✅	✅	✅	api \ help \ topics source
igSplitter	✅	✅	✅	api \ help \ topics source
igTileManager	✅	✅	✅	api \ help \ topics source
Grids
igGrid	❌	✅	✅	api \ help \ topics source
igHierarchicalGrid	❌	✅	✅	api \ help \ topics source
igTreeGrid	❌	✅	✅	api \ help \ topics source
Spreadsheet	❌	✅	✅	api \ help \ topics source
Grid Features
Column Management Features	❌	✅	✅	api \ help \ topics source
Column Fixing	❌	✅	✅	api \ help \ topics source
Column Grouping	❌	✅	✅	api \ help \ topics source
Column Hiding	❌	✅	✅	api \ help \ topics source
Column Moving	❌	✅	✅	api \ help \ topics source
Column Resizing	❌	✅	✅	api \ help \ topics source
Column Summaries	❌	✅	✅	api \ help \ topics source
Column Template	❌	✅	✅	api \ help \ topics source
Multi-Column Headers	❌	✅	✅	api \ help \ topics source
Collapsible Column Groups	❌	✅	✅	api \ help \ topics source
Filtering	❌	✅	✅	api \ help \ topics source
Sorting	❌	✅	✅	api \ help \ topics source
Unbound Columns	❌	✅	✅	api \ help \ topics source
Feature Chooser	❌	✅	✅	api \ help \ topics source
Row Selectors	❌	✅	✅	api \ help \ topics source
Selection	❌	✅	✅	api \ help \ topics source
Tooltips	❌	✅	✅	api \ help \ topics source
Updating	❌	✅	✅	api \ help \ topics source
Paging	❌	✅	✅	api \ help \ topics source
Cell Merging	❌	✅	✅	api \ help \ topics source
Responsive Web Design (RWD) Mode	❌	✅	✅	api \ help \ topics source
jsRender Integration	❌	✅	✅	api \ help \ topics source
REST Updating	❌	✅	✅	api \ help \ topics source
Knockout Support	❌	✅	✅	api \ help \ topics source
Columns and Layout	❌	✅	✅	api \ help \ topics source
Virtualization	❌	✅	✅	api \ help \ topics source
Grid Multi-Row Layout	❌	✅	✅	api \ help \ topics source
Grid Load On Demand	❌	✅	✅	api \ help \ topics source
OLAP Pivot
igPivotDataSelector	❌	✅	✅	api \ help \ topics source
igPivotGrid	❌	✅	✅	api \ help \ topics source
igPivotView	❌	✅	✅	api \ help \ topics source

Knockout Extensions
Combo	✅	✅	✅	help \ topics source
Editors	✅	✅	✅	help \ topics source
Tree	✅	✅	✅	help \ topics source
Grid	❌	✅	✅	help \ topics source
Chart	❌	✅	✅	help \ topics source

Theming
Metro	✅	✅	✅	help \ topics source
iOS	✅	✅	✅	help \ topics source
Bootstrap Default	✅	✅	✅	help \ topics source
Bootstrap 4 Default	✅	✅	✅	help \ topics source
Bootstrap Superhero	✅	✅	✅	help \ topics source
Bootstrap Flatly	✅	✅	✅	help \ topics source
Bootstrap Yeti	✅	✅	✅	help \ topics source
Infragistics	✅	✅	✅	help \ topics source
Infragistics2012	✅	✅	✅	help \ topics source

MVC Extensions	❌	✅	✅	help \ topics source
Developer Support 24/5	❌	✅	✅

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

Contributing

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

Application environment configurations support

Current state:
At the moment, if the OpenAPI schema file has defined servers (environments) App Builder will list them as dropdown options to pick from. Upon app code generation the selected Base URL will be hardcoded in the application files instead of exposing it in a config file/s (example with Blazor below). This leads to problems when there is a need to work on different deploy/build environments.

Expected result:
AppBuilder should automatically generate an appsettings.json, appsettings.development.json, or whatever is defined for each environment (Blazor-specific example). Any generated application should be ready to plug into a build and release pipeline if needed. In order to achieve that, App Builder should provide a UI to set the environment name, which will be used for the application settings environment files/configurations (based on the Framework).

For Blazor that would be appsettings.{Environment}.json configurations

For Angular environment.{env-name}.ts file

Based on the framework, other changes should be considered, not only the configuration files, but also:

Angular, for example, would be the target-specific files, building and serving configurations, and so on.
Blazor, for example is having app settings per environment. This means we need to set the environment variable on the server-side either by setting the ASPNETCORE_ENVIRONMENT environment variable or the blazor-environment response header. For Blazor Wasm, there is a boot script that loads the appsettings.json and appsettings.{Environment}.json file corresponding to the blazer-environment received and populate the WebAssemblyHostBuilder.Configuration with data in those files. We can then configure components, services, or js.

You can then configuration to your components, services or js

Looking at the OpenAPI spec docs, using of variables is something that we can explore to use the typed-in values from the UI:

Notes:
A UI for Specifying server (env) names is required as the OpenAPI spec doesn't provide a way to define server name, except the description field and we cannot use a clear pattern on doing this automatically based on provided Data Schema.