Permalink
Browse files

Extended the grid API with "onHeaderRendered" and "onBeforeHeaderDest…

…roy" events and added a Slick.Plugin.HeaderButtons plugin to easily add custom buttons to column headers along with an example to demonstrate usage.
  • Loading branch information...
1 parent 9a3223c commit 1259f2f14c50629f027815280169d70f013d39ae @mleibman committed with Jun 17, 2012
@@ -0,0 +1,162 @@
+<!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>
+ </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.0.min.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,
+ 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>
@@ -13,6 +13,7 @@
var _dragging;
var _decorator;
var _self = this;
+ var _handler = new Slick.EventHandler();
var _defaults = {
selectionCss: {
"border": "2px dashed blue"
@@ -25,17 +26,15 @@
_decorator = new Slick.CellRangeDecorator(grid, options);
_grid = grid;
_canvas = _grid.getCanvasNode();
- _grid.onDragInit.subscribe(handleDragInit);
- _grid.onDragStart.subscribe(handleDragStart);
- _grid.onDrag.subscribe(handleDrag);
- _grid.onDragEnd.subscribe(handleDragEnd);
+ _handler
+ .subscribe(_grid.onDragInit, handleDragInit)
+ .subscribe(_grid.onDragStart, handleDragStart)
+ .subscribe(_grid.onDrag, handleDrag)
+ .subscribe(_grid.onDragEnd, handleDragEnd);
}
function destroy() {
- _grid.onDragInit.unsubscribe(handleDragInit);
- _grid.onDragStart.unsubscribe(handleDragStart);
- _grid.onDrag.unsubscribe(handleDrag);
- _grid.onDragEnd.unsubscribe(handleDragEnd);
+ _handler.unsubscribeAll();
}
function handleDragInit(e, dd) {
@@ -10,6 +10,7 @@
function CheckboxSelectColumn(options) {
var _grid;
var _self = this;
+ var _handler = new Slick.EventHandler();
var _selectedRowsLookup = {};
var _defaults = {
columnId: "_checkbox_selector",
@@ -22,17 +23,15 @@
function init(grid) {
_grid = grid;
- _grid.onSelectedRowsChanged.subscribe(handleSelectedRowsChanged);
- _grid.onClick.subscribe(handleClick);
- _grid.onHeaderClick.subscribe(handleHeaderClick);
- _grid.onKeyDown.subscribe(handleKeyDown);
+ _handler
+ .subscribe(_grid.onSelectedRowsChanged, handleSelectedRowsChanged)
+ .subscribe(_grid.onClick, handleClick)
+ .subscribe(_grid.onHeaderClick, handleHeaderClick)
+ .subscribe(_grid.onKeyDown, handleKeyDown);
}
function destroy() {
- _grid.onSelectedRowsChanged.unsubscribe(handleSelectedRowsChanged);
- _grid.onClick.unsubscribe(handleClick);
- _grid.onHeaderClick.unsubscribe(handleHeaderClick);
- _grid.onKeyDown.unsubscribe(handleKeyDown);
+ _handler.unsubscribeAll();
}
function handleSelectedRowsChanged(e, args) {
@@ -0,0 +1,32 @@
+.slick-column-name {
+ /**
+ * This makes all "float:right" elements after it that spill over to the next line
+ * display way below the lower boundary of the column thus hiding them.
+ */
+ display: inline-block;
+ margin-bottom: 100px;
+}
+
+.slick-header-button {
+ display: inline-block;
+ float: right;
+ vertical-align: top;
+ margin: 1px;
+ height: 15px;
+ width: 15px;
+ background-repeat: no-repeat;
+ background-position: center center;
+ cursor: pointer;
+}
+
+.slick-header-button-hidden {
+ width: 0;
+
+ -webkit-transition: 0.2s width;
+ -ms-transition: 0.2s width;
+ transition: 0.2s width;
+}
+
+.slick-header-column:hover > .slick-header-button {
+ width: 15px;
+}
Oops, something went wrong.

0 comments on commit 1259f2f

Please sign in to comment.