Available in the OSS Version

Tile Manager - Overview

The igTileManager is a layout control for rendering and arranging data into tiles.

Penne Arrabiata

Lamb Chops

8 lamb chops
2 large crushed garlic cloves
1 tablespoon fresh rosemary leaves
1 teaspoon fresh thyme leaves
3 tablespoons olive oil
1 pinch cayenne pepper
pink Himalayan salt

Tomato Soup

Caesar Salad

Strawberry Sorbet

Tiramisu

This sample is designed for a larger screen size.

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

The tiles are displayed in a responsive grid layout and the control provides corresponding layout configurations for each tile in terms to position (row and column spans) and dimensions (row and column position). See the complete list of samples in the menu.

Code View

Show In JsFiddle

Copy to Clipboard

var options = {
    width: "100%",
    height: "500px",
    marginLeft: 10,
    marginTop: 10,
    dataSource: recipes,
    items: [
        { rowIndex: 0, colIndex: 0, rowSpan: 1, colSpan: 1 },
        { rowIndex: 0, colIndex: 1, rowSpan: 2, colSpan: 2 },
        { rowIndex: 1, colIndex: 0, rowSpan: 1, colSpan: 1 },
        { rowIndex: 2, colIndex: 0, rowSpan: 1, colSpan: 1 },
        { rowIndex: 2, colIndex: 1, rowSpan: 1, colSpan: 1 },
        { rowIndex: 2, colIndex: 2, rowSpan: 1, colSpan: 1 }
    ],
    maximizedTileIndex: 1,
    maximizedState: $("#maximized-state").html(),
    minimizedState: $("#minimized-state").html()
}

$("#dashboard").igTileManager(options);

<div id="dashboard" class="dashboard">
    </div>

.dashboard {         
    color: #2b2b2b;
    position: relative;
    width: 100%;
    height: 500px;
    margin-top: -10px;
    margin-left: -5px;
}

.ui-widget.ui-widget-content.dashboard {
    border: 0;
}

.item-inner-container {
    width:100%;
    height:100%;
    background-repeat:no-repeat;
    background-position: center center;
    background-size: cover;
}

.ig-layout-item, .ui-igtile-inner-container {
    padding: 0;
    margin: 0;
    border: 0;
}

.minimized-title-container {
    display: none;
    background: rgba(255,255,255,0.75);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#b2ffffff,endColorstr=#b2ffffff);
    position:absolute; 
    bottom: 0;
    width: 100%; 
    height: 17%;
}

.max-title-and-ingredients-container, .minimized-title-container {
    font-size: 18px;
    font-family: Calibri;
    overflow: hidden;
}

.minimized-title {
    font-weight: bold;
    padding-left: 5px;
    display: table-cell;
    height: 100%;
    vertical-align: middle;
}

.ig-layout-item.ui-state-hover .minimized-title-container {
    display: table;
}

.max-title-and-ingredients-container {
    height: 100%;
    background: rgba(255,255,255,0.7);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#b2ffffff,endColorstr=#b2ffffff);
    padding: 5px 10px;
    box-sizing: border-box;
}

h3 {
    font-size: 26px;
}

.ingredients {
    list-style-type: none;
    padding-top: 2px;
}

.ui-igtilemanager {
    overflow: initial;
}

@media all and (max-width: 480px) {
    h3 {
        font-size: 22px;
    }

    .max-title-and-ingredients-container, .minimized-title-container {
        font-size: 17px;
    }
}

@media all and (max-width: 360px) {
    .max-title-and-ingredients-container, .minimized-title-container {
        font-size: 15px;
    }
}

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></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/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 src="/data-files/recipes.js"></script>
</head>
<body>
    <style type="text/css">
        .dashboard {         
            color: #2b2b2b;
            position: relative;
            width: 100%;
            height: 500px;
            margin-top: -10px;
            margin-left: -5px;
        }

        .ui-widget.ui-widget-content.dashboard {
            border: 0;
        }

        .item-inner-container {
            width:100%;
            height:100%;
            background-repeat:no-repeat;
            background-position: center center;
            background-size: cover;
        }

        .ig-layout-item, .ui-igtile-inner-container {
            padding: 0;
            margin: 0;
            border: 0;
        }

        .minimized-title-container {
            display: none;
            background: rgba(255,255,255,0.75);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#b2ffffff,endColorstr=#b2ffffff);
            position:absolute; 
            bottom: 0;
            width: 100%; 
            height: 17%;
        }

        .max-title-and-ingredients-container, .minimized-title-container {
            font-size: 18px;
            font-family: Calibri;
            overflow: hidden;
        }

        .minimized-title {
            font-weight: bold;
            padding-left: 5px;
            display: table-cell;
            height: 100%;
            vertical-align: middle;
        }

        .ig-layout-item.ui-state-hover .minimized-title-container {
            display: table;
        }

        .max-title-and-ingredients-container {
            height: 100%;
            background: rgba(255,255,255,0.7);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#b2ffffff,endColorstr=#b2ffffff);
            padding: 5px 10px;
            box-sizing: border-box;
        }

        h3 {
            font-size: 26px;
        }

        .ingredients {
            list-style-type: none;
            padding-top: 2px;
        }

        .ui-igtilemanager {
            overflow: initial;
        }

        @media all and (max-width: 480px) {
            h3 {
                font-size: 22px;
            }

            .max-title-and-ingredients-container, .minimized-title-container {
                font-size: 17px;
            }
        }

        @media all and (max-width: 360px) {
            .max-title-and-ingredients-container, .minimized-title-container {
                font-size: 15px;
            }
        }
    </style>
    
    <div id="dashboard" class="dashboard">
    </div>

    <script type="text/javascript">
        $(function () {            
            var options = {
                width: "100%",
                height: "500px",
                marginLeft: 10,
                marginTop: 10,
                dataSource: recipes,
                items: [
                    { rowIndex: 0, colIndex: 0, rowSpan: 1, colSpan: 1 },
                    { rowIndex: 0, colIndex: 1, rowSpan: 2, colSpan: 2 },
                    { rowIndex: 1, colIndex: 0, rowSpan: 1, colSpan: 1 },
                    { rowIndex: 2, colIndex: 0, rowSpan: 1, colSpan: 1 },
                    { rowIndex: 2, colIndex: 1, rowSpan: 1, colSpan: 1 },
                    { rowIndex: 2, colIndex: 2, rowSpan: 1, colSpan: 1 }
                ],
                maximizedTileIndex: 1,
                maximizedState: $("#maximized-state").html(),
                minimizedState: $("#minimized-state").html()
            }
            
            $("#dashboard").igTileManager(options);
        });
    </script>

    <script id="maximized-state" type="text/template">
        <div class="item-inner-container" style="background-image: url(${picture}); 
            filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='${picture}',sizingMethod='scale');">
            <div class="max-title-and-ingredients-container">
                <h3>${name}</h3>
                <ul class="ingredients">
                    {{each ${ingredients} }}
                        <li>${ingredients.description}</li>
                    {{/each}}
                </ul>
            </div>
        </div>
    </script>

    <script id="minimized-state" type="text/template">
        <div class="item-inner-container" style="background-image: url(${picture});
            filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='${picture}',sizingMethod='scale');">
            <div class="minimized-title-container">
                <div class="minimized-title">
                    ${name}
                </div>
            </div>
        </div>
    </script>
</body>
</html>

                    var recipes = [
    {
        name: "Penne Arrabiata",
        picture: "../../images/samples/tile-manager/Penne_Arrabiata.jpg",
        ingredients: [
            { description: "400g penne pasta" },
            { description: "1/3 cup extra-virgin olive oil" },
            { description: "1 crushed garlic clove" },
            { description: "1 finely chopped onion" },
            { description: "800g can diced tomatoes" },
            { description: "1 chopped red chilly" },
            { description: "2 tablespoons small basil leaves" },
            { description: "2 teaspoons sugar" }
        ]
    },    
    {
        name: "Lamb Chops",
        picture: "../../images/samples/tile-manager/Lamb_Chops.jpg",
        ingredients: [
            { description: "8 lamb chops" },
            { description: "2 large crushed garlic cloves" },
            { description: "1 tablespoon fresh rosemary leaves" },
            { description: "1 teaspoon fresh thyme leaves" },
            { description: "3 tablespoons olive oil" },
            { description: "1 pinch cayenne pepper" },
            { description: "pink Himalayan salt" }
        ]
    },
    {
        name: "Tomato Soup",
        picture: "../../images/samples/tile-manager/Tomato_Soup.jpg",
        ingredients: [
            { description: "1 kilogram plum tomatoes" },
            { description: "1 tablespoon tomato paste" },
            { description: "1 cup chopped onions" },
            { description: "1/2 cup chopped celery" },
            { description: "1 tablespoon sliced fresh basil" },
            { description: "salt and black pepper" },
            { description: "crème fraiche and fresh basil for decoration" }
        ]
    },
    {
        name: "Caesar Salad",
        picture: "../../images/samples/tile-manager/Caesar_Salad.jpg",
        ingredients: [
            { description: "1 large lettuce" },
            { description: "2 skinless, boneless chicken breasts" },
            { description: "1 ciabatta loaf" },
            { description: "4 tablespoons olive oil" },
            { description: "1 garlic clove" },
            { description: "5 tablespoons mayonnaise" },
            { description: "1 tablespoon white wine vinegar" },
            { description: "2 tablespoons grated parmesan" },
        ]
    },    
    {
        name: "Strawberry Sorbet",
        picture: "../../images/samples/tile-manager/Strawberry_Sorbet.jpg",
        ingredients: [
            { description: "2 kilograms quartered, hulled strawberries " },
            { description: "2 cups water" },
            { description: "2 cups sugar" },
            { description: "1/4 cup fresh lime juice" },
            { description: "1/4 cup light corn syrup" },
            { description: "mint leaves for decoration" }
        ]
    },
    {
        name: "Tiramisu",
        picture: "../../images/samples/tile-manager/Tiramisu.jpg",
        ingredients: [
            { description: "6 egg yolks" },
            { description: "4 tablespoons sugar" },
            { description: "1 package mascarpone cheese" },
            { description: "2 cups cooled strong espresso" },
            { description: "1 package ladyfingers" },
            { description: "3 tablespoons of unsweetened cocoa" }
        ]
    }
];

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Ignite UI for jQuery Required Combined CSS Files -->
    <link href="/igniteui/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
    <link href="/igniteui/css/structure/infragistics.css" rel="stylesheet" />
</head>
<body>

    <my-app>Loading...</my-app>

    <!-- 1. Load libraries -->
    <script src="/js/modernizr.min.js"></script>
    <script src="/js/jquery.min.js"></script>
    <script src="/js/jquery-ui.min.js"></script>
    <!-- IE required polyfills, in this exact order -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.0/es6-shim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.20/system-polyfills.js"></script>
    <script src="https://unpkg.com/angular2/es6/dev/src/testing/shims_for_IE.js"></script>

    <script src="https://unpkg.com/zone.js@0.6.23?main=browser"></script>
    <script src="https://unpkg.com/typescript@2.0.2/lib/typescript.js"></script>
    <script src="https://unpkg.com/reflect-metadata@0.1.3"></script>
    <script src="https://unpkg.com/systemjs@0.19.27/dist/system.src.js"></script>
    <!-- Ignite UI for jQuery Required Combined JavaScript Files -->
    <!-- Ignite UI for jQuery Required Combined JavaScript Files -->
    <script src="/igniteui/js/infragistics.core.js"></script>
    <script src="/igniteui/js/infragistics.lob.js"></script>
    <script src="/js-data/recipes"></script>
    <script>
        System.config( {
            paths: {
                'npm:': 'https://unpkg.com/'
            },
            map: {
                '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
                '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
                '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
                '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
                '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
                '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
                '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
                '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
                'igniteui-angular-wrappers': 'npm:igniteui-angular-wrappers',
                'rxjs': 'npm:rxjs'
            },
            // packages tells the System loader how to load when no filename and/or no extension
            packages: {
                rxjs: {
                    defaultExtension: 'js'
                },
                'igniteui-angular-wrappers': {
                    main: './index.js',
                    defaultExtension: 'js'
                }
            },
            transpiler: 'typescript',
            typescriptOptions: { emitDecoratorMetadata: true }
        } );

        System.import( 'basic-usage.ts' ).then( null, console.error.bind( console ) );
    </script>
</body>
</html>

import { Component, NgModule } from '@angular/core';
import { IgTileManagerComponent } from 'igniteui-angular-wrappers';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic }	from '@angular/platform-browser-dynamic';

declare var jQuery: any;
declare var northwindProducts: any[];

@Component({
    selector: 'my-app',
    template: `
        <ig-tile-manager widgetId="dashboard" [(options)]="options">
        </ig-tile-manager>
        <script id="maximized-state" type="text/template">
            <div class="item-inner-container" style="background-image: url(${picture});
            filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='${picture}',sizingMethod='scale');">
                <div class="max-title-and-ingredients-container">
                    <h3>${name}</h3>
                    <ul class="ingredients">
                        {{each ${ingredients} }}
                        <li>${ingredients.description}</li>
                        {{/each}}
                    </ul>
                </div>
            </div>
        </script>
        <script id="minimized-state" type="text/template">
            <div class="item-inner-container" style="background-image: url(${picture});
            filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='${picture}',sizingMethod='scale');">
                <div class="minimized-title-container">
                    <div class="minimized-title">
                        ${name}
                    </div>
                </div>
            </div>
        </script>
    `
})
export class AppComponent {
    private options: IgTileManager;

    constructor() {
		this.options = {
                width: "100%",
                height: "500px",
                marginLeft: 10,
                marginTop: 10,
                dataSource: recipes,
                items: [
                    { rowIndex: 0, colIndex: 0, rowSpan: 1, colSpan: 1 },
                    { rowIndex: 0, colIndex: 1, rowSpan: 2, colSpan: 2 },
                    { rowIndex: 1, colIndex: 0, rowSpan: 1, colSpan: 1 },
                    { rowIndex: 2, colIndex: 0, rowSpan: 1, colSpan: 1 },
                    { rowIndex: 2, colIndex: 1, rowSpan: 1, colSpan: 1 },
                    { rowIndex: 2, colIndex: 2, rowSpan: 1, colSpan: 1 }
                ],
                maximizedTileIndex: 1,
                maximizedState: $("#maximized-state").html(),
                minimizedState: $("#minimized-state").html()
		};
    }
}

@NgModule({
    bootstraps: [AppComponent],
    declarations: [AppComponent, IgTileManagerComponent],
    imports: [BrowserModule]
})
export class AppModule { }

platformBrowserDynamic().bootstrapModule(AppModule);

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Ignite UI for jQuery Required Combined CSS Files -->
    <link href="/igniteui/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
    <link href="/igniteui/css/structure/infragistics.css" rel="stylesheet" />
    <!-- 1. Load libraries -->
    <script src="/js/modernizr.min.js"></script>
    <script src="/js/jquery.min.js"></script>
    <script src="/js/jquery-ui.min.js"></script>
    <!-- ReactJS library -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.16/browser.js"></script>
    <!-- Ignite UI for jQuery Required Combined JavaScript Files -->
    <script src="/igniteui/js/infragistics.core.js"></script>
    <script src="/igniteui/js/infragistics.lob.js"></script>
    <script src="/js-data/recipes"></script>
    <!-- Ignite UI for jQuery ReactJS Files -->
    <script src="https://unpkg.com/igniteui-react@1.0.1/igniteui-react.js"></script>
</head>
<body>
    <div id="app">
        <script type="text/babel">
            var App = React.createClass({
                render: function() {

                var options = {
                    width: "100%",
                    height: "500px",
                    marginLeft: 10,
                    marginTop: 10,
                    dataSource: recipes,
                    items: [
                        { rowIndex: 0, colIndex: 0, rowSpan: 1, colSpan: 1 },
                        { rowIndex: 0, colIndex: 1, rowSpan: 2, colSpan: 2 },
                        { rowIndex: 1, colIndex: 0, rowSpan: 1, colSpan: 1 },
                        { rowIndex: 2, colIndex: 0, rowSpan: 1, colSpan: 1 },
                        { rowIndex: 2, colIndex: 1, rowSpan: 1, colSpan: 1 },
                        { rowIndex: 2, colIndex: 2, rowSpan: 1, colSpan: 1 }
                    ],
                    maximizedTileIndex: 1,
                    maximizedState: $("#maximized-state").html(),
                    minimizedState: $("#minimized-state").html()
                }

                return (
                    <div><IgTileManager id="dashboard" options={options} /></div>
                );
            }
        });

        ReactDOM.render(
            <App />,
            document.getElementById("app")
        );
        </script>

        <script id="maximized-state" type="text/template">
            <div class="item-inner-container" style="background-image: url(${picture});
            filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='${picture}',sizingMethod='scale');">
                <div class="max-title-and-ingredients-container">
                    <h3>${name}</h3>
                    <ul class="ingredients">
                        {{each ${ingredients} }}
                        <li>${ingredients.description}</li>
                        {{/each}}
                    </ul>
                </div>
            </div>
        </script>

        <script id="minimized-state" type="text/template">
            <div class="item-inner-container" style="background-image: url(${picture});
            filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='${picture}',sizingMethod='scale');">
                <div class="minimized-title-container">
                    <div class="minimized-title">
                        ${name}
                    </div>
                </div>
            </div>
        </script>
    </div>
</body>
</html>

Ignite UI for jQuery | Samples

Search Results

Tile Manager - Overview

Lamb Chops

Code View