Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(gridMenu): add "height" and "marginBottom" options #506

Merged
merged 1 commit into from
May 23, 2020
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 13 additions & 2 deletions controls/slick.gridmenu.js
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@
* leaveOpen: false, // do we want to leave the Grid Menu open after a command execution? (false by default)
* menuWidth: 18, // width (icon) that will be use to resize the column header container (18 by default)
* contentMinWidth: 0, // defaults to 0 (auto), minimum width of grid menu content (command, column list)
* marginBottom: 15, // defaults to 15, margin to use at the bottom of the grid when using max-height (default)
* resizeOnShowHeaderRow: false, // false by default
* useClickToRepositionMenu: true, // true by default
*
Expand All @@ -46,11 +47,13 @@
* hideSyncResizeButton: Hide the "Synchronous resize" button (defaults to false)
* forceFitTitle: Text of the title "Force fit columns"
* contentMinWidth: minimum width of grid menu content (command, column list), defaults to 0 (auto)
* height: Height of the Grid Menu content, when provided it will be used instead of the max-height (defaults to undefined)
* menuWidth: Grid menu button width (defaults to 18)
* resizeOnShowHeaderRow: Do we want to resize on the show header row event
* syncResizeTitle: Text of the title "Synchronous resize"
* useClickToRepositionMenu: Use the Click offset to reposition the Grid Menu (defaults to true), when set to False it will use the icon offset to reposition the grid menu
* menuUsabilityOverride: Callback method that user can override the default behavior of enabling/disabling the menu from being usable (must be combined with a custom formatter)
* marginBottom: Margin to use at the bottom of the grid menu, only in effect when height is undefined (defaults to 15)
*
* Available custom menu item options:
* action: Optionally define a callback function that gets executed when item is chosen (and/or use the onCommand event)
Expand Down Expand Up @@ -137,6 +140,7 @@
hideForceFitButton: false,
hideSyncResizeButton: false,
forceFitTitle: "Force fit columns",
marginBottom: 15,
menuWidth: 18,
contentMinWidth: 0,
resizeOnShowHeaderRow: false,
Expand Down Expand Up @@ -406,16 +410,23 @@
var currentMenuWidth = (contentMinWidth > menuWidth) ? contentMinWidth : (menuWidth + gridMenuIconWidth);
var nextPositionTop = (useClickToRepositionMenu && e.pageY > 0) ? e.pageY : menuIconOffset.top + 10;
var nextPositionLeft = (useClickToRepositionMenu && e.pageX > 0) ? e.pageX : menuIconOffset.left + 10;
var menuMarginBottom = (_options.gridMenu && _options.gridMenu.marginBottom !== undefined) ? _options.gridMenu.marginBottom : _defaults.marginBottom;

$menu
.css("top", nextPositionTop + 10)
.css("left", nextPositionLeft - currentMenuWidth + 10)
.css("max-height", $(window).height() - e.clientY - 15);
.css("left", nextPositionLeft - currentMenuWidth + 10);

if (contentMinWidth > 0) {
$menu.css("min-width", contentMinWidth);
}

// set "height" when defined OR ELSE use the "max-height" with available window size and optional margin bottom
if (_options.gridMenu && _options.gridMenu.height !== undefined) {
$menu.css("height", _options.gridMenu.height);
} else {
$menu.css("max-height", $(window).height() - e.clientY - menuMarginBottom);
}

$menu.show();
$list.appendTo($menu);
_isMenuOpen = true;
Expand Down
Loading