SlickGrid example 14: Highlighting and Flashing cells in Slickgrid 6
About
This example simulates a real-time display of CPU utilization in a web farm.
Data is updated in real-time, and cells with changed data are highlighted.
You can also click "Find current server" to scroll the row displaying data for the current
server into view and flash it.
Demonstrates
setHighlightedCells()
flashCell()
Controls
File
js/slickgrid/examples/example14-highlighting.html
View source
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>SlickGrid example 14: Highlighting and Flashing cells</title>
<link rel="stylesheet" href="../slick.grid.css" type="text/css" media="screen" charset="utf-8" />
<link rel="stylesheet" href="../css/smoothness/jquery-ui-1.8.5.custom.css" type="text/css" media="screen" charset="utf-8" />
<link rel="stylesheet" href="examples.css" type="text/css" media="screen" charset="utf-8" />
<style>
.load-medium {
color: orange;
font-weight: bold;
}
.load-hi {
color: red;
font-weight: bold;
}
.changed {
background: pink;
}
.current-server {
border: 1px solid black;
background: orange;
}
</style>
</head>
<body>
<div style="width:520px;float:left;">
<div id="myGrid" style="width:100%;height:500px;"></div>
</div>
<div class="options-panel" style="width:320px;margin-left:550px;">
<h2>About</h2>
This example simulates a real-time display of CPU utilization in a web farm.
Data is updated in real-time, and cells with changed data are highlighted.
You can also click "Find current server" to scroll the row displaying data for the current
server into view and flash it.
<h2>Demonstrates</h2>
<ul>
<li>setHighlightedCells()</li>
<li>flashCell()</li>
</ul>
<h2>Controls</h2>
<button onclick="simulateRealTimeUpdates()">Start simulation</button>
<button onclick="findCurrentServer()">Find current server</button>
</div>
<script src="../lib/firebugx.js"></script>
<script src="../lib/jquery-1.4.3.min.js"></script>
<script src="../lib/jquery-ui-1.8.5.custom.min.js"></script>
<script src="../lib/jquery.event.drag-2.0.min.js"></script>
<script src="../slick.core.js"></script>
<script src="../plugins/slick.cellselectionmodel.js"></script>
<script src="../plugins/slick.rowmovemanager.js"></script>
<script src="../slick.editors.js"></script>
<script src="../slick.grid.js"></script>
<script>
var grid;
var data = [];
var columns = [{id:"server", name:"Server", field:"server", width:180}];
var currentServer;
function cpuUtilizationFormatter(row, cell, value, columnDef, dataContext) {
if (value > 90)
return "<span class='load-hi'>" + value + "%</span>";
else if (value > 70)
return "<span class='load-medium'>" + value + "%</span>";
else
return value + "%";
}
for (var i=0; i<4; i++) {
columns.push({
id: "cpu" + i,
name: "CPU" + i,
field: i,
width: 80,
formatter: cpuUtilizationFormatter
});
}
var options = {
editable: false,
enableAddRow: false,
enableCellNavigation: true,
cellHighlightCssClass: "changed",
cellFlashingCssClass: "current-server"
};
$(function()
{
for (var i=0; i<500; i++) {
var d = (data[i] = {});
d.server = "Server " + i;
for (var j=0; j<columns.length; j++) {
d[j] = Math.round(Math.random()*100);
}
}
grid = new Slick.Grid("#myGrid", data, columns, options);
currentServer = Math.round(Math.random()*(data.length-1));
});
function simulateRealTimeUpdates() {
var changes = {};
var numberOfUpdates = Math.round(Math.random()*(data.length/10));
for (var i=0; i<numberOfUpdates; i++) {
var server = Math.round(Math.random()*(data.length-1));
var cpu = Math.round(Math.random()*(columns.length-1));
var delta = Math.round(Math.random()*50)-25;
var col = grid.getColumnIndex("cpu" + cpu);
var val = data[server][col] + delta;
val = Math.max(0,val);
val = Math.min(100,val);
data[server][col] = val;
if (!changes[server])
changes[server] = {};
changes[server]["cpu" + cpu] = "changed";
grid.invalidateRow(server);
}
grid.setCellCssStyles("highlight", changes);
grid.render();
setTimeout(simulateRealTimeUpdates, 500);
}
function findCurrentServer() {
grid.scrollRowIntoView(currentServer);
grid.flashCell(currentServer,grid.getColumnIndex("server"),100);
}
</script>
</body>
</html>
