Version

Adding igTileManager

Topic Overview

Purpose

This topic demonstrates, with code examples, how to add the igTileManager™ control to an HTML page in either JavaScript or ASP.NET MVC. This topic covers initializing igTileManager on the HTML markup. For instantiating the control from the data source, refer to the Binding igTileManager to Data topic.

Required background

The following topic is a prerequisite to understanding this topic:

  • igTileManager Overview: This topic provides conceptual information about the igTileManager control including its main features, minimum requirements, and user functionality.

In this topic

This topic contains the following sections:

Adding igTileManager – Conceptual Overview

Adding igTileManager summary

The igTileManager is a control that initialize on DIV element. The igTileManager can be created either upon added markup in that DIV or from the data source (See Binding igTileManager to Data). This topic demonstrates initialization on markup.

It uses the Infragistics Loader (igLoader) component to load all Ignite UI for jQuery resources needed by the igTileManager control. The markup, too, is defined in HTML page.

Requirements

The following table summarizes the requirements for igTileManager 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 section of your page.
JavaScript resources The igTileManager 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: The following table lists the Ignite UI for jQuery library dependences related to the igTileManager 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.util.js infragistics.util.jquery.js Ignite UI for jQuery utilities
infragistics.datasource.js The igDataSource™ component
infragistics.templating.js Template engine (igTemplate™)
infragistics.ui.layoutmanger.js The igLayoutManager™ component
infragistics.ui.splitter.js The igSplitter™ component
infragistics.ui.tilemanager.js The igTileManager 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 Add style reference to the file in your page.
Style references The following CSS files are needed for the correct rendering of the control:{IG CSS root}/structure/modules/infragistics.ui.layout.css``{IG CSS root}/structure/modules/infragistics.ui.splitter.css Add style references to those files in your page.
igTileManager structure The styles from the following CSS file are used for rendering various elements of the control: {IG CSS root}/structure/modules/infragistics.ui.tilemanager.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 igTileManager component.

Steps

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

  1. Adding the HTML element to host the igTileManager control

  2. Instantiating igTileManager

Adding igTileManager to the HTML Markup – Procedure

Introduction

This procedure guides you through the steps of adding an igTileManager control with basic functionality to an HTML page using a pure HTML/JavaScript implementation. It uses the Infragistics Loader component (igLoader) to load all Ignite UI for jQuery resources needed by the igTileManager control. The markup is defined in HTML page as well.

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 in 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 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: “igTileManager"
    });
<script>

Steps

The following steps demonstrate how to add a basic igTileManager control to a web page. For other scenarios, read at Configuring igTileManager.

  1. Add a target element to host igTileManager.

    On your web page, define a target HTML DIV element to serve as the base object for the igTileManager control and set its ID. Add three DIVs with heading representing three tiles on the HTML page.

    In HTML:

     <style type="text/css">
         #dashboard {
             position: relative;
             width: 100%;
             height: 800px;
         }
 </style> 
 <div id="dashboard">
         <div>
           <figure class=”minimized”>
              <figcaption>Miami Heat</figcaption>
              <img src="miami-logo.jpg" alt="error">
              </figure>
          <div class="maximized">
             <img src="miami-maximized.jpg" alt="error">
              <ul>
                <li>Top scorer: LeBron James - 25,9 PPG</li>
                <li>Most rebounds per game: LeBron James - 8.40 TOT</li>
                <li>Highest three point percentage: James Jones - 0.750</li>
              </ul>
          </div>
         </div>
         <div>
            <figure class=”minimized”>
              <figcaption>San Antonio Spurs</figcaption>
              <img src="San-Antonio-logo.jpg" alt="error">
             </figure>
            <div class="maximized">
               <img src="San-Antonio-maximized.jpg" alt="error">
                <ul>
                  <li>Top scorer: Tony Parker - 20,3 PPG</li>
                  <li>Most rebounds per game: Tim Duncan - 9.90 TOT</li>
                  <li>Highest three point percentage: Matt Bonner - 0.442</li>
                </ul>
            </div>
          </div>
          <div>
              <figure class=”minimized”>
                <figcaption>New York Knicks</figcaption>
                <img src="NY-logo.jpg" alt="error">
              </figure>
             <div class="maximized">
              <img src="ny-maximized.jpg" alt="error">
                 <ul>
                    <li>Top scorer: Carmelo Anthony - 28,7 PPG</li>
                    <li>Most rebounds per game: Tyson Chandler - 10.70 TOT</li>
                    <li>Highest three point percentage: Steve Novak - 0.425</li>
                 </ul>
         </div>
 </div>

  2. Instantiate the igTileManager and specify its desired layout.

    Add the initialization code to a script element in the HTML page. The initialization code creates igTileManager instance in the DIV element added earlier.

    The following code creates an instance of the igTileManager control with square tiles that are 250 pixels along each side.

    In JavaScript:

     $.ig.loader(function () {
     //  Create a basic igTileManager control
     $("#dashboard").igTileManager({
             columnWidth: 250,
             columnHeight: 250,
             minimizedState: “.minimized”,
             maximizedState: “.maximized”
     });
 });

Adding igTileManager to an ASP.NET MVC View – Procedure

Introduction

This procedure guides you through the steps of adding an igTileManager, with basic functionality, to an ASP.NET MVC view. The example uses the ASP.NET MVC syntax together with the required Loader configuration.

Preview

The following screenshot 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 in 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 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 in the page.

    In HTML:

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

    The Ignite UI for MVC Loader configured for igTileManager:

    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 igTileManager control to an ASP.NET MVC application. For other scenarios, read at Configuring igTileManager.

  1. Add a target element to host igTileManager.

    On your web page, define a target HTML DIV element which serves as the base object for the igTileManager control and set its ID. Add three DIVs with heading that represent three tiles on the HTML page.

    In HTML:

     <style type="text/css">
         #dashboard {
             position: relative;
             width: 100%;
             height: 800px;
         }
 </style> 
 <div id="dashboard">
         <div>
           <figure class=”minimized”>
              <figcaption>Miami Heat</figcaption>
              <img src="miami-logo.jpg" alt="error">
              </figure>
          <div class="maximized">
             <img src="miami-maximized.jpg" alt="error">
              <ul>
                <li>Top scorer: LeBron James - 25,9 PPG</li>
                <li>Most rebounds per game: LeBron James - 8.40 TOT</li>
                <li>Highest three point percentage: James Jones - 0.750</li>
              </ul>
          </div>
         </div>
         <div>
            <figure class=”minimized”>
              <figcaption>San Antonio Spurs</figcaption>
              <img src="San-Antonio-logo.jpg" alt="error">
             </figure>
            <div class="maximized">
               <img src="San-Antonio-maximized.jpg" alt="error">
                <ul>
                  <li>Top scorer: Tony Parker - 20,3 PPG</li>
                  <li>Most rebounds per game: Tim Duncan - 9.90 TOT</li>
                  <li>Highest three point percentage: Matt Bonner - 0.442</li>
                </ul>
            </div>
          </div>
          <div>
              <figure class=”minimized”>
                <figcaption>New York Knicks</figcaption>
                <img src="NY-logo.jpg" alt="error">
              </figure>
             <div class="maximized">
              <img src="ny-maximized.jpg" alt="error">
                 <ul>
                    <li>Top scorer: Carmelo Anthony - 28,7 PPG</li>
                    <li>Most rebounds per game: Tyson Chandler - 10.70 TOT</li>
                    <li>Highest three point percentage: Steve Novak - 0.425</li>
                 </ul>
         </div>
 </div>

  2. Instantiate igTileManager

    The following code creates an instance of the igTileManager control with square tiles that are 250 pixels along each side.

    In ASPX:

     @(Html.
   Infragistics().
   ID("dashboard").
   minimizedState(“.minimized”).
   maximizedState(“.maximized”).
   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.

View on GitHub