Available in the OSS Version
Templating Engine - Nested Templates
This sample demonstrates how to create nested templates using the Infragistics Templating Engine.
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.
In this sample, each feature of the Infragistics Templating Engine is used to iterate through the movies collection from the data source. An unordered list is created as an output in the last column.
Code View
Copy to Clipboard
<!doctype html>
<html lang="en" class="no-js">
<head>
<title>IgniteUI Samples</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" />
<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>
<!-- Ignite UI for jQuery data file required for this sample -->
<script src="/data-files/actors.js" type="text/javascript"></script>
<script id="colTmpl" type="text/template">
<div class='tree'>
<ul>
{{each ${movies} }}
<li>${movies.name}
<ul>
<li>Genre: ${movies.genre}</li>
<li>Year: ${movies.year}</li>
<li><a>
<span class='ratingLabel' style='float:left'>Rating:</span>
<span class='rating'>${movies.rating}</span>
</a>
</li>
<li class='clear'>Languages: ${movies.languages}</li>
<li>Subtitles: ${movies.subtitles}</li>
</ul>
{{/each}}
</ul>
</div>
</script>
<style type="text/css">
.clear {
clear: both;
}
.ui-igrating {
float: left;
}
.ratingLabel {
float: left;
margin-left: 3px;
margin-right: 5px;
}
</style>
</head>
<body>
<script type="text/javascript">
$(function () {
var i = 0, currentValue, limit,
headerTextValues = ["First Name", "Last Name", "Nationality", "Movies"],
imagesRoot = "/images/samples/templating-engine/multiConditionalColTemplate";
$("#resultGrid").igGrid({
dataSource: actors,
width: "100%",
autoGenarateColumns: false,
columns: [
{ headerText: headerTextValues[0], key: "firstName", width: 100 },
{ headerText: headerTextValues[1], key: "lastName", width: 200 },
{ headerText: headerTextValues[2], key: "nationality", width: 100, template: "<img width='20' height='15' src='" + imagesRoot + "/${nationality.key}.gif' /> ${nationality.value} " },
{ headerText: headerTextValues[3], key: "movies", width: 300 , template: $( "#colTmpl" ).html()}
],
rendered: function () {
initializeInnerControls();
},
features: [
{
name: "Paging",
type: "local",
pageSize: 4,
pageSizeList: [2, 4, 7],
pageSizeChanged: function () {
initializeInnerControls();
},
pageIndexChanged: function () {
initializeInnerControls();
}
}
]
});
function initializeInnerControls() {
$(".tree").igTree({ hotTracking: false });
limit = $('.rating').length;
for (i = 0; i < limit; i++) {
currentValue = parseFloat($($('.rating')[i]).html());
$($('.rating')[i]).igRating({
voteCount: 10,
value: currentValue,
valueAsPercent: false,
precision: "exact"
});
}
}
});
</script>
<table id="resultGrid"></table>
</body>
</html>
var actors = [{
firstName: "Denzel",
lastName: "Washington",
nationality: {key: "USA", value: "USA"},
movies: [{
name: "American Gangster",
year: 2007,
genre: "Biography, Crime, Drama",
rating: 7.9,
languages: "English, German",
subtitles: "Japanese, English"
}, {
name: "Man on Fire",
year: 2004,
genre: "Crime, Drama, Thriller",
rating: 7.7,
languages: "English, Japanese",
subtitles: "English, Indian"
}, {
name: "Out of Time",
year: 2003,
genre: "Crime, Drama, Thriller",
rating: 6.5,
languages: "English",
subtitles: "English, Japanese"
}, {
name: "Training Day",
year: 2001,
genre: "Crime, Drama, Thriller",
rating: 7.6,
languages: "English",
subtitles: "English, German"
}]
}, {
firstName: "Angelina",
lastName: "Jolie",
nationality: {key: "USA", value: "USA"},
movies: [{
name: "In the Land of Blood and Honey",
year: 2011,
genre: "Drama, Romance, War",
rating: 3.2,
languages: "English",
subtitles: "English, French"
}, {
name: "Kung Fu Panda 2",
year: 2011,
genre: "Animation, Action, Adventure",
rating: 7.4,
languages: "English, Japanese",
subtitles: "Spanish, French"
}, {
name: "The Tourist",
year: 2010,
genre: "Action, Mistery, Romance",
rating: 5.9,
languages: "English",
subtitles: "Spanish, Swedish"
}]
}, {
firstName: "Penelope",
lastName: "Cruz",
nationality: {key: "Spain", value: "Spain"},
movies: [{
name: "Sahara",
year: 2005,
genre: "Action, Adventure, Comedy",
rating: 5.9,
languages: "English, Spanish",
subtitles: "Japanese, French"
}, {
name: "Vanilla Sky",
year: 2001,
genre: "Mystery, Romance, Sci-Fi",
rating: 5.9,
languages: "Spanish",
subtitles: "English, Japanese"
}]
}, {
firstName: "George",
lastName: "Clooney",
nationality: {key: "USA", value: "USA"},
movies: [{
name: "Ocean's Thirteen",
year: 2007,
genre: "Crime, Thriller",
rating: 6.9,
languages: "English",
subtitles: "Spanish, French"
}, {
name: "Syriana",
year: 2005,
genre: "Drama, Thriller",
rating: 7.0,
languages: "English",
subtitles: "French, Japanese"
}, {
name: "Good Night, and Good Luck",
year: 2005,
genre: "Drama, History",
rating: 7.6,
languages: "English, German",
subtitles: "German, Japanese"
}]
}, {
firstName: "Julia",
lastName: "Roberts",
nationality: {key: "USA", value: "USA"},
movies: [{
name: "Eat Pray Love",
year: 2010,
genre: "Drama, Romance",
rating: 5.3,
languages: "English, German",
subtitles: "Spanish, French"
}, {
name: "Notting Hill",
year: 1999,
genre: "Comedy, Romance",
rating: 6.9,
languages: "English",
subtitles: "English, Indian"
}
]
}, {
firstName: "Jason",
lastName: "Statham",
nationality: {key: "UK", value: "UK"},
movies: [{
name: "The Italian Job",
year: 2003,
genre: "Action, Crime, Thriller",
rating: 6.9,
languages: "Italian, English",
subtitles: "German, French"
}, {
name: "The Transporter",
year: 2002,
genre: "Action, Crime, Thriller",
rating: 6.7,
languages: "English",
subtitles: "French, Japanese"
}, {
name: "High Voltage",
year: 2009,
genre: "Action, Comedy, Crime",
rating: 6.2,
languages: "English",
subtitles: "Spanish, Japanese"
}]
}, {
firstName: "Sandra",
lastName: "Bullock",
nationality: {key: "USA", value: "USA"},
movies: [{
name: "The Blind Side",
year: 2009,
genre: "Biography, Drama, Sport",
rating: 7.6,
languages: "English",
subtitles: "English, French"
}, {
name: "Murder by Numbers",
year: 2002,
genre: "Crime, Drama, Thriller",
rating: 5.9,
languages: "English",
subtitles: "English, Spanish"
}
]
}];