Available in the OSS Version
Tile Manager - TypeScript
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.
This sample demonstrates how to use the Tile Manager control in TypeScript with configuration that defines a leading tile.
The leading tile swaps with the newly selected one. Different categories can be chosen with the tabs positioned above the tiles.
Code View
Copy to Clipboard
<!DOCTYPE html>
<html>
<head>
<title></title>
<!-- Ignite UI for jQuery Required Combined CSS Files -->
<link href="http://cdn-na.infragistics.com/igniteui/2023.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="http://cdn-na.infragistics.com/igniteui/2023.2/latest/css/structure/infragistics.css" rel="stylesheet" />
<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/2023.2/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/infragistics.lob.js"></script>
<style type="text/css">
body {
font-family: 'Segoe UI', 'Arial', 'Helvetica', 'sans-serif';
}
ul {
text-decoration: none;
padding: 0;
margin: 0;
list-style: none;
}
.ui-igtile-maximized .ui-igtile-inner-container {overflow: hidden;}
#car-tabs {
margin: auto;
}
.dashboard {
font-size: 0.85em!important;
position: relative;
height: 660px;
}
.dashboard img {
width: 100%;
}
.dashboard figure {
margin:0;
}
.dashboard figcaption {
font-size: 1.1em;
background-color: #454545;
color: #fff;
padding: 10px 0 10px 10px;
}
.dashboard .ui-igtile-maximized figcaption {
background-color: #2cbdf9;
-webkit-transition:0.5s;
}
.dashboard div ul {
border: 1px solid #ececec;
padding: 5px 5px 10px 5px;
-webkit-transition:0.5s;
}
.dashboard div ul li:nth-child(n+2):before {
content: "• ";
color: #2cbdf9;
}
.dashboard div ul li:first-child {
color: #2cbdf9;
}
#car-tabs.ui-tabs .ui-tabs-panel, #car-tabs.ui-tabs-nav, #car-tabs.ui-tabs .ui-tabs-nav li.ui-state-default {
border: none;
padding: 0;
}
#car-tabs.ui-tabs .ui-tabs-nav li.ui-state-active a {
background-color: #2cbdf9!important;
}
#car-tabs.ui-tabs .ui-tabs-nav li.ui-state-default a {
background-color: #95defc;
}
#car-tabs.ui-tabs .ui-tabs-nav li.ui-state-hover a {
background-color: #6bd1fb;
}
#car-tabs.ui-tabs-anchor {
text-shadow: none;
color: #fff!important;
}
#car-tabs.ui-tabs-anchor:hover {
text-decoration: underline;
}
#car-tabs.ui-tabs {
border-radius: 0;
}
h1.hOne {
margin: 0;
clear: none;
float: none;
font-size: 2em;
}
</style>
</head>
<body>
<h1 class="hOne">Infragistics Car Dealership</h1>
<h3>Choose a car brand to browse</h3>
<div id="car-tabs">
<ul>
<li><a href="#magarcedesDashboard">Magarcedes</a></li>
<li><a href="#hoidaDashboard">Hoida</a></li>
<li><a href="#pausheDashboard">Paushe</a></li>
</ul>
<div id="magarcedesDashboard" class="dashboard"></div>
<div id="hoidaDashboard" class="dashboard"></div>
<div id="pausheDashboard" class="dashboard"></div>
</div>
<script src="/TypeScriptSamples/tile-manager/typescript.js"></script>
</body>
</html>
/// <reference path="/js/typings/jquery.d.ts" />
/// <reference path="/js/typings/jqueryui.d.ts" />
/// <reference path="/js/typings/igniteui.d.ts" />
class Info {
description: string
constructor(_description: string) {
this.description = _description;
}
}
class CarData {
name: string;
picture: string;
priceRange: string;
extras: Info[];
constructor(_name: string, _picture: string, _priceRange: string, _extras: Info[]) {
this.name = _name;
this.picture = _picture;
this.priceRange = _priceRange;
this.extras = _extras;
}
addExtra(_extra) {
this.extras.push(_extra);
}
}
var Magarcedes: CarData[] = [];
Magarcedes.push(new CarData("2013 LSL AMG", "/images/samples/tile-manager/car-dealership/shutterstock_139519967.jpg",
"$199,500 - $206,000", [new Info("0-100 in 3.8 seconds"), new Info("Top speed: 317 km/h")]));
Magarcedes.push(new CarData("2013 363 AMG", "/images/samples/tile-manager/car-dealership/shutterstock_38284540.jpg",
"$57,130 - $61,430", [new Info("0-60 in 4.4 seconds"), new Info("Top speed: 250 km/h")]));
Magarcedes.push(new CarData("2013 T350", "/images/samples/tile-manager/car-dealership/shutterstock_25369924.jpg",
"$47,542 - $51,120", [new Info("4MATIC All Wheel Drive"), new Info("0-60 in 5.5 seconds"), new Info("3.5l v6 engine")]));
Magarcedes.push(new CarData("2013 500S", "/images/samples/tile-manager/car-dealership/shutterstock_4417342.jpg",
"$92,350 - $212,000", [new Info("Night View Assist"), new Info("Parking Distance Control")]));
Magarcedes.push(new CarData("2013 M350L", "/images/samples/tile-manager/car-dealership/shutterstock_4028761.jpg",
"$47,681 - $51,270", [new Info("3.0L BlueTEC turbodiesel v6 engine"), new Info("4MATIC All Wheel Drive")]));
Magarcedes.push(new CarData("2013 CSL", "/images/samples/tile-manager/car-dealership/shutterstock_2564520.jpg",
"$74,500 - $84,556", [new Info("4.6L v8 engine"), new Info("0-60 in 5.05 seconds")]));
var Hoida: CarData[] = [];
Hoida.push(new CarData("2013 Candy", "/images/samples/tile-manager/car-dealership/shutterstock_57034834.jpg",
"$21,661 - $29,404", [new Info("Gas I4 2.5L engine"), new Info("Highway fuel efficiency of 35 mpg")]));
Hoida.push(new CarData("2013 RA4V 4WD", "/images/samples/tile-manager/car-dealership/shutterstock_117299389.jpg",
"$23,301 - $28,232", [new Info("All Wheel Drive"), new Info("Highway fuel efficiency of 29 mpg")]));
Hoida.push(new CarData("2013 Coralla", "/images/samples/tile-manager/car-dealership/shutterstock_32589022.jpg",
"$16,191 - $20,297", [new Info("Gas I4 1.8L engine"), new Info("Highway fuel efficiency of 34 mpg")]));
Hoida.push(new CarData("2013 Pruis C", "/images/samples/tile-manager/car-dealership/shutterstock_134383163.jpg",
"$19,058 - $23,163", [new Info("Gas/Electric I4 1.5L engine"), new Info("Highway fuel efficiency of 46 mpg")]));
Hoida.push(new CarData("2013 Cruiser", "/images/samples/tile-manager/car-dealership/shutterstock_60821281.jpg",
"$73,676 - $73,676", [new Info("Gas V8 5.7L engine"), new Info("All Wheel Drive")]));
Hoida.push(new CarData("2013 TLC", "/images/samples/tile-manager/car-dealership/shutterstock_27395866.jpg",
"$25,566 - $47,651", [new Info("Gas V8 5.7L engine"), new Info("Highway fuel efficiency of 17 mpg")]));
var Paushe: CarData[] = [];
Paushe.push(new CarData("2013 CST", "/images/samples/tile-manager/car-dealership/shutterstock_38288989.jpg",
"$39,095 - $59,090", [new Info("Available All Wheel Drive"), new Info("Available touch-screen glide-up navigation with voice recognition"),
new Info("Leather seating surfaces"), new Info("Adaptive Remote Start")]));
Paushe.push(new CarData("2013 CST-V", "/images/samples/tile-manager/car-dealership/shutterstock_32949850.jpg",
"$64,515 - $74,770", [new Info("0-100 in 4.0 seconds"), new Info("G-meter measures lateral acceleration")]));
Paushe.push(new CarData("2013 ECS", "/images/samples/tile-manager/car-dealership/shutterstock_7391134.jpg",
"$63,170 - $82,875", [new Info("Heated and cooled front seats"), new Info("Available Magnetic Ride Control suspension system")]));
Paushe.push(new CarData("2013 AST", "/images/samples/tile-manager/car-dealership/shutterstock_23082346.jpg",
"$39,095 - $59,090", [new Info("Available all-new 272 HP 2.0L turbocharged engine"), new Info("Available navigation")]));
Paushe.push(new CarData("2013 SXR Crossover", "/images/samples/tile-manager/car-dealership/shutterstock_134383139.jpg",
"$37,330 - $58,220", [new Info("Available UltraView sunroof"), new Info("Available All Wheel Drive")]));
Paushe.push(new CarData("2013 CST-V Wagon", "/images/samples/tile-manager/car-dealership/shutterstock_117299326.jpg",
"$64,515 - $75,345", [new Info("Power liftgate with memory height"), new Info("Rearview backup camera")]));
var Cars: CarData[][] = [];
Cars.push(Magarcedes);
Cars.push(Hoida);
Cars.push(Paushe);
$(function () {
var activated: boolean[] = [false, false, false, false],
options: IgTileManager = {
columnWidth: 210,
columnHeight: 210,
marginLeft: 10,
marginTop: 10,
dataSource: Cars,
items: [
{ rowIndex: 0, colIndex: 0, rowSpan: 2, colSpan: 2 },
{ rowIndex: 0, colIndex: 2, rowSpan: 1, colSpan: 1 },
{ rowIndex: 1, colIndex: 2, 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: 0,
maximizedState: '<figure><figcaption>${name}</figcaption><img src="${picture}" title="${Name}" alt="error" /></figure><ul><li>Price: ${priceRange}</li>' +
'{{each ${extras} }}<li>${extras.description}</li>{{/each}}</ul>',
minimizedState: '<figure><figcaption>${name}</figcaption><img src="${picture}" title="${Name}" alt="error" />'
};
// First time initialization of the tab that will be shown on page load
options.dataSource = Cars[0];
activated[0] = true;
$('#magarcedesDashboard').igTileManager(options);
var tabOptions: JQueryUI.TabsOptions = {
activate: function (event, ui) {
var index = ui.newTab.index();
if (!activated[index]) {
options.dataSource = Cars[index];
ui.newPanel.igTileManager(options);
activated[index] = true;
} else {
ui.newPanel.igTileManager('reflow');
}
}
}
$('#car-tabs').tabs(tabOptions);
});