<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="../css/smoothness/jquery-ui-1.8.16.custom.css" type="text/css"/>
<link rel="stylesheet" href="../slick.grid.css" type="text/css"/>
<link rel="stylesheet" href="examples.css" type="text/css"/>
<link rel="stylesheet" href="../plugins/slick.headerbuttons.css" type="text/css"/>
<style>
.icon-highlight-off,
.icon-highlight-on {
background-image: url(../images/bullet_blue.png);
}
.icon-highlight-off {
opacity: 0.2;
}
.negative-highlight {
background: red;
}
</style>
</head>
<body>
<div style="position:relative">
<div style="width:600px;">
<div id="myGrid" style="width:100%;height:500px;"></div>
</div>
<div class="options-panel">
<p>
This example demonstrates using the <b>Slick.Plugins.HeaderButtons</b> plugin to easily add buttons to column
headers. These buttons can be specified directly in the column definition, and are very easy to configure and use.
</p>
<h2>View Source:</h2>
<ul>
<li><A href="https://github.com/mleibman/SlickGrid/blob/gh-pages/examples/example-plugin-headerbuttons.html" target="_sourcewindow"> View the source for this example on Github</a></li>
</ul>
</div>
</div>
<script src="../lib/firebugx.js"></script>
<script src="../lib/jquery-1.7.min.js"></script>
<script src="../lib/jquery-ui-1.8.16.custom.min.js"></script>
<script src="../lib/jquery.event.drag-2.2.js"></script>
<script src="../slick.core.js"></script>
<script src="../slick.grid.js"></script>
<script src="../plugins/slick.headerbuttons.js"></script>
<script>
var grid;
var data = [];
var options = {
enableCellNavigation: true
};
var columns = [];
var columnsWithHighlightingById = {};
// Set up some test columns.
for (var i = 0; i < 10; i++) {
columns.push({
id: i,
name: String.fromCharCode("A".charCodeAt(0) + i),
field: i,
width: 90,
sortable: true,
formatter: highlightingFormatter,
header: {
buttons: [
{
cssClass: "icon-highlight-off",
command: "toggle-highlight",
tooltip: "Highlight negative numbers."
}
]
}
});
}
// Set multiple buttons on the first column to demonstrate overflow.
columns[0].name = "Resize me!";
columns[0].header = {
buttons: [
{
image: "../images/tag_red.png"
},
{
image: "../images/comment_yellow.gif"
},
{
image: "../images/info.gif"
},
{
image: "../images/help.png"
}
]
};
// Set a button on the second column to demonstrate hover.
columns[1].name = "Hover me!";
columns[1].header = {
buttons: [
{
image: "../images/help.png",
showOnHover: true,
tooltip: "This button only appears on hover.",
handler: function(e) {
alert('Help');
}
}
]
};
// Set up some test data.
for (var i = 0; i < 100; i++) {
var d = (data[i] = {});
d["id"] = i;
for (var j = 0; j < columns.length; j++) {
d[j] = Math.round(Math.random() * 10) - 5;
}
}
function highlightingFormatter(row, cell, value, columnDef, dataContext) {
if (columnsWithHighlightingById[columnDef.id] && value < 0) {
return "<div style='color:red; font-weight:bold;'>" + value + "</div>";
} else {
return value;
}
}
$(function () {
grid = new Slick.Grid("#myGrid", data, columns, options);
var headerButtonsPlugin = new Slick.Plugins.HeaderButtons();
headerButtonsPlugin.onCommand.subscribe(function(e, args) {
var column = args.column;
var button = args.button;
var command = args.command;
if (command == "toggle-highlight") {
if (button.cssClass == "icon-highlight-on") {
delete columnsWithHighlightingById[column.id];
button.cssClass = "icon-highlight-off";
button.tooltip = "Highlight negative numbers."
} else {
columnsWithHighlightingById[column.id] = true;
button.cssClass = "icon-highlight-on";
button.tooltip = "Remove highlight."
}
grid.invalidate();
}
});
grid.registerPlugin(headerButtonsPlugin);
});
</script>
</body>
</html>