show buttons on iggrid based on conditions for each row

Second version using jsRender 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>
<!-- Also include jsRender: -->
<script src="http://igniteui.com/js/external/jsrender.js" type="text/javascript"></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: 50%;
    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: "20%", 
                     template: "{{if MakeFlag }}<input type='button' onclick='deleteRow({{>ProductID}})' value='Delete' class='delete-button'/>{{/if}}"+
                    "{{if SafetyStockLevel > 600 }}<input type='button' onclick='editRow({{>ProductID}})' value='Edit' class='edit-button'/>{{/if}}"}
                ],
                primaryKey: "ProductID",
                dataSource: adventureWorks,
                templatingEngine: "jsrender", // using jsRender
                localSchemaTransform : false // use when templates need to evaluate values that are not going to be displayed as columns
            });
        });

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

         function editRow(rowId) {
             alert("Edit ProductID: " + rowId);
        }