Blog

How to Get Started with the Ignite UI Layout Manager

Marina Stoyanova / Tuesday, October 1, 2013

Layout Manager provides a range of five different layouts for your web application. This control works over HTML page, by rearranging the elements  depending on the layout you have selected. The Layout Manager gives you an easy-to-use alternative to manually making layout through

elements. So let’s look at the different layouts and how to initialize them. For that purpose we will be making an application that allows the users to select the appropriate styling for their needs.

Changing the Layout

To begin with, you need a way to select the different layouts so here comes the Ignite UI control Combo Box. With the igCombo control you can create drop downs that accept text entries as well as options selected from the items list. This jQuery widget has a lot of useful events such as: selectionChanged, activeItemChanged, textChanged. The event we  are going to use in our application is selectionChanged, but more about that later - first let’s see how to add combo box. The following lines demonstrate how to configure the control and how to bind data using jQuery.

  • First define a target element.
  1. <select id="comboTarget">select>

 

  • Bind data. You have to define the data, set the data source and then configure the text and the value fields.

 

  1. <script type="text/javascript">
  2.     $(function () {
  3.         var layout = [
  4.                 { "Name": "Flow" },
  5.                 { "Name": "Grid" },
  6.                 { "Name": "Vertical" },
  7.                 { "Name": "Border" },
  8.                 { "Name": "Column" }
  9.         ];
  10.         $("#comboTarget").igCombo({
  11.             dataSource: layout,
  12.             textKey: "Name",
  13.             valueKey: "Name",
  14.             width: "200px",
  15.             autoComplete: true
  16.         });
  17.     });
  18. script>

Now that we have created our combo box, we want it to display the various layouts depending on the users choice. As we said the selectionChanged event comes in handy here. As you can see in the documentation ui.items helps us obtain reference to array of new selected items. Probably now is the time to say that the supported layouts by the Layout Manager are:

o Border layout

o Column layout

o Flow layout

o Grid layout

o Vertical layout

That is why the data source names and values are equivalent to those layouts. We are going to use a switch operator to help us with the changes that occur.

  1. selectionChanged: function (evt, ui) {
  2.     var changed = ui.items[0];
  3.     var option = changed.value;
  4.   
  5.     switch (option) {
  6.  
  7.         case "Flow":
  8.            . . .
  9.         break;
  10.  
  11.         case "Grid":
  12.           . . .
  13.         break;
  14.  
  15.         case "Column":
  16.            . . .     
  17.         break;
  18.  
  19.         case "Vertical":
  20.             . . .
  21.         break;
  22.  
  23.         case "Border":
  24.         . . .
  25.         break;
  26.     }
  27. }

 

Shortly that is how to initialize Combo Box. You can find more information about Combo box and its features on the products page.

 

Layout Manager

As you will see all of the layouts adjust based on the viewport of the browser. To set up the Layout Manager you just need to write the following lines:

  1. $("#layout").igLayoutManager({
  2.     layoutMode: "flow"                                
  3. });

The layoutMode is the option that allows you to choose which layout to be visualized. In the preceding lines the layoutMode is set to flow, that means we have chosen the Flow Layout.

Before every initialization of a layout we use the destroy method of the control, because we want to remove the previously selected layout and visualize the new one on its place. In this application we will take the data from markup. Just, so that you know for the flow and vertical layouts you can use items or itemsCount options. Items is an array of descriptions, meaning that you can set various height and width for the different items. With the second option you can set the number of items to render, they will have the same size. If you choose the previous options the items will be generated automatically and you can set content in the itemRendered event. Anyway as we said we are using data from markup. First we will need to define a target element like that:

  1. <div id="layout" style="width:100%;">

We are using separate HTML code for the different layouts, because border and column layouts for instance need specific classes to arrange the elements on the page. At the beginning of our JS code we hide all of the HTML content and everywhere we need to visualize some part we call it with the help of the show() function.

Let’s first look at the Border Layout.

Border Layout

It divides the container into few section: heading, footer,body,left and right sides. To say which element in which section to be situated we use the respective class for each region.

HTML

  1. <div id="border">
  2.  
  3.     <div class="left">
  4.     <p id="l">
  5.         <h3>Imagesh3>
  6.  
  7.         <ul>
  8.             <li>Natureli>
  9.             <li>Animalsli>
  10.             <li>Mountainsli>
  11.                         <li>Oceanli>
  12.         ul>
  13.     p>
  14.     div>
  15.  
  16.     <div class="right">
  17.     <p id="r">
  18.         <h3>Galleryh3>
  19.         <img src="http://cdn.morguefile.com/imageData/public/files/g/greyerbaby/preview/fldr_2012_05_20/file2341337572086.jpg" width="150" height="150"/>
  20.         <img src="http://cdn.morguefile.com/imageData/public/files/h/hotblack/preview/fldr_2010_07_03/file8281278162138.jpg" width="150" height="150"/>
  21.         <img src="http://cdn.morguefile.com/imageData/public/files/s/seemann/preview/fldr_2010_02_01/file9871265088249.jpg" width="150" height="150"/>
  22.         <img src="http://cdn.morguefile.com/imageData/public/files/m/melodi2/preview/fldr_2010_01_10/file8201263121775.jpg" width="150" height="150"/>
  23.          <img src="http://cdn.morguefile.com/imageData/public/files/a/ajjoelle/preview/fldr_2009_12_12/file9941260680478.jpg" width="150" height="150"/>
  24.     p>
  25.     div>
  26.  
  27.     <div class="center">
  28.     <p>
  29.         <h3>Informationh3>
  30.         <img src="http://cdn.morguefile.com/imageData/public/files/g/greyerbaby/preview/fldr_2012_05_20/file2341337572086.jpg" width="500" height="400" />
  31.         <p>
  32.          Nature, in the broadest sense, is equivalent to the natural, physical, or material world or universe. "Nature" refers to the phenomena of the physical world, and also to life in general. It ranges in scale from the subatomic to the cosmic.
  33.          The word nature is derived from the Latin word natura, or "essential qualities, innate disposition", and in ancient times, literally meant "birth".[1] Natura was a Latin translation of the Greek word physis (), which originally related to the intrinsic characteristics that plants, animals, and other features of the world develop of their own accord.[2][3] The concept of nature as a whole, the physical universe, is one of several expansions of the original notion; it began with certain core applications of the word  by pre-Socratic philosophers, and has steadily gained currency ever since. This usage was confirmed during the advent of modern scientific method in the last several centuries.p>
  34.         <p>
  35.         Within the various uses of the word today, "nature" often refers to geology and wildlife. Nature may refer to the general realm of various types of living plants and animals, and in some cases to the processes associated with inanimate objects  the way that particular types of things exist and change of their own accord, such as the weather and geology of the Earth, and the matter and energy of which all these things are composed. It is often taken to mean the "natural environment" or wildernesswild animals, rocks, forest, beaches, and in general those things that have not been substantially altered by human intervention, or which persist despite human intervention.p>
  36.  
  37.  
  38.     p>
  39.     div>
  40.  
  41.     <div class="header">My Gallerydiv>
  42.     <div class="footer">Ignite UI Layout Manager div>
  43. div>

jQuery

  1. case "Border":
  2.     $("#border").show().igLayoutManager({
  3.         layoutMode: "border",
  4.         borderLayout: {
  5.             leftWidth: "10%",
  6.             rightWidth: "20%"
  7.         }
  8.     });
  9. break;

The preceding code will look like this:

 

Column Layout

The main idea of the column layout is that the container is divided into 12 columns. This layout is similar to Bootstrap.  You can have separate rows, each one of which could be split into one to twelve columns. To implement that layout you will have to assign a rowclass to a

tag and a colN class to its children. N defines how many column(s) the element takes up. For example if you want your row to have only one column you have to use col12 class and etc. We need to use the “ig-layout-col” class, that is why we call the addClass() jQuery function  in the initialization of this layout.

HTML

  2. <div class="row">
  3.     <div class="col12">
  4.     <p>
  5.         <h2 id="myGal">My Galleryh2>        
  6.     p>
  7.     div>
  8. div>
  9.  
  10. <div class="row">
  11.     <div class="col2">
  12.     <p>
  13.         <h3>Image 1h3>
  14.         <img src="http://cdn.morguefile.com/imageData/public/files/g/greyerbaby/preview/fldr_2012_05_20/file2341337572086.jpg" width="150" height="150"/>
  15.     p>
  16.     div>
  17.  
  18.     <div class="col2">
  19.     <p>
  20.          <h3>Image 2h3>
  21.          <img src="http://cdn.morguefile.com/imageData/public/files/h/hotblack/preview/fldr_2010_07_03/file8281278162138.jpg" width="150" height="150"/>
  22.     p>
  23.     div>
  24.  
  25.     <div class="col2">
  26.     <p>
  27.         <h3>Image 3h3>
  28.         <img src="http://cdn.morguefile.com/imageData/public/files/s/seemann/preview/fldr_2010_02_01/file9871265088249.jpg" width="150" height="150"/>
  29.     p>
  30.     div>
  31.  
  32.     <div class="col2">
  33.     <p>
  34.          <h3>Image 4h3>
  35.          <img src="http://cdn.morguefile.com/imageData/public/files/m/melodi2/preview/fldr_2010_01_10/file8201263121775.jpg" width="150" height="150"/>
  36.     p>
  37.     div>
  38.  
  39.     <div class="col2">
  40.     <p>
  41.          <h3>Image 5h3>
  42.          <img src="http://cdn.morguefile.com/imageData/public/files/a/ajjoelle/preview/fldr_2009_12_12/file9941260680478.jpg" width="150" height="150"/>
  43.     p>
  44.     div>
  45.  
  46.     <div class="col2">
  47.     <p>
  48.          <h3>Image 6h3>
  49.          <img src="http://cdn.morguefile.com/imageData/public/files/r/RED/08/l/1377852969x7n59.jpg" width="150" height="150"/>
  50.     p>
  51.     div>
  52. div>
  53.  
  54. <div class="row">
  55.     <div class="col6">
  56.     <p>
  57.         <h3>Informationh3>
  58.         <img src="http://cdn.morguefile.com/imageData/public/files/g/greyerbaby/preview/fldr_2012_05_20/file2341337572086.jpg" width="400" height="300" />
  59.      p>
  60.     div>
  61.  
  62.     <div class="col6">
  63.         <p>
  64.          Nature, in the broadest sense, is equivalent to the natural, physical, or material world or universe. "Nature" refers to the phenomena of the physical world, and also to life in general. It ranges in scale from the subatomic to the cosmic.
  65.          The word nature is derived from the Latin word natura, or "essential qualities, innate disposition", and in ancient times, literally meant "birth". Natura was a Latin translation of the Greek word physis (), which originally related to the intrinsic characteristics that plants, animals, and other features of the world develop of their own accord. p>
  66.         <p>
  67.         Within the various uses of the word today, "nature" often refers to geology and wildlife. Nature may refer to the general realm of various types of living plants and animals, and in some cases to the processes associated with inanimate objects  the way that particular types of things exist and change of their own accord, such as the weather and geology of the Earth, and the matter and energy of which all these things are composed. It is often taken to mean the "natural environment" or wildernesswild animals, rocks, forest, beaches, and in general those things that have not been substantially altered by human intervention, or which persist despite human intervention.p>
  68.     div>
  69. div>

jQuery

  1. case "Column":
  2.     $('#layout').addClass("ig-layout-col").children().hide();
  3.     $(".row").show();
  4.     $('#layout').igLayoutManager({
  5.         layoutMode: "column",
  6.     });
  7. break;

 

 

Flow and Vertical Layouts

In Flow Layout the elements are arranged from left to right in inline-blocks and in vertical layout  the items are ordered from top to bottom – single column arrangement. The HTML code that they are using is the same as the above mentioned, only the classes are skipped. You can use some CSS code to change the width and height of the various items.

Flow Layout

jQuery

  1. case "Flow":
  2.     $('#flowlayout').igLayoutManager("destroy");
  3.     $("#flowlayout").show().igLayoutManager({
  4.         layoutMode: "flow"
  5.     });
  6. break;

 

Vertical Layout

jQuery

  1. case "Vertical":
  2.     $('#flowlayout').igLayoutManager("destroy");
  3.     $("#flowlayout").show().igLayoutManager({
  4.         layoutMode: "vertical"
  5.     });
  6. break;

 

 

Grid Layout

As you can figure out from the name, this layout arrange the items in grid system. This layout needs to generate the items and in the itemRendered event handler we actually set the content for the rendered items.  We use the rearrangeItems option because it specifies whether the items should rearrange to fit in the container when it is resized. Pay attention that it only has effect when fixed columnWidth option is set.

So the code for the grid layout will look like this:

jQuery

  1. case "Grid":
  2.     $('#gridlayout').igLayoutManager("option", "destroyItems",true).igLayoutManager("destroy");
  3.     var flowItems = $("#flowlayout").children();
  4.     $('#gridlayout').show().on("iglayoutmanageritemrendered", function (event, args) {
  5.         var currentItem = $(flowItems[args.index]).clone();
  6.         args.item.append(currentItem);
  7.     });
  8.     $('#gridlayout').igLayoutManager({
  9.         layoutMode: "grid",
  10.         gridLayout: {
  11.             rearrangeItems: true,
  12.             useOffset: false,
  13.             columnWidth: 250,
  14.             columnHeight: 250,
  15.             cols: 3,
  16.             rows: 3
  17.         },
  18.         items: [
  19.              {
  20.                  rowSpan: 1,
  21.                  colSpan: 1
  22.              },
  23.              {
  24.                  rowSpan: 1,
  25.                  colSpan: 1
  26.              },
  27.              {
  28.                  rowSpan: 1,
  29.                  colSpan: 1
  30.              },
  31.              {
  32.                  rowSpan: 1,
  33.                  colSpan: 1
  34.              },
  35.               {
  36.                   rowSpan: 1,
  37.                   colSpan: 1
  38.               },
  39.              {
  40.                  rowSpan: 1,
  41.                  colSpan: 1
  42.              },
  43.              {
  44.                  rowSpan: 1,
  45.                  colSpan: 1
  46.              },
  47.              {
  48.                  rowSpan: 1,
  49.                  colSpan: 1
  50.              }
  51.         ]
  52.     }).css("minHeight", "500px");
  53.     break

 

The Ignite UI Tile Manager control is based on the Grid layout, so as you can assume it offers different interesting options. You can check either the products’ page for more information or the documentation.

You can find the application’s sample here.

 

You can follow us on Twitter @Infragistics and stay in touch on Facebook, Google+ and LinkedIn!