This topic explains how to manage the required resources to work with Ignite UI for jQuery™ within a Web application.
This topic contains the following sections:
To work with Ignite UI for jQuery, you must reference the Infragistics resources in your Web application. You can reference these resources in four different ways.
Including a custom JavaScript file: This is the recommended approach to reference Ignite UI for jQuery JavaScript files. You can create a custom download of selected Ignite UI for jQuery controls and components.
Using Infragistics Loader: The Infragistics Loader can be used to resolve all the Infragistics resources (styles and scripts).
Using the combined and minified JavaScript files: You can use the combined files that contain all components and their dependencies.
Including individual JavaScript files : You can manually reference all the required files.
To create an Ignite UI for jQuery custom build, go to the custom download page. Custom builds have two main benefits. First, by choosing only the controls and features used in your application, the browser downloads and executes less total JavaScript. Second, the JavaScript is combined into one file reducing the amount of requests that the browser makes to the server. These benefits result in faster performance for your application.
In HTML:
<script src="../scripts/infragistics.js" type="text/javascript"></script>
In Razor:
@using Infragistics.Web.Mvc;
<!DOCTYPE html>
<html>
<head runat="server">
..
<script src="@(Url.Content("~/scripts/infragistics.js"))" type="text/javascript"></script>
The Infragistics Loader resolves all the Infragistics resources (styles and scripts) for you. You just need to provide the path to required CSS and JavaScript files and declare which resources the loader will fetch for the page. You need to reference the Infragistics Loader:
In HTML:
<script src="Scripts/infragistics.loader.js" type="text/javascript"></script>
Inside another <script> element, you need to include the JavaScript code below to call the Infragistics Loader and declare the widget (feature).
In Javascript:
$.ig.loader({
scriptPath: '{IG Resources root}/js/',
cssPath: '{IG Resources root}/css/'
});
$.ig.loader('igGrid.Paging.Updating',
function () {
// Create a couple of igGrids
$("#grid1").igGrid({
virtualization: false,
autoGenerateColumns: true,
jQueryTemplating: false,
…
You need to manually reference several resources for Ignite UI for jQuery to work, including the base JavaScript files.
The combined scripts for all Infragistics JavaScript files is the following:
In HTML:
<script src="../scripts/infragistics.core.js" type="text/javascript"></script>
<script src="../scripts/infragistics.lob.js" type="text/javascript"></script>
<script src="../scripts/infragistics.dv.js" type="text/javascript"></script>
In Razor:
@using Infragistics.Web.Mvc;
<!DOCTYPE html>
<html>
<head runat="server">
..
<script src="@(Url.Content("~/scripts/infragistics.core.js"))" type="text/javascript"></script>
<script src="@(Url.Content("~/scripts/infragistics.lob.js"))" type="text/javascript"></script>
<script src="@(Url.Content("~/scripts/infragistics.dv.js"))" type="text/javascript"></script>
The Modernizr, JQuery, and JQuery UI JavaScript libraries are always required in your projects including the Ignite UI for jQuery. The Modernizr library detects the current browser features, allowing the controls to identify a touch or non-touch environment.
References needed to include the libraries mentioned above:
In HTML:
<script scr="../scripts/modernizr.js" type="text/javascript"></script>
In HTML:
<script src="../scripts/jquery.js" type="text/javascript"></script>
In HTML:
<script src="../scripts/jquery-ui.js" type="text/javascript"></script>
Note: References must be included in the same order detailed above.
Ignite UI for jQuery ships with resources for English ([en]), Japanese ([ja]), Russian ([ru]), Bulgarian ([bg]), German ([de]), Spanish ([es]) and French ([fr]) languages.
After adding Infragistics resources, the scripts folder of your Web application will have a modules folder. Under the modules folder localization resources for modular widgets (igGrid) need to be combined into one file.
The i18n folder will be placed inside the modules folder, holding the JavaScript files to localize the widgets to the Japanese, Bulgarian, Russian, German, Spanish and French languages.
JavaScript files provide localized formats including dates, numbers, and currency for the jQuery editors. These reside in ../js/modules/i18n/regional (where js is the root folder for the JavaScript files in the npm package installation folder).
Note: The regional settings are not part of combined scripts file,therefore they must be referenced if the combined scripts file is used.
Note: In case that Infragistics Loader is NOT used, localization scripts must always be included before the actual JavaScript files. The same applies for regional scripts.
Note: In case that Infragistics Loader is NOT used and we want to configure any regional settings, the infragistics.util files must be included before any regional JavaScript files. This is because the regional JavaScript files are dependent of infragistics.util functionality and use it internally.
There are two ways to reference localization resources:
The examples below will demonstrate how to include Bulgarian localization resources, assuming you already have the JavaScript files mentioned above.
The following code example will demonstrate how to include localization resources using the Infragistics Loader. The widgets localization is controlled by the locale option.
In Javascript:
$.ig.loader({
scriptPath: '{IG Resources root}/js/',
cssPath: '{IG Resources root}/css/',
resources: 'igHierarchicalGrid.*',
locale: “bg”,
regional :”en-GB”
});
//Continue loading the widget
Note: When the jQuery UI date picker widget is configured to be used with the Infragistics editors, it is necessary to do separate setting for the date picker’s regional settings.
The jquery-ui-i18n.js must be referenced on the page.
Regional setting needs to be specified as well: $.datepicker.setDefaults($.datepicker.regional['ru']);
When setting regional settings the editors the following file must be referenced on the page:
infragistics.ui.regional-i18n.js
The following code example will demonstrate how to include localization resources manually. As mentioned above the localization resources must precede the other infragistics scripts.
In HTML:
<!-- Needed JavaScript libraries -->
<!-- Modernizr library -->
<script scr="../scripts/modernizr.js" type="text/javascript"></script>
<!-- JQuery library -->
<script src="../scripts/jquery.js" type="text/javascript"></script>
<!-- JQuery UI library -->
<script src="../scripts/jquery-ui.js" type="text/javascript"></script>
<!-- Bulgarian locale -->
<script src="../scripts/modules/js/i18n/infragistics-bg.js" type="text/javascript"></script>
<!-- English (en-BG) regional settings -->
<script src="../scripts/modules/i18n/regional/infragistics.ui.regional-en-GB.js" type="text/javascript"></script>
The JavaScript files are also available in a hosted environment on the Infragistics CDN. For more information on the benefits of using a CDN, refer to the Infragistics Content Delivery Network (CDN) topic.
In HTML:
<script src="http://cdn-na.infragistics.com/igniteui/2024.1/latest/js/infragistics.loader.js">
</script>
The following topics provide additional information related to this topic.
JavaScript Files in Ignite UI for jQuery: This topic is a reference to the JavaScript files required to work with the controls included in Ignite UI for jQuery™.
Using Infragistics Loader: This topic explains how to manage the required resources to work with the Ignite UI for jQuery using Infragistics Loader.
Styling and Theming Ignite UI for jQuery: Instructions on setting up your application for design time, options for using CSS in production and an overview on creating or customizing a theme.
Infragistics Content Delivery Network (CDN) for Ignite UI for jQuery: Instructions on using Infragistics Content Delivery Network (CDN) in Ignite UI for jQuery.
View on GitHub