Version

Adding igLayoutManager

Topic Overview

Purpose

This topic demonstrates, with code examples, how to add the igLayoutManager™ control to an HTML page using either pure HTML or JavaScript implementation.

Required background

The following topics are prerequisites to understanding this topic:

  • igLayoutManager Overview: This topic explains the igLayoutManager control conceptually and provides information on the supported layouts and their uses.

In this topic

This topic contains the following sections:

Adding igLayoutManager – Conceptual Overview

Adding igLayoutManager summary

The igLayoutManager initializes on an unordered list (<ul>) element with list items (<li>) elements or <div> elements. The list can be created in any of the following ways:

  • Directly in the HTML markup the <li> or <div> elements can be defined in the HTML markup of the host element, and upon initialization, the control will add the respective CSS classes
  • As an array of item objects in the control options

With this approach, an items collection and the itemCount property are used and the igLayoutManager generates the corresponding markup.

Note:When defining the number of items using the itemCount property, you should not define any items in the markup. Defining items in the markup together with setting the itemCount is an undefined scenario and will result in adding the items defined with itemCount property to those defined in the markup.

Requirements

The following table summarizes the requirements for igLayoutManager control.

Requirement / Required Resource Description What you need to do…
jQuery and jQuery UI JavaScript resources Ignite UI for jQuery is built on top of these frameworks: Add script references to both libraries in the <head> section of your page.
igLayoutManager JavaScript resources The igLayoutManager functionality of the Ignite UI for jQuery library is distributed across several files. You can load the required resources in one of the following ways:
  • (Recommended) Using Infragistics Loader (igLoader™). You only need to include a script reference to igLoader on your page.
  • Load the required resources manually. You need to use the dependencies listed in the table below.
The following table lists the Ignite UI for jQuery library dependences related to the igLayoutManager control. These resources need to be referred to explicitly if you chose to load resources manually (i.e. not to use igLoader).
JS Resource Description
infragistics.ui.layoutmanager.js The igLayoutManager control

Add one of the following:
  • A reference to igLoader
  • A reference to all the required JavaScript files (listed in the table on the left).
IG theme (Optional) This theme contains the visual styles for the Ignite UI for jQuery library. The theme file is: {IG CSS root}/themes/Infragistics/infragistics.theme.css
igLayoutManager structure The styles from the following CSS file are used for rendering various elements of the control: {IG CSS root}/structure/modules/infragistics.ui.layout.css Add style reference to the file in your page.

Note:It is recommended to use the igLoader component to load JavaScript and CSS resources. For information on how to do this, refer to the Adding Required Resources Automatically with the Infragistics Loader topic. In addition to that, in the online Ignite UI for jQuery Samples Browser, you can find some specific examples on how to use the igLoader with the igLayoutManager component.

Steps

Following are the general conceptual steps for adding igLayoutManager to an HTML page.

  1. Adding the HTML element to host the igLayoutManager control

  2. Instantiating igLayoutManager and specify the layout

Adding igLayoutManager to the HTML Markup – Procedure

Introduction

This procedure guides you through the steps of adding an igLayoutManager control with Flow layout and default settings to an HTML page. This is a pure HTML/JavaScript implementation. It uses the Infragistics Loader (igLoader) component to load all Ignite UI for jQuery resources needed by the igLayoutManager control. The markup is also defined in an HTML page. The igLayoutManager initializes directly in the HTML markup (i.e on an <ul> element with <li> elements).

For other scenarios, refer to Configuring igLayoutManager.

Preview

The following screenshot is a preview of the result.

Prerequisites

The required resources added and properly referenced. (For a conceptual overview of those resources, see Requirements.) These include:

  • The required files added to their appropriate locations:
    • The required jQuery and jQueryUI JavaScript resources added to a folder named Scripts in the directory where your web page resides.
    • The Ignite UI for jQuery CSS files added to a folder named Content/ig (For details, see the Styling and Theming Ignite UI for jQuery topic).
    • The Ignite UI for jQuery JavaScript files added to a folder of your web site or application named Scripts/ig (For details, see the Using JavaScript Resources in Ignite UI for jQuery topics).

  • The required JavaScript resources referenced in the <head> section of the page.

    In HTML:

    <script  type="text/javascript" src="Scripts/jquery.js"></script>
<script  type="text/javascript" src="Scripts/jquery-ui.js"></script>

  • The igLoader component referenced on the page.

    In HTML:

    <script  type="text/javascript" src="Scripts/ig/infragistics.loader.js"></script>

  • The igLoader component instantiated:

    In HTML:

    <script type="text/javascript">
    $.ig.loader({
        scriptPath: "Scripts/ig/",
        cssPath: "Content/ig/",
        resources: "igLayoutManager"
    });
</script>

Steps

The following steps demonstrate how to add a basic igLayoutManager control to a web page with Flow layout.

  1. Add the HTML element to host the igLayoutManager control.

    Add an HTML <ul> element to host the igLayoutManager control on the HTML page.

    In HTML:

     <ul id="layout">
     <li></li>
     <li></li>
     <li></li>
     <li></li>
     <li></li>
     <li></li>
     <li></li>
     <li></li>
     <li></li>
     <li></li>
     <li></li>
 </ul>

  2. Instantiate igLayoutManager and specify the layout.

    Add the initialization code to a script element in the HTML page. The initialization code creates igLayoutManager instance in the <ul> element added in step 1.

    The following code creates an instance of the igLayoutManager control.

    In JavaScript:

     $.ig.loader(function () {
     //  Create a basic igLayoutManager control
     $("#layout").igLayoutManager({
         layoutMode: "flow"
     });
 });

Adding igLayoutManager to the HTML Markup Using JavaScript – Procedure

Introduction

This procedure guides you through the steps of adding an igLayoutManager control with basic functionality to an HTML page using a pure HTML/JavaScript implementation. It uses the Infragistics Loader component to load all Ignite UI for jQuery resources needed by the igLayoutManager control. The igLayoutManager initializes as an array of item objects in the control options (i.e. on a blank <ul> element, and the number of items is provided inside the instance of igLayoutManager using the itemCount property).

Preview

The following screenshot is a preview of the final result.

Prerequisites

The required resources added and properly referenced. (For a conceptual overview of those resources, see Requirements.) These include:

  • The required files added to their appropriate locations:
    • The required jQuery and jQueryUI JavaScript resources added to a folder named Scripts in the directory where your web page resides.
    • The Ignite UI for jQuery CSS files added to a folder named Content/ig (For details, see the Styling and Theming Ignite UI for jQuery topic).
    • The Ignite UI for jQuery JavaScript files added to a folder of your web site or application named Scripts/ig (For details, see the Using JavaScript Resources in Ignite UI for jQuery topics).

  • The required JavaScript resources referenced in the <head> section of the page.

    In HTML:

    <script  type="text/javascript" src="Scripts/jquery.js"></script>
<script  type="text/javascript" src="Scripts/jquery-ui.js"></script>

  • The igLoader component referenced on the page.

    In HTML:

    <script  type="text/javascript" src="Scripts/ig/infragistics.loader.js"></script>

  • The igLoader component instantiated:

    In HTML:

    <script type="text/javascript">
    $.ig.loader({
        scriptPath: "Scripts/ig/",
        cssPath: "Content/ig/",
        resources: "igLayoutManager"
    });
</script>

Steps

The following steps demonstrate how to add a basic igLayoutManager control with Flow layout to an HTML page using JavaScript implementation. For other scenarios, read at Configuring igLayoutManager.

  1. Add an HTML element to host igLayoutManager.

    Add an HTML <ul> element to host igLayoutManager on the HTML page.

    In HTML:

     <ul id="layout">
 </ul>

  2. Instantiate igLayoutManager and specify the layout.

    Add the initialization code to a script element in the HTML page. The initialization code creates igLayoutManager instance in the <ul> element added in step 1.

    The following code creates an instance of the igLayoutManager control.

    In JavaScript:

     $.ig.loader(function () {
     //  Create a basic igLayoutManager control
     $("#layout").igLayoutManager({
         layoutMode: "flow",
         itemCount: 11,
     });
 });

Sample ilustrating an alternative approach when using itemRendered event:

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

https://github.com/IgniteUI/help-samples/tree/master/22.2/EN/layout-manager/border-layout

Adding igLayoutManager in the ASP.NET MVC – Procedure

Introduction

This procedure guides you through the steps of adding an igLayoutManager with basic functionality to an ASP.NET MVC view. The example uses the ASP.NET MVC syntax together with the required Loader configuration. The igLayoutManager initializes as an array of item objects in the control options (i.e. on a blank <ul> element, and the number of items is provided inside the instance of igLayoutManager using the itemCount property).

Preview

The following screenshot is a preview of the final result.

Prerequisites

The required resources added and properly referenced. (For a conceptual overview of those resources, see Prerequisites.) These include:

  • The required files added to their appropriate locations:
    • The required jQuery and jQueryUI JavaScript resources added to a folder named Scripts in the directory where your web page resides.
    • The Ignite UI for jQuery CSS files added to a folder named Content/ig (For details, see the Styling and Theming Ignite UI for jQuery topic).
    • The Ignite UI for jQuery JavaScript files added to a folder of your web site or application named Scripts/ig (For details, see the Using JavaScript Resources in Ignite UI for jQuery topics).

  • The required JavaScript resources referenced in the <head> section of the page.

    In HTML:

    <script  type="text/javascript" src="Scripts/jquery.js"></script>
<script  type="text/javascript" src="Scripts/jquery-ui.js"></script>

  • The igLoader component referenced on the page.

    In HTML:

    <script  type="text/javascript" src="Scripts/ig/infragistics.loader.js"></script>

  • The igLoader component instantiated in ASP.NET view:

    In ASPX:

    @(Html.Infragistics()
        .Loader()
        .ScriptPath("http://localhost/ig_ui/js/")
        .CssPath("http://localhost/ig_ui/css/")
        .Render()
)

Steps

The following steps demonstrate how to add a basic igLayoutManager control with Flow Layout to an ASP.NET MVC application.

  1. Add the igLayoutManager control.

    Add an HTML <ul> element to host igLayoutManager on the HTML page.

    In HTML:

     <ul id="layout"></ul>

  2. Instantiate igLayoutManager

    The following code creates an instance of the igLayoutManager control.

    In ASPX:

     @(Html.Infragistics()
     .ID("layout")
     .LayoutMode("flow")
     .ItemCount(11)
     .Render()
 )

Related Content

Topics

The following topics provide additional information related to this topic.

Samples

The following samples provide additional information related to this topic.

  • ASP.NET MVC Basic Usage: This sample demonstrates using the ASP.NET MVC helper for the Layout Manager control.

  • Border Layout from HTML Markup: This sample demonstrates initializing the igLayoutManager control’s Border layout from the HTML markup by assigning "center"/"left"/"right"/"header"/"footer" CSS classes.

  • Responsive Column Layout:This sample demonstrates how the igLayoutManager control’s Column layout can be used by assigning classes to items thus specifying the area their content will span over. This sample does not use JavaScript initialization code: it is done with CSS and HTML only.

  • Responsive Flow Layout: This sample demonstrates the responsiveness of the igLayoutManager control’s Flow layout with various item sizes set either in pixels or percentages and setting the number of items in the igLayoutManager's options without the need for any initial markup.

  • Grid Layout with colspan and rowspan Support: This sample demonstrates the ability of the igLayoutManager control’s Grid layout to allow items to have arbitrary position in a grid with a predefined size including for items with different rowspan and colspan settings.

  • Grid Layout with Custom Size: This sample demonstrates the igLayoutManager control’s Grid layout having specific width and height for each column.

  • Responsive Vertical Layout: This sample s demonstrates the responsiveness of the igLayoutManager control’s Vertical layout with various item sizes set either in pixels or percentages and setting the number of items in the igLayoutManager's options without the need for any initial markup.

View on GitHub