igGrid - template chart

by georgianastasov

HTML

<script src="https://igniteui.com/js/modernizr.min.js"></script>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.core.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.lob.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.dv.js"></script>
<script src="https://igniteui.com/js-data/northwind-products"></script>
<script src="https://igniteui.com/js-data/world-energy-production"></script>

<link href="https://cdn-na.infragistics.com/igniteui/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet"></link>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/structure/infragistics.css" rel="stylesheet"></link>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/structure/modules/infragistics.ui.chart.css" rel="stylesheet"></link>

<table id="grid"></table>

JavaScript

$(function () {
            $("#grid").igGrid({
                primaryKey: "ProductID",
                width: '100%',
                height: '500px',
                columns: [
                   { headerText: "ID", key: "ProductID", dataType: "number", width: "50px", hidden: true },
        					 { headerText: "Name", key: "ProductName", dataType: "string", width: "250px" },
        					 { headerText: "In Stock", key: "UnitsInStock", dataType: "number", width: "100px" },
        					 { headerText: "Reorder", key: "ReorderLevel", dataType: "number", width: "100px" },
        					 { headerText: "Progress", key: "Progress", unbound: true, template: "<div class='progressBar' onmouseover='hover(${ProductID})' onclick='click(${ProductID})'></div>" }
                ],
                autofitLastColumn: false,
                autoGenerateColumns: false,
                dataSource: northwindProducts,
                responseDataKey: "results",
                rowsRendered: function(evt, ui) {
        						ui.tbody.children().each(function(idx, item) {
            						var $row = $(item);
            						var rowData = ui.owner.findRecordByKey($row.data("id"));
           
           							$row.context.cells[$row.context.cells.length - 1].before(rowData.ReorderLevel + "/" + rowData.UnitsInStock)
                        console.log($row.context.cells[$row.context.cells.length - 1])
                        
            						$row.find(".progressBar").progressbar({
                						value: rowData.ReorderLevel,
                						max: rowData.UnitsInStock
            						});
                        $row.find(".progressValue").text(rowData.ReorderLevel + "/" + rowData.UnitsInStock);

            						//  Change color of progress bar.
            						var valuePercentage = rowData.ReorderLevel / rowData.UnitsInStock;
                        
            						if (valuePercentage > 0.9)
               ...