Available in the OSS Version
Tile Manager - Data Binding
This sample demonstrates binding the Tile Manager control to JSON data source.
This sample uses CTP (Community Technical Preview) features. The API and behavior may change when these features are released with full support.
This sample is designed for a larger screen size.
On mobile, try rotating your screen, view full size, or email to another device.
Code View
Copy to Clipboard
<!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.1/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="http://cdn-na.infragistics.com/igniteui/2024.1/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.1/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2024.1/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>