Available in the OSS Version
Templating Engine - Conditional Templates
This sample demonstrates how conditional cell templates are used in a grid 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, 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 Infragistics Templating Engine compares the values in the Delta Price and Unit Price columns. If the value in the Delta Price column is greater than the Unit Price value, a green up arrow is rendered; if the value in the Unit Price column is greater, a red down arrow is rendered in the grid.
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/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>
<!-- Ignite UI for jQuery data file required for this sample -->
<script src="/data-files/northwind-products.js" type="text/javascript"></script>
<script id="colTmpl" type="text/template">
$ ${UnitPrice}
{{if parseInt(${UnitPrice}) >= parseInt(${DeltaPrice}) }}
<img width='10' height='15' src= '/images/samples/templating-engine/colTemplateWithConditionalCell/arrowUp.gif' />
{{else}}
<img width='10' height='15' src= '/images/samples/templating-engine/colTemplateWithConditionalCell/arrowDown.gif' />
{{/if}}
</script>
</head>
<body>
<script type="text/javascript">
$(function () {
var headerTextValues = ["Product Name", "Unit Price", "Units In Stock", "Units On Order"];
$('#resultGrid').igGrid({
dataSource: northwindProducts,
responseDataKey: "results",
dataSourceType: "json",
width: "100%",
autoGenerateColumns: false,
columns: [
{ headerText: headerTextValues[0], key: "ProductName", width: 300 },
{ headerText: headerTextValues[1], key: "UnitPrice", type: 'number', width: 150, template: $( "#colTmpl" ).html() },
{ headerText: headerTextValues[2], key: "UnitsInStock", width: 125 },
{ headerText: headerTextValues[3], key: "UnitsOnOrder", width: 125 },
{ headerText: " ", key: "DeltaPrice", hidden: true }
],
dataBinding: function (evt, ui) {
var ds = ui.owner.options.dataSource.results;
$.each(ds, function (index, el) {
if (Math.random() > 0.5) {
el["DeltaPrice"] = parseFloat(el.UnitPrice) + 2.00;
} else {
el["DeltaPrice"] = parseFloat(el.UnitPrice) - 2.00;
}
});
},
features: [
{
name: "Paging",
type: "local",
pageSize: 8,
pageSizeList: [4, 8, 12, 16, 20]
}
]
});
});
</script>
<table id="resultGrid"></table>
</body>
</html>
var northwindProducts = {
"results": [{
"__metadata": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Products(1)",
"type": "NorthwindModel.Product"
},
"ProductID": 1,
"ProductName": "Chai",
"SupplierID": 1,
"CategoryID": 1,
"QuantityPerUnit": "10 boxes x 20 bags",
"UnitPrice": "18.0000",
"UnitsInStock": 39,
"UnitsOnOrder": 0,
"ReorderLevel": 10,
"Discontinued": false,
"Category": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Products(1)/Category"
}
},
"Order_Details": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Products(1)/Order_Details"
}
},
"Supplier": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Products(1)/Supplier"
}
}
}, {
"__metadata": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Products(2)",
"type": "NorthwindModel.Product"
},
"ProductID": 2,
"ProductName": "Chang",
"SupplierID": 1,
"CategoryID": 1,
"QuantityPerUnit": "24 - 12 oz bottles",
"UnitPrice": "19.0000",
"UnitsInStock": 17,
"UnitsOnOrder": 40,
"ReorderLevel": 25,
"Discontinued": false,
"Category": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Products(2)/Category"
}
},
"Order_Details": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Products(2)/Order_Details"
}
},
"Supplier": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Products(2)/Supplier"
}
}
}, {
"__metadata": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Products(3)",
"type": "NorthwindModel.Product"
},
"ProductID": 3,
"ProductName": "Aniseed Syrup",
"SupplierID": 1,
"CategoryID": 2,
"QuantityPerUnit": "12 - 550 ml bottles",
"UnitPrice": "10.0000",
"UnitsInStock": 13,
"UnitsOnOrder": 70,
"ReorderLevel": 25,
"Discontinued": false,
"Category": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Products(3)/Category"
}
},
"Order_Details": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Products(3)/Order_Details"
}
},
"Supplier": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Products(3)/Supplier"
}
}
}, {
"__metadata": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Products(4)",
"type": "NorthwindModel.Product"
},
"ProductID": 4,
"ProductName": "Chef Anton's Cajun Seasoning",
"SupplierID": 2,
"CategoryID": 2,
"QuantityPerUnit": "48 - 6 oz jars",
"UnitPrice": "22.0000",
"UnitsInStock": 53,
"UnitsOnOrder": 0,
"ReorderLevel": 0,
"Discontinued": false,
"Category": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Products(4)/Category"
}
},
"Order_Details": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Products(4)/Order_Details"
}
},
"Supplier": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Products(4)/Supplier"
}
}
}, {
"__metadata": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Products(5)",
"type": "NorthwindModel.Product"
},
"ProductID": 5,
"ProductName": "Chef Anton's Gumbo Mix",
"SupplierID": 2,
"CategoryID": 2,
"QuantityPerUnit": "36 boxes",
"UnitPrice": "21.3500",
"UnitsInStock": 0,
"UnitsOnOrder": 0,
"ReorderLevel": 0,
"Discontinued": true,
"Category": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Products(5)/Category"
}
},
"Order_Details": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Products(5)/Order_Details"
}
},
"Supplier": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Products(5)/Supplier"
}
}
}, {
"__metadata": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Products(6)",
"type": "NorthwindModel.Product"
},
"ProductID": 6,
"ProductName": "Grandma's Boysenberry Spread",
"SupplierID": 3,
"CategoryID": 2,
"QuantityPerUnit": "12 - 8 oz jars",
"UnitPrice": "25.0000",
"UnitsInStock": 120,
"UnitsOnOrder": 0,
"ReorderLevel": 25,
"Discontinued": false,
"Category": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Products(6)/Category"
}
},
"Order_Details": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Products(6)/Order_Details"
}
},
"Supplier": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Products(6)/Supplier"
}
}
}, {
"__metadata": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Products(7)",
"type": "NorthwindModel.Product"
},
"ProductID": 7,
"ProductName": "Uncle Bob's Organic Dried Pears",
"SupplierID": 3,
"CategoryID": 7,
"QuantityPerUnit": "12 - 1 lb pkgs.",
"UnitPrice": "30.0000",
"UnitsInStock": 15,
"UnitsOnOrder": 0,
"ReorderLevel": 10,
"Discontinued": false,
"Category": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Products(7)/Category"
}
},
"Order_Details": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Products(7)/Order_Details"
}
},
"Supplier": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Products(7)/Supplier"
}
}
}, {
"__metadata": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Products(8)",
"type": "NorthwindModel.Product"
},
"ProductID": 8,
"ProductName": "Northwoods Cranberry Sauce",
"SupplierID": 3,
"CategoryID": 2,
"QuantityPerUnit": "12 - 12 oz jars",
"UnitPrice": "40.0000",
"UnitsInStock": 6,
"UnitsOnOrder": 0,
"ReorderLevel": 0,
"Discontinued": false,
"Category": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Products(8)/Category"
}
},
"Order_Details": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Products(8)/Order_Details"
}
},
"Supplier": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Products(8)/Supplier"
}
}
}, {
"__metadata": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Products(9)",
"type": "NorthwindModel.Product"
},
"ProductID": 9,
"ProductName": "Mishi Kobe Niku",
"SupplierID": 4,
"CategoryID": 6,
"QuantityPerUnit": "18 - 500 g pkgs.",
"UnitPrice": "97.0000",
"UnitsInStock": 29,
"UnitsOnOrder": 0,
"ReorderLevel": 0,
"Discontinued": true,
"Category": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Products(9)/Category"
}
},
"Order_Details": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Products(9)/Order_Details"
}
},
"Supplier": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Products(9)/Supplier"
}
}
}, {
"__metadata": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Products(10)",
"type": "NorthwindModel.Product"
},
"ProductID": 10,
"ProductName": "Ikura",
"SupplierID": 4,
"CategoryID": 8,
"QuantityPerUnit": "12 - 200 ml jars",
"UnitPrice": "31.0000",
"UnitsInStock": 31,
"UnitsOnOrder": 0,
"ReorderLevel": 0,
"Discontinued": false,
"Category": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Products(10)/Category"
}
},
"Order_Details": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Products(10)/Order_Details"
}
},
"Supplier": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Products(10)/Supplier"
}
}
}, {
"__metadata": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Products(11)",
"type": "NorthwindModel.Product"
},
"ProductID": 11,
"ProductName": "Queso Cabrales",
"SupplierID": 5,
"CategoryID": 4,
"QuantityPerUnit": "1 kg pkg.",
"UnitPrice": "21.0000",
"UnitsInStock": 22,
"UnitsOnOrder": 30,
"ReorderLevel": 30,
"Discontinued": false,
"Category": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Products(11)/Category"
}
},
"Order_Details": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Products(11)/Order_Details"
}
},
"Supplier": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Products(11)/Supplier"
}
}
}, {
"__metadata": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Products(12)",
"type": "NorthwindModel.Product"
},
"ProductID": 12,
"ProductName": "Queso Manchego La Pastora",
"SupplierID": 5,
"CategoryID": 4,
"QuantityPerUnit": "10 - 500 g pkgs.",
"UnitPrice": "38.0000",
"UnitsInStock": 86,
"UnitsOnOrder": 0,
"ReorderLevel": 0,
"Discontinued": false,
"Category": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Products(12)/Category"
}
},
"Order_Details": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Products(12)/Order_Details"
}
},
"Supplier": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Products(12)/Supplier"
}
}
}, {
"__metadata": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Products(13)",
"type": "NorthwindModel.Product"
},
"ProductID": 13,
"ProductName": "Konbu",
"SupplierID": 6,
"CategoryID": 8,
"QuantityPerUnit": "2 kg box",
"UnitPrice": "6.0000",
"UnitsInStock": 24,
"UnitsOnOrder": 0,
"ReorderLevel": 5,
"Discontinued": false,
"Category": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Products(13)/Category"
}
},
"Order_Details": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Products(13)/Order_Details"
}
},
"Supplier": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Products(13)/Supplier"
}
}
}, {
"__metadata": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Products(14)",
"type": "NorthwindModel.Product"
},
"ProductID": 14,
"ProductName": "Tofu",
"SupplierID": 6,
"CategoryID": 7,
"QuantityPerUnit": "40 - 100 g pkgs.",
"UnitPrice": "23.2500",
"UnitsInStock": 35,
"UnitsOnOrder": 0,
"ReorderLevel": 0,
"Discontinued": false,
"Category": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Products(14)/Category"
}
},
"Order_Details": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Products(14)/Order_Details"
}
},
"Supplier": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Products(14)/Supplier"
}
}
}, {
"__metadata": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Products(15)",
"type": "NorthwindModel.Product"
},
"ProductID": 15,
"ProductName": "Genen Shouyu",
"SupplierID": 6,
"CategoryID": 2,
"QuantityPerUnit": "24 - 250 ml bottles",
"UnitPrice": "15.5000",
"UnitsInStock": 39,
"UnitsOnOrder": 0,
"ReorderLevel": 5,
"Discontinued": false,
"Category": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Products(15)/Category"
}
},
"Order_Details": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Products(15)/Order_Details"
}
},
"Supplier": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Products(15)/Supplier"
}
}
}, {
"__metadata": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Products(16)",
"type": "NorthwindModel.Product"
},
"ProductID": 16,
"ProductName": "Pavlova",
"SupplierID": 7,
"CategoryID": 3,
"QuantityPerUnit": "32 - 500 g boxes",
"UnitPrice": "17.4500",
"UnitsInStock": 29,
"UnitsOnOrder": 0,
"ReorderLevel": 10,
"Discontinued": false,
"Category": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Products(16)/Category"
}
},
"Order_Details": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Products(16)/Order_Details"
}
},
"Supplier": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Products(16)/Supplier"
}
}
}, {
"__metadata": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Products(17)",
"type": "NorthwindModel.Product"
},
"ProductID": 17,
"ProductName": "Alice Mutton",
"SupplierID": 7,
"CategoryID": 6,
"QuantityPerUnit": "20 - 1 kg tins",
"UnitPrice": "39.0000",
"UnitsInStock": 0,
"UnitsOnOrder": 0,
"ReorderLevel": 0,
"Discontinued": true,
"Category": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Products(17)/Category"
}
},
"Order_Details": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Products(17)/Order_Details"
}
},
"Supplier": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Products(17)/Supplier"
}
}
}, {
"__metadata": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Products(18)",
"type": "NorthwindModel.Product"
},
"ProductID": 18,
"ProductName": "Carnarvon Tigers",
"SupplierID": 7,
"CategoryID": 8,
"QuantityPerUnit": "16 kg pkg.",
"UnitPrice": "62.5000",
"UnitsInStock": 42,
"UnitsOnOrder": 0,
"ReorderLevel": 0,
"Discontinued": false,
"Category": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Products(18)/Category"
}
},
"Order_Details": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Products(18)/Order_Details"
}
},
"Supplier": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Products(18)/Supplier"
}
}
}, {
"__metadata": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Products(19)",
"type": "NorthwindModel.Product"
},
"ProductID": 19,
"ProductName": "Teatime Chocolate Biscuits",
"SupplierID": 8,
"CategoryID": 3,
"QuantityPerUnit": "10 boxes x 12 pieces",
"UnitPrice": "9.2000",
"UnitsInStock": 25,
"UnitsOnOrder": 0,
"ReorderLevel": 5,
"Discontinued": false,
"Category": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Products(19)/Category"
}
},
"Order_Details": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Products(19)/Order_Details"
}
},
"Supplier": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Products(19)/Supplier"
}
}
}, {
"__metadata": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Products(20)",
"type": "NorthwindModel.Product"
},
"ProductID": 20,
"ProductName": "Sir Rodney's Marmalade",
"SupplierID": 8,
"CategoryID": 3,
"QuantityPerUnit": "30 gift boxes",
"UnitPrice": "81.0000",
"UnitsInStock": 40,
"UnitsOnOrder": 0,
"ReorderLevel": 0,
"Discontinued": false,
"Category": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Products(20)/Category"
}
},
"Order_Details": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Products(20)/Order_Details"
}
},
"Supplier": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Products(20)/Supplier"
}
}
}]
};