loader

loader_image

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"
                });
        
                $(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

The current widget has no options.
The current widget has no events.
  • loader

    new $.loader( [param1:object], [param2:string], [param3:function] );

    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:
    returns="object" type="$.ig.loaderClass" Returns an instance of the loader class implementation.

    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:function
    • Optional
    • Callback function to be called when all resources are loaded and ready to be used.

    Code Sample

      
            $.ig.loader({
                scriptPath: "js/", 
                cssPath: "css/", 
                resources: "igGrid.*,igTree", 
                ready: function () { onReady(); } 
            });
          

Copyright © 1996 - 2024 Infragistics, Inc. All rights reserved.