Available in the OSS Version

Layout Manager - Border Layout - Initializing with JavaScript

HEADER - some text here
LEFT AREA
RIGHT AREA
center text
FOOTER - some text here

This sample is designed for a larger screen size.

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

This sample demonstrates initializing the Layout Manager control's Border layout from JavaScript, by handling itemrendered events and assigning content to the created regions.

Code View

Copy to Clipboard 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Ignite UI for jQuery Layout Manager - border layout - initialize from JavaScript</title>
    <!-- Ignite UI for jQuery Required Combined CSS Files -->
    <link href="http://cdn-na.infragistics.com/igniteui/2024.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
    <link href="http://cdn-na.infragistics.com/igniteui/2024.2/latest/css/structure/modules/infragistics.ui.layout.css" rel="stylesheet" />
    <link href="http://cdn-na.infragistics.com/igniteui/2024.2/latest/css/structure/infragistics.css" rel="stylesheet" />

    <!-- Modernizr/jQuery/jQuery UI -->
    <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 Required Combined JavaScript Files -->
    <script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/infragistics.core.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/infragistics.lob.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // attach to events so that we can add the items content
            $('#layout').on("iglayoutmanageritemrendered", function (event, args) {
                if (args.region === "left") {
                    args.element.text("LEFT AREA");
                    args.element.css("background-color", "#FFA72D");
                    args.element.css("color", "#FFF");
                } else if (args.region === "right") {
                    args.element.text("RIGHT AREA");
                    args.element.css("background-color", "#555");
                    args.element.css("color", "#EEE");
                } else if (args.region === "center") {
                    args.element.text("center text");
                    args.element.css("background-color", "#EEE");
                    args.element.css("color", "#555");
                } else if (args.region === "header") {
                    args.element.text("HEADER - some text here");
                    args.element.css("background-color", "#2CBDF9");
                    args.element.css("color", "#FFF");
                } else if (args.region === "footer") {
                    args.element.text("FOOTER - some text here ");
                    args.element.css("background-color", "#2CBDF9");
                    args.element.css("color", "#FFF");
                }
            });
            $('#layout').igLayoutManager({
                layoutMode: "border",
                borderLayout: {
                    leftWidth: "10%",
                    rightWidth: "20%"
                }
            });
        });
    </script>
    <style>
        #sampleContainer {
            height: 370px;
        }
    </style>
</head>
<body>
    <div id="layout" style="width:100%; height: 300px; display:block;">
	</div>
</body>
</html>