Ignite UI API Reference
loader
The Infragistics Loader class is also available through a static object component that allows you to initialize the Infragistics Loader class properties as JavaScript path, Cascading Styles Sheets path and resources.
When the loader has recognized that all resources are loaded on to the page, then a callback is run that operates much like the document ready event in jQuery. The following code snippet demonstrates how to initialize the Infragistics Loader static object.
Code Sample
<!doctype html>
<html>
<head>
<!-- jQuery Core -->
<script src="js/jquery.js" type="text/javascript"></script>
<!-- jQuery UI -->
<script src="js/jquery-ui.js" type="text/javascript"></script>
<!-- Infragistics Loader Script -->
<script src="js/infragistics.loader.js" type="text/javascript"></script>
<script src="js/adventureWorks.min.js" type="text/javascript"></script>
<!-- Infragistics Loader Initialization -->
<script type="text/javascript">
$.ig.loader({
scriptPath: "js/",
cssPath: "css/",
resources: "igGrid.Sorting"
});
$.ig.loader(function () {
$("#grid1").igGrid({
autoGenerateColumns: false,
columns: [
{ headerText: "Product ID", key: "ProductID", dataType: "number" },
{ headerText: "Product Name", key: "Name", dataType: "string" },
{ headerText: "Product Number", key: "ProductNumber", dataType: "string" },
{ headerText: "Standard Cost", key: "StandardCost", dataType: "number" }
],
dataSource: adventureWorks,
height: "400px",
features: [{
name: "Sorting",
type: "local",
mode: "multiple"
}]
});
});
</script>
</head>
<body>
<table id="grid1"></table>
</body>
</html>
Related Samples
Related Topics
Dependencies
-
loader
- new $.loader( [param1:object], [param2:string], [param3:object] );
Static object that can be used similarly to document ready statement in jQuery.
The callback will not be invoked until the document is ready.
Accepts three parameters all of which are optional and can be passed in in any order:
Examples:
1. Initialize and be notified all through the passed in options:
$.ig.loader({
scriptPath: '../../../Source/ClientUI/js/',
cssPath: '../../../Source/ClientUI/css/',
resources: 'igGrid.*,igTree',
ready: function () {} });
2. Initialize separately, be notified later
$.ig.loader({
scriptPath: '../../../Source/ClientUI/js/',
cssPath: '../../../Source/ClientUI/css/',
resources: 'igGrid'});
$.ig.loader(function () {
// Create a couple of igGrids
$("#grid1").igGrid({
virtualization: false,
autoGenerateColumns: true,
...
}
}
3. Load resources on demand with separate initialization
$.ig.loader({
scriptPath: '../../../Source/ClientUI/js/',
cssPath: '../../../Source/ClientUI/css/'
});
$.ig.loader('igGrid', function () {
// Create a couple of igGrids
$("#grid1").igGrid({
virtualization: false,
autoGenerateColumns: true,
...
}
}
4. Use chained methods
$.ig.loader().load('igGrid', function () {...}).load('igTree', function() {...});.- param1
- Type:object
- Optional
- Initialization object. Described in loaderClass settings.
- param2
- Type:string
- Optional
- Comma separated list of resources to load.
- param3
- Type:object
- Optional
- Returns an instance of the loader class implementation.
Code Sample
$.ig.loader({ scriptPath: "js/", cssPath: "css/", resources: "igGrid.*,igTree", ready: function () { onReady(); } });