Available in the OSS Version

Infragistics Loader - Dynamic Load

This sample demonstrates how to dynamically load resources using the loader. In this sample, the loader doesn't load the igTree resources until the button is clicked. When you pass in a resource string as a loader parameter, in this case "igTree", the loader fetches the required resources prior to executing the callback function.
  • Countries
    • China
    • India
    • Japan
    • United Kingdom
    • United States

This sample is designed for a larger screen size.

On mobile, try rotating your screen, view full size, or email to another device.

Code View

Copy to Clipboard 
<!DOCTYPE html>
<html>
<head>
    <title></title>

    <script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>

    <!-- Ignite UI for jQuery Loader JavaScript File -->
    <script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/infragistics.loader.js" type="text/javascript"></script>

</head>
<body>
    <button id="transform">Instantiate Tree</button>
    <div id="treeContainer">
        <!--igTree target element-->
        <div id="tree" class="list">
            <ul>
                <li>Countries
                    <ul>
                        <li>China</li>
                        <li>India</li>
                        <li>Japan</li>
                        <li>United Kingdom</li>
                        <li>United States</li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>

    <script>
        $.ig.loader({
            scriptPath: "http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/",
            cssPath: "http://cdn-na.infragistics.com/igniteui/2024.2/latest/css/",
            resources: "igShared",
            ready: function () {
                //This button click triggers the tree to be created
                $('#transform').on("click", function() {
                        CreateTree();
                        $(this)[0].disabled = true;
                });
            }
        });

        //By targetting the existing UL and LI elements,
        //the tree is created using the attributes set on those elements
        function CreateTree() {

            $.ig.loader("igTree", function () {
                $('#tree').igTree();
            });
        }
    </script>

</body>
</html>