3 $.extend(true, window, {
6 "HeaderButtons": HeaderButtons
13 * A plugin to add custom buttons to column headers.
17 * Add the plugin .js & .css files and register it with the grid.
19 * To specify a custom button in a column header, extend the column definition like so:
26 * // This is the relevant part
40 * Available button options:
41 * cssClass: CSS class to add to the button.
42 * image: Relative button image path.
43 * tooltip: Button tooltip.
44 * showOnHover: Only show the button on hover.
45 * handler: Button click handler.
46 * command: A command identifier to be passed to the onCommand event handlers.
48 * The plugin exposes the following events:
49 * onCommand: Fired on button click for buttons with 'command' specified.
51 * grid: Reference to the grid.
52 * column: Column definition.
53 * command: Button command identified.
54 * button: Button options. Note that you can change the button options in your
55 * event handler, and the column header will be automatically updated to
56 * reflect them. This is useful if you want to implement something like a
60 * @param options {Object} Options:
61 * buttonCssClass: a CSS class to use for buttons (default 'slick-header-button')
62 * @class Slick.Plugins.HeaderButtons
65 function HeaderButtons(options) {
68 var _handler = new Slick.EventHandler();
70 buttonCssClass: "slick-header-button"
75 options = $.extend(true, {}, _defaults, options);
78 .subscribe(_grid.onHeaderCellRendered, handleHeaderCellRendered)
79 .subscribe(_grid.onBeforeHeaderCellDestroy, handleBeforeHeaderCellDestroy);
81 // Force the grid to re-render the header now that the events are hooked up.
82 _grid.setColumns(_grid.getColumns());
87 _handler.unsubscribeAll();
91 function handleHeaderCellRendered(e, args) {
92 var column = args.column;
94 if (column.header && column.header.buttons) {
95 // Append buttons in reverse order since they are floated to the right.
96 var i = column.header.buttons.length;
98 var button = column.header.buttons[i];
99 var btn = $("<div></div>")
100 .addClass(options.buttonCssClass)
101 .data("column", column)
102 .data("button", button);
104 if (button.showOnHover) {
105 btn.addClass("slick-header-button-hidden");
109 btn.css("backgroundImage", "url(" + button.image + ")");
112 if (button.cssClass) {
113 btn.addClass(button.cssClass);
116 if (button.tooltip) {
117 btn.attr("title", button.tooltip);
120 if (button.command) {
121 btn.data("command", button.command);
124 if (button.handler) {
125 btn.bind("click", button.handler);
129 .bind("click", handleButtonClick)
130 .appendTo(args.node);
136 function handleBeforeHeaderCellDestroy(e, args) {
137 var column = args.column;
139 if (column.header && column.header.buttons) {
140 // Removing buttons via jQuery will also clean up any event handlers and data.
141 // NOTE: If you attach event handlers directly or using a different framework,
142 // you must also clean them up here to avoid memory leaks.
143 $(args.node).find("." + options.buttonCssClass).remove();
148 function handleButtonClick(e) {
149 var command = $(this).data("command");
150 var columnDef = $(this).data("column");
151 var button = $(this).data("button");
153 if (command != null) {
154 _self.onCommand.notify({
161 // Update the header in case the user updated the button definition in the handler.
162 _grid.updateColumnHeader(columnDef.id);
165 // Stop propagation so that it doesn't register as a header click event.
174 "onCommand": new Slick.Event()