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>

CSS

.beforebar{
  font-size: 0.5rem;
}

JavaScript

$(function () {
						//grid
            $("#grid").igGrid({
                primaryKey: "ProductID",
                width: '100%',
                height: '600px',
                columns: [
                   { headerText: "ID", key: "ProductID", dataType: "number", 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" },
                   //column with column template progress bar
                   //handle hover/click events
        					 { headerText: "Progress", key: "Progress", unbound: true, template: "<div class='progressBar' onmouseover='hover(${ProductID})' onclick='clicked(${ProductID})'></div>" }
                ],
                autofitLastColumn: false,
                autoGenerateColumns: false,
                dataSource: northwindProducts,
                responseDataKey: "results",
                //rowsRendered event
                rowsRendered: function(evt, ui) {
                		//for each row
        						ui.tbody.children().each(function(idx, item) {
                    		//get the row
            						var $row = $(item);
                        //get the row data
            						var rowData = ui.owner.findRecordByKey($row.data("id"));
                        
                        //initialize the progress bar
            						$row.find(".progressBar").progressbar({
                						value: rowData.ReorderLevel,
                						max: rowData.UnitsInStock
            						});

            						//get the percentage of the two previous columns
            						var valuePercentage = rowData.ReorderLevel / rowData.UnitsInStock;
                        //show the progress bar in diferent color based on the percentage
            						if (valuePercentage > 0.9)
            ...