/*** * A control to add a Column Picker (right+click on any column header to reveal the column picker) * * USAGE: * * Add the slick.columnpicker.(js|css) files and register it with the grid. * * Available options, by defining a columnPicker object: * * var options = { * enableCellNavigation: true, * columnPicker: { * columnTitle: "Columns", // default to empty string * * // the last 2 checkboxes titles * hideForceFitButton: false, // show/hide checkbox near the end "Force Fit Columns" (default:false) * hideSyncResizeButton: false, // show/hide checkbox near the end "Synchronous Resize" (default:false) * forceFitTitle: "Force fit columns", // default to "Force fit columns" * headerColumnValueExtractor: "Extract the column label" // default to column.name * syncResizeTitle: "Synchronous resize", // default to "Synchronous resize" * } * }; * * @class Slick.Controls.ColumnPicker * @constructor */ 'use strict'; (function ($) { function SlickColumnPicker(columns, grid, options) { var _grid = grid; var _options = options; var $list; var $menu; var columnCheckboxes; var onColumnsChanged = new Slick.Event(); var defaults = { fadeSpeed: 250, // the last 2 checkboxes titles hideForceFitButton: false, hideSyncResizeButton: false, forceFitTitle: "Force fit columns", syncResizeTitle: "Synchronous resize", headerColumnValueExtractor: function (columnDef) { return columnDef.name; } }; function init(grid) { grid.onHeaderContextMenu.subscribe(handleHeaderContextMenu); grid.onColumnsReordered.subscribe(updateColumnOrder); _options = $.extend({}, defaults, options); $menu = $("
").appendTo(document.body); var $close = $("").appendTo($menu); // user could pass a title on top of the columns list if(_options.columnPickerTitle || (_options.columnPicker && _options.columnPicker.columnTitle)) { var columnTitle = _options.columnPickerTitle || _options.columnPicker.columnTitle; var $title = $("").append(columnTitle); $title.appendTo($menu); } $menu.on("click", updateColumn); $list = $(""); // Hide the menu on outside click. $(document.body).on("mousedown", handleBodyMouseDown); // destroy the picker if user leaves the page $(window).on("beforeunload", destroy); } function destroy() { _grid.onHeaderContextMenu.unsubscribe(handleHeaderContextMenu); _grid.onColumnsReordered.unsubscribe(updateColumnOrder); $(document.body).off("mousedown", handleBodyMouseDown); $("div.slick-columnpicker").hide(_options.fadeSpeed); $menu.remove(); } function handleBodyMouseDown(e) { if (($menu && $menu[0] != e.target && !$.contains($menu[0], e.target)) || e.target.className == "close") { $menu.hide(_options.fadeSpeed); } } function handleHeaderContextMenu(e, args) { e.preventDefault(); $list.empty(); updateColumnOrder(); columnCheckboxes = []; var $li, $input; var columnLabel; for (var i = 0; i < columns.length; i++) { $li = $("").appendTo($list); $input = $("").data("column-id", columns[i].id); columnCheckboxes.push($input); if (_grid.getColumnIndex(columns[i].id) != null) { $input.attr("checked", "checked"); } if (_options && _options.columnPicker && _options.columnPicker.headerColumnValueExtractor) { columnLabel = _options.columnPicker.headerColumnValueExtractor(columns[i]); } else { columnLabel = defaults.headerColumnValueExtractor(columns[i]); } $("") .html(columnLabel) .prepend($input) .appendTo($li); } if (_options.columnPicker && (!_options.columnPicker.hideForceFitButton || !_options.columnPicker.hideSyncResizeButton)) { $("