Ignite UI API Reference

ui.igLayoutManager

ui.igLayoutManager_image

The igLayoutManager is a widget based on jQuery UI that implements different layout modes into a page. Modes include flow layout, vertical layout and a border layout, which divides the container into left/right/footer/header/center regions. Further, the responsive and fluid column layouts are based on a 12 column layout grid. Also supported is a grid layout which allows items to be positioned at arbitrary places on the screen and have variable row and col spans.

The following code snippet demonstrates how to initialize the igLayoutManager.

For details on how to reference the required scripts and themes for the igLayoutManager control read, Using JavaScript Resources in Ignite UI and Styling and Theming Ignite UI.

Code Sample

    <!doctype html>
      <html>
      <head>
          <!-- Infragistics Combined CSS -->
          <link href="css/themes/infragistics/infragistics.theme.css" rel="stylesheet" type="text/css" />
          <link href="css/structure/infragistics.css" rel="stylesheet" type="text/css" />
          <!-- jQuery Core -->
          <script src="js/jquery.js" type="text/javascript"></script>
          <!-- jQuery UI -->
          <script src="js/jquery-ui.js" type="text/javascript"></script>
          <!-- Infragistics Combined Scripts -->
          <script src="js/infragistics.core.js" type="text/javascript"></script>
          <script src="js/infragistics.lob.js" type="text/javascript"></script>
    
      </head>
         <body>
	      <style type="text/css">

		      body {
			      font-family: "Segoe UI",Helvetica,Tahoma,Arial,Verdana,sans-serif;
			      background-color: #fff;
		      }

		      .col3 {
			      background-color: #EEE;
			      color: #555;
			      padding: 0 20px 20px 20px;
			      margin: 0 0 20px 0;
		      }

		      #layout .col12 {
			      border:2px dashed #999;
			      margin: 0 0 20px 0;
		      }

		      #layout .col7 {
			      background-color: #FFA72D;
			      color: #FFF;
			      padding: 0 20px 20px 20px;
			      margin: 0 0 20px 0;
		      }

		      #layout .col4 {
			      background-color: #ffaf41;
			      color: #fff;
			      padding: 0 20px 20px 20px;
		      }

		      #layout .col2 {
			      background-color: rgb(0, 155,225);
			      color: #FFF;
			      padding: 0 20px 20px 20px;
		      }

		      #layout .col5 {
			      background-color: #00CCFF;
			      padding: 0 20px 20px 20px;
			      color: #FFF;
		      }
	      </style>
	      <div id="layout" class="ig-layout-col">
		      <div class="row">
			      <div class="col3">
			      <p>
				      <h3>Heading</h3>
				      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vel tortor vitae lacus semper viverra id ac risus. Nam id magna nibh, eget sagittis enim. Morbi velit purus, posuere id aliquet ac, elementum vitae tortor.
			      </p>
			      </div>
			      <div class="col3">
			      <p>
				      <h3>Heading</h3>
				      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vel tortor vitae lacus semper viverra id ac risus. Nam id magna nibh, eget sagittis enim. Morbi velit purus, posuere id aliquet ac, elementum vitae tortor.
			      </p>
			      </div>
			      <div class="col3">
			      <p>
				      <h3>Heading</h3>
				      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vel tortor vitae lacus semper viverra id ac risus. Nam id magna nibh, eget sagittis enim. Morbi velit purus, posuere id aliquet ac, elementum vitae tortor.
			      </p>
			      </div>
			      <div class="col3">
			      <p>
				      <h3>Heading</h3>
				      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vel tortor vitae lacus semper viverra id ac risus. Nam id magna nibh, eget sagittis enim. Morbi velit purus, posuere id aliquet ac, elementum vitae tortor.
			      </p>
			      </div>
		      </div>
		      <div class="row">
			      <div class="col12">
				      <div class="col7">
				      <p>
					      <h3>This is a paragraph that spans 7 cols</h3>
					      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vel tortor vitae lacus semper viverra id ac risus. Nam id magna nibh, eget sagittis enim. Morbi velit purus, posuere id aliquet ac, elementum vitae tortor. Sed vestibulum porta risus, condimentum consequat ligula egestas a. Proin suscipit bibendum interdum. Vestibulum non velit sem, quis porttitor magna. Morbi placerat suscipit nunc. Aenean ut blandit purus. Nulla interdum quam eu nunc tempor dapibus. 
				      </p>
				      </div>
			      </div>
		      </div>
		      <div class="row">
			      <div class="col2">
			      <p>
				      <h3>This paragraph spans 2 cols.</h3>
				      This is a paragraph that spans 2 cols. it goes to the next line because the above paragraph is wrapped in a 12-col container (pink border) 
				
			      </p>
			      </div>
			      <div class="col5">
			      <p>
				      <h3>This is a paragraph that spans 5 cols</h3>
				      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vel tortor vitae lacus semper viverra id ac risus. Nam id magna nibh, eget sagittis enim. Morbi velit purus, posuere id aliquet ac, elementum vitae tortor. Sed vestibulum porta risus, condimentum consequat ligula egestas a. Proin suscipit bibendum interdum. Vestibulum non velit sem, quis porttitor magna. Morbi placerat suscipit nunc. Aenean ut blandit purus. Nulla interdum quam eu nunc tempor dapibus. 
			      </p>
			      </div>
		      </div>
	      </div>
      </body>

      </html>

Related Samples

Related Topics

Dependencies

jquery-1.7.0.js
jquery.ui.core.js
jquery.ui.widget.js
infragistics.util.js

Inherits

  • borderLayout

    Type:
    object
    Default:
    {}

    Options specific to a border layout.

    Code Sample

          //Initialize
      $('.selector').igLayoutManager({
	        layoutMode: "border",
	        borderLayout: {
		        leftWidth: "10%",
		        rightWidth:"20%",
		        showFooter: true,
		        showHeader: true,
		        showLeft: true,
		        showRight: true
	        }
      });
      
      //Get
      var borderLayout = $('.selector').igLayoutManager("option", "borderLayout");

    • leftWidth

      Type:
      string
      Default:
      20%

      Option specifying the width of the left region, either in px or percentages.

      Code Sample

            //Initialize
      $('.selector').igLayoutManager({
          layoutMode: "border",
          borderLayout: {
            leftWidth: "10%"
          }
      });
          
      //Get
      var borderLayout = $('.selector').igLayoutManager("option", "borderLayout");
      var leftWidth = borderLayout.leftWidth;

    • rightWidth

      Type:
      string
      Default:
      10%

      Option specifying the width of the right region, either in px or percentages.

      Code Sample

            //Initialize
      $('.selector').igLayoutManager({
          layoutMode: "border",
          borderLayout: {
            rightWidth: "10%"
          }
      });
          
      //Get
      var borderLayout = $('.selector').igLayoutManager("option", "borderLayout");
      var rightWidth = borderLayout.rightWidth;

    • showFooter

      Type:
      bool
      Default:
      true

      Option specifying whether the footer region in the border layout will be hidden or shown.

      Code Sample

               
      //Initialize
      $('.selector').igLayoutManager({
          layoutMode: "border",
          borderLayout: {
            showFooter: true
          }
      });
          
      //Get
      var borderLayout = $('.selector').igLayoutManager("option", "borderLayout");
      var showFooter = borderLayout.showFooter;

    • showHeader

      Type:
      bool
      Default:
      true

      Option specifying whether the header region in the border layout will be hidden or shown.

      Code Sample

            //Initialize
      $('.selector').igLayoutManager({
		  layoutMode: "border",
		  borderLayout: {
			showHeader: true
          }
      });
          
      //Get
      var borderLayout = $('.selector').igLayoutManager("option", "borderLayout");
      var showHeader = borderLayout.showHeader;

    • showLeft

      Type:
      bool
      Default:
      true

      Option specifying whether the left region in the border layout will be hidden or shown.

      Code Sample

       
      //Initialize
      $('.selector').igLayoutManager({
		  layoutMode: "border",
		  borderLayout: {
			  showLeft: true
          }
      });
          
      //Get
      var borderLayout = $('.selector').igLayoutManager("option", "borderLayout");
      var showLeft = borderLayout.showLeft;

    • showRight

      Type:
      bool
      Default:
      true

      Option specifying whether the right region in the border layout will be hidden or shown.

      Code Sample

            //Initialize
      $('.selector').igLayoutManager({
		  layoutMode: "border",
		  borderLayout: {
			  showRight: true
          }
      });
          
      //Get
      var borderLayout = $('.selector').igLayoutManager("option", "borderLayout");
      var showRight = borderLayout.showRight;

  • gridLayout

    Type:
    object
    Default:
    {}

    Options specific to grid layout mode.

    Code Sample

    	  //Initialize
	  $('.selector').igLayoutManager({
		layoutMode: "grid",
		width: "500px",
		height: "500px",
		gridLayout: {
			cols: 3,
			rows: 3,
			columnWidth: 200,
			columnHeight: 200,
			animationDuration : 500,
			marginLeft: 10,
			marginTop : 10,
			rearrangeItems: true
		},
		items: [
		  {
			rowSpan: 2,
			colSpan: 2,
			colIndex: 0,
			rowIndex: 0
		  },
		  {
			rowSpan: 1,
			colSpan: 1,
			rowIndex: 0,
			colIndex: 1
		  },
		  {
			rowSpan: 1,
			colSpan: 1,
			rowIndex: 0,
			colIndex: 2
		  }
		]
	  });
           
	  //Get
	  var gridLayout = $('.selector').igLayoutManager("option", "gridLayout");

    • animationDuration

      Type:
      number
      Default:
      500

      Specifies the duration of the animations in the layout manager's grid layout.

      Code Sample

            //Initialize
      $('.selector').igLayoutManager({
          layoutMode: "grid",
          gridLayout: {
            animationDuration : 500
          }
      });
            
      //Get
      var gridLayout = $('.selector').igLayoutManager('option', 'gridLayout');
      var animationDuration = gridLayout.animationDuration;
            
      //Set
      var gridLayout = $('.selector').igLayoutManager('option', 'gridLayout');
      gridLayout.animationDuration = 500;
      $('.selector').igLayoutManager('option', 'gridLayout', gridLayout);

    • cols

      Type:
      number
      Default:
      null

      Number of columns in the grid.

      Code Sample

            //Initialize
      $('.selector').igLayoutManager({
          layoutMode: "grid",
          gridLayout: {
            cols : 3
          }
      });
           
      //Get
      var gridLayout = $('.selector').igLayoutManager('option', 'gridLayout');
      var cols = gridLayout.cols;

    • columnHeight

      Type:
      object
      Default:
      null

      Accepts number or string with height in px or percents.

      Code Sample

            //Initialize
      $('.selector').igLayoutManager({
		layoutMode: "grid",
		gridLayout: {
		  columnHeight: 200
		}
      });
             
      //Get
      var gridLayout = $('.selector').igLayoutManager('option', 'gridLayout');
      var columnHeight = gridLayout.columnHeight;

    • columnWidth

      Type:
      object
      Default:
      null

      Accepts number or string with width in px or percents.

      Code Sample

            //Initialize
      $('.selector').igLayoutManager({
          layoutMode: "grid",
          gridLayout: {
            columnWidth: 200
          }
      });
             
      //Get
      var gridLayout = $('.selector').igLayoutManager('option', 'gridLayout');
      var columnWidth = gridLayout.columnWidth;

    • marginLeft

      Type:
      number
      Default:
      0

      Specifies the margin left css property for items.

      Code Sample

            //Initialize
      $('.selector').igLayoutManager({
          layoutMode: "grid",
          width: "75%",
          height: "500px",
          gridLayout: {
			marginLeft : 10
          }  
      });
                
      //Get
      var gridLayout = $('.selector').igLayoutManager('option', 'gridLayout');
      var marginLeft = gridLayout.marginLeft;

    • marginTop

      Type:
      number
      Default:
      0

      Specifies the margin top css property for items.

      Code Sample

            //Initialize
      $('.selector').igLayoutManager({
          layoutMode: "grid",
          gridLayout: {
            marginTop : 10
          }
      });
                
      //Get
      var gridLayout = $('.selector').igLayoutManager('option', 'gridLayout');
      var marginTop = gridLayout.marginTop;

    • overrideConfigOnSetOption

      Type:
      bool
      Default:
      true

      Specifies whether the previous set options should be overriden when setting options.

    • rearrangeItems

      Type:
      bool
      Default:
      true

      Specified whether the items should rearrange to fit in the container when it is resized.
      Have effect only when fixed columnWidth option is set.

      Code Sample

            //Initialize
      $('.selector').igLayoutManager({
	        layoutMode: "grid",
	        gridLayout: {
		        rearrangeItems: true
          }
      });
                
      //Get
      var gridLayout = $('.selector').igLayoutManager('option', 'gridLayout');
      var rearrangeItems = gridLayout.rearrangeItems;

    • rows

      Type:
      number
      Default:
      null

      Number of rows in the grid.

      Code Sample

            //Initialize
      $('.selector').igLayoutManager({
          layoutMode: "grid",
          width: "75%",
          height: "500px",
          gridLayout: {
            rows : 3
          }
      });
           
      //Get
      var gridLayout = $('.selector').igLayoutManager('option', 'gridLayout');
      var rows = gridLayout.rows;

  • height

    Type:
    string
    Default:
    null

    Height of the layout container.

    Code Sample

          //Initialize
      $('.selector').igLayoutManager({
          layoutMode: "border",
          height : "400px"
      });
      
      //Get
      var height = $('.selector').igLayoutManager("option", "height");

  • itemCount

    Type:
    number
    Default:
    null

    Number of items to render, this is only applicable to layouts: vertical and flow.

    Code Sample

          //Initialize
      $('.selector').igLayoutManager({
          height : "300px",
          layoutMode: "vertical",
          itemCount: 10
      });
      
      //Get
      var itemCount = $('.selector').igLayoutManager('option', 'itemCount');

  • items

    Type:
    array
    Default:
    []
    Elements Type:
    object

    An array of item descriptions
    this assumes the container is empty, and every item
    is described by rowspan,colspan, etc. - otherwise values of
    1 are assumed
    items can have various properties some of which may not be applicable
    depending on the layoutMode.
    for example rowSpan/colSpan/colIndex/rowIndex are only applicable to gridlayout.

    Code Sample

          //Initialize
      $('.selector').igLayoutManager({
          layoutMode: "vertical",
          items: [
            {
              width: "10%",
              height: "150px"
            },
            {
              width: "40%",
              height: "250px"
            },
            {
              width: "40%",
              height: "150px"
            },
            {
              width: "20%",
              height: "150px"
            },
            {
              width: "50%",
              height: "150px"
            }
          ]
      });
      
      //Get
      var items = $('.selector').igLayoutManager('option', 'items');

    • colIndex

      Type:
      number
      Default:
      0

      Column index of the item in the grid.

      Code Sample

            //Initialize
      $('.selector').igLayoutManager({
		layoutMode: "gridLayout",
        items: [
		  {
			  rowSpan: 2,
			  colSpan: 2,
			  colIndex: 0,
			  rowIndex: 0
		  },
		  {
			  rowSpan: 1,
			  colSpan: 1,
			  rowIndex: 0,
			  colIndex: 1
		  }]
      });
       
      //Get
      var items = $('.selector').igLayoutManager('option', 'items');
      var firstItemColIndex = items[0].colIndex;

    • colSpan

      Type:
      number
      Default:
      1

      ColSpan of the item.

      Code Sample

            //Initialize
      $('.selector').igLayoutManager({
		layoutMode: "gridLayout",
        items: [
		  {
			  rowSpan: 2,
			  colSpan: 2,
			  colIndex: 0,
			  rowIndex: 0
		  },
		  {
			  rowSpan: 1,
			  colSpan: 1,
			  rowIndex: 0,
			  colIndex: 1
		  }]
      });
       
      //Get
      var items = $('.selector').igLayoutManager('option', 'items');
      var firstItemColSpan = items[0].colSpan;

    • height

      Type:
      string
      Default:
      null

      Individual item height, either in px or percentage.

      Code Sample

            //Initialize
      $('.selector').igLayoutManager({
		layoutMode: "vertical",
		items: [
			{
				height: "150px"
			},
			{
				height: "250px"
			},
			{
				height: "150px"
			},
			{
				height: "150px"
			},
			{
				height: "150px"
			}
		]
      });
        
      //Get
      var items = $('.selector').igLayoutManager('option', 'items');
      var firstItemHeight = items[0].height;

    • rowIndex

      Type:
      number
      Default:
      0

      Row index of the item in the grid.

      Code Sample

            //Initialize
      $('.selector').igLayoutManager({
		layoutMode: "gridLayout",
		items: [
		  {
			  rowSpan: 2,
			  colSpan: 2,
			  colIndex: 0,
			  rowIndex: 0
		  },
		  {
			  rowSpan: 1,
			  colSpan: 1,
			  rowIndex: 0,
			  colIndex: 1
		  }]
      });
       
      //Get
      var items = $('.selector').igLayoutManager('option', 'items');
      var firstItemRowIndex = items[0].rowIndex;

    • rowSpan

      Type:
      number
      Default:
      1

      RowSpan of the item.

      Code Sample

            //Initialize
      $('.selector').igLayoutManager({
		layoutMode: "gridLayout",
        items: [
		  {
			  rowSpan: 2,
			  colSpan: 2,
			  colIndex: 0,
			  rowIndex: 0
		  },
		  {
			  rowSpan: 1,
			  colSpan: 1,
			  rowIndex: 0,
			  colIndex: 1
		  }]
      });
       
      //Get
      var items = $('.selector').igLayoutManager('option', 'items');
      var firstItemRowSpan = items[0].rowSpan;

    • width

      Type:
      string
      Default:
      null

      Individual item width, either in px or percentage.

      Code Sample

            //Initialize
      $('.selector').igLayoutManager({
		layoutMode: "vertical",
		items: [
			{
				width: "10%"
			},
			{
				width: "40%",
			},
			{
				width: "40%",
			},
			{
				width: "20%",
			},
			{
				width: "50%",
			}
		]
      });
      
      //Get
      var items = $('.selector').igLayoutManager('option', 'items');
      var firstItemWidth = items[0].width;

  • layoutMode

    Type:
    enumeration
    Default:
    column

    defines the layout type grid border flow column vertical.

    Members

    • grid
    • Type:object
    • border
    • Type:object
    • flow
    • Type:object

    Code Sample

          //Initialize
      $('.selector').igLayoutManager({
	        layoutMode: "vertical"
      });
           
      //Get
      var layoutMode = $('.selector').igLayoutManager('option', 'layoutMode');

  • width

    Type:
    string
    Default:
    null

    Width of the layout container.

    Code Sample

     
      //Initialize
      $('.selector').igLayoutManager({
          layoutMode: "border",
          width : "800px"
      });
      
      //Get
      var width = $('.selector').igLayoutManager("option", "width");

For more information on how to interact with the Ignite UI controls' events, refer to
Using Events in Ignite UI.

Note: Calling API methods programmatically does not raise events related to their operation unless specifically stated otherwise by the corresponding API documentation; those events are only raised by their respective user interaction.

Show Details

  • internalResized

    Cancellable:
    false

    Event fired after items are resized.
    Use ui.owner to get a reference to the layout manager performing resizing.

    Code Sample

          //Initialize
      $(".selector").igLayoutManager({
          internalResized: function(evt, ui) {
          //reference to igLayourManager
          ui.owner;
          }
      });
      
      //Bind
      $(document).delegate("#layout", "iglayoutmanagerinternalresized", function (evt, ui) {
	  // reference to igLayoutManager
	  ui.owner;
      });

  • internalResizing

    Cancellable:
    true

    Event fired before items are resized.
    Use ui.owner to get a reference to the layout manager performing resizing.

    Code Sample

          //Initialize
      $(".selector").igLayoutManager({
          internalResizing: function(evt, ui) {
              //reference to igLayourManager
              ui.owner;
          }
      });
      
      //Bind
      $(document).delegate("#layout", "iglayoutmanagerinternalresizing", function (evt, ui) {
		// reference to igLayoutManager
		ui.owner;
      });

  • itemRendered

    Cancellable:
    false

    Event fired after an item has been rendered in the container
    Function takes arguments evt and ui.
    Use ui.owner to get reference to the igLayoutManager.
    Use ui.itemData to get a reference of item's settings, such as colspan ,rowspan, etc.
    use ui.index to get a reference of the item's index, if the layout is flow or vertical.

    Code Sample

          //Initialize
      $(".selector").igLayoutManager({
          itemRendered: function(evt, ui) {
              //reference to rendered item
              ui.item;
              //reference to rendered item index
              ui.index
          }
      });
      
      //Bind
      $(document).delegate("#layout", "iglayoutmanageritemrendered", function (evt, ui) {
          //reference to rendered item
          ui.item;
          //reference to rendered item index
          ui.index
      });

  • itemRendering

    Cancellable:
    false

    Event fired before an item is rendered in the container
    Function takes arguments evt and ui.
    Use ui.owner to get reference to the igLayoutManager.
    Use ui.itemData to get a reference of item's settings, such as colspan ,rowspan, etc.
    use ui.index to get a reference of the item's index, if the layout is flow or vertical.

    Code Sample

          //Initialize
      $(".selector").igLayoutManager({
          itemRendering: function(evt, ui) {
              //reference to item index which is goding to be rendered
              ui.index
          }
      });
      
      //Bind
      $(document).delegate("#layout", "iglayoutmanageritemrendering", function (evt, ui) {
          //reference to item index which is goding to be rendered
          ui.index
      });

  • rendered

    Cancellable:
    false

    Event fired after all items are rendered.
    Function takes arguments evt and ui.
    Use ui.owner to get reference to the igLayoutManager.

    Code Sample

          //Initialize
      $(".selector").igLayoutManager({
          rendered: function(evt, ui) {
            //reference to rendered items
            ui.items;
          }
      });
      
      //Bind
      $(document).delegate("#layout", "iglayoutmanagerrendered", function (evt, ui) {
          //reference to rendered items
          ui.items;
      });

  • destroy

    .igLayoutManager( "destroy" );

    Destroy is part of the jQuery UI widget API and does the following:
    1. Remove custom CSS classes that were added.
    2. Remove any elements that were added at widget's initialization and after that, which didn't below to the original markup
    3. Unbind all events that were bound.

    Code Sample

      
      $(".selector").igLayoutManager("destroy");

  • reflow

    .igLayoutManager( "reflow", [forceReflow:object], [event:object] );

    Triggers recalculation of the layout dimensions. Layouts may not need to be reflowed manually, if their sizes are in percentages (i.e. they are responsive by default)
    this can be particularly useful with a grid layout, when the container has percentage sizes, but items are calculated in pixels and positioned absolutely in the container.

    • forceReflow
    • Type:object
    • Optional
    • Indicates whether the reflow should be forced. Useful in cases where the items size and position was changed manually.
    • event
    • Type:object
    • Optional
    • Indicates the browser even which triggered this action (not API).

    Code Sample

          $(".selector").igLayoutManager("reflow", forceReflow, event);

  • ig-layout-border

    Classes applied to the container when layout mode is border.

  • ig-layout-border-center

    Classes applied to the center region of a border layout.

  • ig-layout-border-container

    Classes applied to the container element, when mode is border.

  • ig-layout-border-footer

    Classes applied to the footer region of a border layout.

  • ig-layout-border-header

    Classes applied to the header region of a border layout.

  • ig-layout-border-item

    Classes applied to the individual layout item, when layout is of border type.

  • ig-layout-border-left

    Classes applied to the left region of a border layout.

  • ig-layout-border-right

    Classes applied to the right region of a border layout.

  • ig-layout

    Classes applied to the main container element, on which the layout manager widget is instantiated.

  • ig-layout-flow

    Classes applied to the container when layout mode is flow.

  • ig-layout-flow-item

    Classes applied to an item that is part of a flow layout.

  • ig-layout-griditem-abs

    Classes applied to the item elements, when mode is grid and the items are absolutely positioned.

  • ig-layout-griditem-rel

    Classes applied to the item elements, when mode is grid and the items are relatively positioned.

  • ig-layout-item

    Classes applied to an individual layout item.

  • ig-layout-vertical

    Classes applied to the container when layout mode is vertical.

  • ig-layout-vertical-item

    Classes applied to the individual layout item, when layout is vertical.

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

#