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.
Show
records
Chai $ 18.0000 390
Chang $ 19.0000 1740
Aniseed Syrup $ 10.0000 1370
Chef Anton's Cajun Seasoning $ 22.0000 530
Chef Anton's Gumbo Mix $ 21.3500 00
Grandma's Boysenberry Spread $ 25.0000 1200
Uncle Bob's Organic Dried Pears $ 30.0000 150
Northwoods Cranberry Sauce $ 40.0000 60
Product NameUnit PriceUnits In StockUnits On Order

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