loaderClass

loaderClass_image

Infragistics Loader is a class component which loads asynchronously loads JavaScript and Cascading Styles Sheets files on a page. The loader API provides configuration for resource, JavaScript path, Cascading Styles Sheets path and preferred theme. The control can auto detect locale or you can manually set preferred locale and regional settings. After all the required scripts are loaded and ready to use, a callback function is called which allows your scripts to reliably know when the resources are available on the page.

The following code snippet demonstrates how to initialize the Infragistics Loader control.

Click here for more information on how to get started using this API. For details on how to reference the required scripts for the Infragistics Loader control read Using Infragistics Loader.

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

  • settings

    Type:
    object
    Default:
    {}

    Infragistics resources loader implemented as a class. Loads necessary resources for each widget based on the name of the widget.
    Loads Java Script and CSS files.

    Code Sample

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

    • autoDetectLocale

      Type:
      bool
      Default:
      false

      Indicates whether the loader should automatically detect browser's locale. Defaults to false.

      Code Sample

                  // Initialize
            $.ig.loader({
			    autoDetectLocale: true
		    });

    • cssPath

      Type:
      string
      Default:
      "css"

      CSS path relative to the page that instantiates the loader.

      Code Sample

                      // Initialize
                $.ig.loader({
			        cssPath: "css/"
		        });

    • locale

      Type:
      string
      Default:
      null

      Two letter code for current locale. Defaults to "en".

      Code Sample

                  // Initialize
            $.ig.loader({
			    locale: "ru"
		    });

    • localePath

      Type:
      string
      Default:
      "$path$/modules/i18n"

      Folder name that contains localization resources.

      Code Sample

                  // Initialize
            $.ig.loader({
			    localePath: "scripts/modules/i18n"
		    });

    • preinit

      Type:
      function
      Default:
      null

      A function to call when all resources are loaded but before the "ready" notification is sent.

      Code Sample

       
            // Initialize
            $.ig.loader({
			    preinit: function () { onPreInit(); }
		    });

    • ready

      Type:
      function
      Default:
      null

      A function to call when all resources are loaded and ready to use.

      Code Sample

       
            // Initialize
            $.ig.loader({
			    ready: function () { onReady(); }
		    });

    • regional

      Type:
      string
      Default:
      null

      Regional code. Can be two or five characters long ("en", "en-GB"). Defaults to "en".

      Code Sample

       
            // Initialize
            $.ig.loader({
			    regional: "bg"
		    });

    • resources

      Type:
      string
      Default:
      null

      Comma separated list of resources to load. Ex: "igTree,igVideoPlayer,igGrid.Paging".
      Modular widgets, such as igGrid, allow linking features with a "." (dot). To load all modules of a widget use "*". Ex: "igGrid.*".

      Code Sample

       
            // Initialize
            $.ig.loader({
			    resources: "igTree,igVideoPlayer,igGrid.Paging"
		    });

    • scriptPath

      Type:
      string
      Default:
      "js"

      Script path relative to the page that instantiates the loader.

      Code Sample

       
            // Initialize
            $.ig.loader({
                scriptPath: "js/"
            });

    • theme

      Type:
      string
      Default:
      ""

      Name of the theme. Must correspond to the CSS theme folder under cssPath.

      Code Sample

       
            // Initialize
            $.ig.loader({
                theme: "metro"
            });
The current widget has no events.

  • load

    .load( resources:string, [callback:function], [preinit:object] );

    Puts resources in the queue to be loaded. Optionally a call back function can be provided.

    • resources
    • Type:string
    • Comma Comma separated list of resources to load. Ex: "igTree,igVideoPlayer,igGrid.Paging". Modular widgets, such as igGrid, allow linking features with a "." (dot).
    • callback
    • Type:function
    • Optional
    • Call back function to be called when all resources are loaded and ready to be used.
    • preinit
    • Type:object
    • Optional
    • Returns this instance of the loader class implementation.

    Code Sample

     
            // Initialize
            $.ig.loader().load("igGrid.*", 
                function() { 
                    onReady();
                },
                function() { 
                    onPreInit();
                }
            );

  • log

    .log( );

    Code Sample

     
      console.log($.ig.loader().log());

  • preinit

    .preinit( callback:object );

    Sets callback function to be called once all resources are loaded but before the notification about their readiness.

    • callback
    • Type:object
    • Returns this instance of the loader class implementation.

    Code Sample

     
      $.ig.loader().preinit(function() { onPreInit(); });

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