show buttons on iggrid based on conditions for each row

For: http://stackoverflow.com/questions/21613805/show-buttons-on-iggrid-based-on-conditions-for-each-row

HTML

<script src="http://igniteui.com/js/modernizr.min.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="http://cdn-na.infragistics.com/jquery/20132/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/jquery/20132/latest/js/infragistics.lob.js"></script>
<script src="http://igniteui.com/data-files/adventureworks.min.js"></script>
<link href="http://cdn-na.infragistics.com/jquery/20132/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet"></link>
<link href="http://cdn-na.infragistics.com/jquery/20132/latest/css/structure/infragistics.css" rel="stylesheet"></link>
<p>Conditional column template where rows with MakeFlag have delete button and those with even ProductID have edit button: </p>
<table id="grid"></table>

CSS

.delete-button, .edit-button {
    width: 100%;
    font-size: 1em;
    border: solid 1px #777;
    font-family:'Segoe UI', Arial, sans-serif;
    color: #444;
}
.delete-button:hover, .edit-button:hover {
    background-color: #d0edfa;
}

JavaScript

$(function () {
            $("#grid").igGrid({
                autoGenerateColumns: false,
                width: "100%",
                height: "500px",
                columns: [
                    { headerText: "Product ID", key: "ProductID", dataType: "number", width: "10%" },
                    { headerText: "Product Name", key: "Name", dataType: "string", width: "30%" },
                    { headerText: "Product Number", key: "ProductNumber", dataType: "string", width: "25%" },
                    { headerText: "Make Flag", key: "MakeFlag", dataType: "bool", width: "15%" },
                    { headerText: "", key: "Delete", dataType: "string", width: "10%", unbound: true, 
                     template: "{{if ${MakeFlag} }}<input type='button' onclick='deleteRow(${ProductID})' value='Delete' class='delete-button'/>{{/if}}"},
                    { headerText: "<span></span>", key: "Edit", dataType: "string", width: "10%", unbound: true, 
                         template: "{{if ${ProductID} % 2 == 0 }}<input type='button' onclick='editRow(${ProductID})' value='Edit' class='edit-button'/>{{/if}}"}
                ],
                primaryKey: "ProductID",
                dataSource: adventureWorks,
                features: [
            {
                name: "Sorting",
                type: "local",
                mode: "multi",
                sortingDialogContainment: "window"
            },
            {
                name: "Filtering",
                type: "local",
                mode: "advanced",
                filterDialogContainment: "window"
            },
            {
                name: "Hiding"
            },
            {
                name: "ColumnMoving",
                 type: "local",
               
            },
            
        ]
            });
        });

        function deleteRow(rowId) {
            var grid = $("#grid").data("igGrid");
            grid.dataSource.deleteRow(rowId);
           ...