Version

Creating an Alternating Rows Template (igTemplating)

Topic Overview

Purpose

This topic demonstrates how to create alternative row template using the templating engine.

Required background

The following table lists the topics required as a prerequisite to understanding this topic.

In this topic

This topic contains the following sections:

Creating an Alternating Rows Table Template

Introduction

In this example basic substitution template is created and the result is appended to a html table.

Preview

The following screenshot is a preview of the final result.

Prerequisites

To complete the procedure you need the following:

  • An empty html page with reference to the minimal set of needed js files for the templating engine. (For details, refer to Adding igTemplating References )

Steps

The following steps demonstrate how to create an alternating rows template.

  1. Add and apply the row template using the templating engine

    1. Add a CSS class for the attention row:

      In JavaScript:

       <style type="text/css">
       .alternateRow
       {
             background-color: #C0C0C0;
       }
 </style>

    2. Add sample data and a row template to the page:

      In JavaScript:

       <script type="text/javascript">
 var employees = [
 { firstName: "Joseph", lastName: "Sommers", age: 17 },
 {  firstName: "Anna", lastName: "Paterson", age: 25}, 
 {  firstName: "Mark", lastName: "Smith", age: 22},
 {  firstName: "John", lastName: "Rider", age: 35}];
 var template = '{{if $i%2 == 0 }}' +
 '<tr><td><b>First Name: </b>${firstName}</td>' + '<td><b>Last Name: </b>${lastName}</td>' +'<td><b>Age: </b>${age}</td></tr>' +
 '{{else}}' +
 '<tr class="alternateRow">' +'<td><b>First Name: </b>${firstName}</td>' +'<td><b>Last Name: </b>${lastName}</td>' +'<td><b>Age: </b>${age}</td></tr>'+
 '{{/if}}';
 </script>

      In HTML:

       <body>
 <table id="resultTable" style="border: 1px solid #000;"></table>
 </body>

      ​3. Apply the template and append the result to the html table:

      In JavaScript:

       <script type="text/javascript">
 $(document).ready(function () {
       var result = $.ig.tmpl(template, employees);
       $('#resultTable').html(result);
 });
 </script>

  2. (Optional) Verify the result

    Save the file and double click to preview the result. According to the applied condition the even rows will have alternativeRow class applied

Related Content

Topics

The following topics provide additional information related to this topic.

View on GitHub