Available in the OSS Version

Templating Engine - Nested Templates

This sample demonstrates how to create nested templates using the Infragistics Templating Engine.
Show
records
DenzelWashington USA
AngelinaJolie USA
PenelopeCruz Spain
GeorgeClooney USA
First NameLast NameNationalityMovies

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.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" />

    <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>

    <!-- 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>