Version

Creating a Multi-Conditional Template Containing a Default Statement (igTemplating)

Topic Overview

Purpose

This topic demonstrates, with code examples, how to create multi-conditional template with default statement 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 a Multi-Conditional Template Containing a Default Statement

Introduction

In this example multi-conditional template with default statement is created and the result is appended to an html table. In the following example there is check if the age value is below 17, or between 18 and 21. And according to that check two different styles are applied.

Preview

The following screenshot is a preview of the final result. In this example the rows with age value below 17 are with red background, these with age value between 18 and 21 have yellow background and there is default statement which does not apply any extra styles.

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 the Adding igTemplating References topic.

Steps

The following steps demonstrate how to create a multi-conditional template.

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

    1. Add CSS class for the attention row.

      In JavaScript:

       <style type="text/css">
             .rowCriticalAttention
             {
                   background-color: #FF7283;
             }
             .rowAttention
             {
                   background-color: #FFE96D;
             }
       </style>
      
    2. Add sample data and 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: 19}];
       var template = '{{if ${age} < 18 }} <tr class="rowCriticalAttention">' +'<td><b>First Name: </b>${firstName}</td>' +'<td><b>Last Name: </b>${lastName}</td>' +'<td><b>Age: </b>${age}</td></tr>' +
       '{{elseif ${age} >= 18 && ${age} < 21}}' +
       '<tr class="rowAttention"><td><b>First Name: </b>${firstName}</td>' +'<td><b>Last Name: </b>${lastName}</td>' +'<td><b>Age: </b>${age}</td></tr>' +
       '{{else}}' +
       '<tr><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 on the html file to preview the result.

Related Content

Topics

The following topics provide additional information related to this topic.

Samples

The following samples provide additional information related to this topic.

  • Conditional Templates:This sample demonstrates how conditional cell templates are used in a grid using the Infragistics Template Engine. In the following scenario, cells under the Unit Price column have an image arrow up/down. For the purpose of this sample, the ‘Delta Price’ column is created dynamically and is hidden from the user. The up/down images are applied according to the values in hidden column when compared to the values in the Unit Price column. The Infragistics Templating Engine is comparing the values in the Delta Price and Unit Price columns. If the value Delta Price column is greater than the Unit Price value then a green up arrow is rendered, otherwise a red down arrow is rendered in the grid.

View on GitHub