Skip to content

Commit 7e65227

Browse files
6pac6pac
committed
Merge branch 'master' of github.com:6pac/SlickGrid
2 parents 6f05357 + d776f6f commit 7e65227

File tree

2 files changed

+61
-21
lines changed

2 files changed

+61
-21
lines changed

‎examples/example-plugin-headermenu.html‎

Lines changed: 30 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,6 @@
1919
padding: 2px;
2020
-moz-box-shadow: 2px 2px 2px silver;
2121
-webkit-box-shadow: 2px 2px 2px silver;
22-
min-width: 100px;
2322
z-index: 20;
2423
}
2524

@@ -47,15 +46,26 @@
4746
</head>
4847
<body>
4948
<div style="position:relative">
50-
<div style="width:600px;">
49+
<div style="width:500px;">
5150
<div id="myGrid" style="width:100%;height:500px;"></div>
5251
</div>
5352

5453
<div class="options-panel">
55-
<p>
56-
This example demonstrates using the <b>Slick.Plugins.HeaderMenu</b> plugin to add drop-down menus to column
57-
headers. (Hover over the headers.)
58-
</p>
54+
<h2>Demonstrates:</h2>
55+
<p>
56+
This example demonstrates using the <b>Slick.Plugins.HeaderMenu</b> plugin to add drop-down menus to column
57+
headers. (Hover over the headers.)
58+
</p>
59+
<hr>
60+
<h3>Auto-align option</h3>
61+
<p>
62+
Auto-align (defaults to True), will calculate whether it has enough space to show the drop menu to the right.
63+
If it calculates that the drop menu is to fall outside of the viewport, it will automatically align the drop menu to the left.
64+
</p>
65+
<hr>
66+
<h3>Auto-Align Header Menu Drop</h3>
67+
<button onclick="autoAlignMenu(true)">ON</button>
68+
<button onclick="autoAlignMenu(false)">OFF</button>
5969
<h2>View Source:</h2>
6070
<ul>
6171
<li><A href="https://github.com/6pac/SlickGrid/blob/master/examples/example-plugin-headermenu.html" target="_sourcewindow"> View the source for this example on Github</a></li>
@@ -74,13 +84,15 @@ <h2>View Source:</h2>
7484
<script>
7585
var data = [];
7686
var grid;
87+
var headerMenuPlugin;
7788
var columns = [
78-
{id: "title", name: "Title", field: "title"},
79-
{id: "duration", name: "Duration", field: "duration", sortable: true},
80-
{id: "%", name: "% Complete", field: "percentComplete", sortable: true},
89+
{id: "title", name: "Title", field: "title", width: 90},
90+
{id: "duration", name: "Duration", field: "duration", sortable: true, width: 90},
91+
{id: "%", name: "% Complete", field: "percentComplete", sortable: true, width: 90},
8192
{id: "start", name: "Start", field: "start"},
8293
{id: "finish", name: "Finish", field: "finish"},
8394
{id: "effort-driven", name: "Effort Driven", field: "effortDriven"}
95+
8496
];
8597

8698
for (var i = 0; i < columns.length; i++) {
@@ -118,6 +130,9 @@ <h2>View Source:</h2>
118130
var visibleColumns = columns;
119131

120132
var options = {
133+
columnPicker: {
134+
columnTitle: "Columns"
135+
},
121136
enableColumnReorder: false,
122137
multiColumnSort: true
123138
};
@@ -145,6 +160,10 @@ <h2>View Source:</h2>
145160
});
146161
};
147162

163+
function autoAlignMenu(isEnabled) {
164+
headerMenuPlugin.setOptions({ autoAlign: isEnabled });
165+
}
166+
148167
$(function () {
149168
data = [];
150169
for (var i = 0; i < 500; i++) {
@@ -160,7 +179,7 @@ <h2>View Source:</h2>
160179

161180
grid = new Slick.Grid("#myGrid", data, columns, options);
162181
var columnpicker = new Slick.Controls.ColumnPicker(columns, grid, options);
163-
var headerMenuPlugin = new Slick.Plugins.HeaderMenu({});
182+
headerMenuPlugin = new Slick.Plugins.HeaderMenu({});
164183

165184
grid.onSort.subscribe(function (e, args) {
166185
executeSort(args.sortCols);
@@ -199,7 +218,7 @@ <h2>View Source:</h2>
199218

200219
// subscribe to event when column visibility is changed via the menu
201220
columnpicker.onColumnsChanged.subscribe(function(e, args) {
202-
console.log('Columns changed via the menu');
221+
console.log('Columns changed via the menu', args.columns);
203222
});
204223

205224
grid.registerPlugin(headerMenuPlugin);

‎plugins/slick.headermenu.js‎

Lines changed: 31 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -45,12 +45,15 @@
4545
*
4646
*
4747
* Available menu item options:
48-
* title: Menu item text.
49-
* disabled: Whether the item is disabled.
50-
* tooltip: Item tooltip.
51-
* command: A command identifier to be passed to the onCommand event handlers.
52-
* iconCssClass: A CSS class to be added to the menu item icon.
53-
* iconImage: A url to the icon image.
48+
* title: Menu item text.
49+
* disabled: Whether the item is disabled.
50+
* tooltip: Item tooltip.
51+
* command: A command identifier to be passed to the onCommand event handlers.
52+
* iconCssClass: A CSS class to be added to the menu item icon.
53+
* iconImage: A url to the icon image.
54+
* minWidth: Minimum width that the drop menu will have
55+
* autoAlign: Auto-align drop menu to the left when not enough viewport space to show on the right
56+
* autoAlignOffset: When drop menu is aligned to the left, it might not be perfectly aligned with the header menu icon, if that is the case you can add an offset (positive/negative number to move right/left)
5457
*
5558
*
5659
* The plugin exposes the following events:
@@ -83,7 +86,10 @@
8386
var _handler = new Slick.EventHandler();
8487
var _defaults = {
8588
buttonCssClass: null,
86-
buttonImage: null
89+
buttonImage: null,
90+
minWidth: 100,
91+
autoAlign: true,
92+
autoAlignOffset: 0
8793
};
8894
var $menu;
8995
var $activeHeaderColumn;
@@ -103,6 +109,10 @@
103109
$(document.body).on("mousedown", handleBodyMouseDown);
104110
}
105111

112+
function setOptions(newOptions) {
113+
options = $.extend(true, {}, options, newOptions);
114+
}
115+
106116

107117
function destroy() {
108118
_handler.unsubscribeAll();
@@ -181,7 +191,7 @@
181191

182192

183193
if (!$menu) {
184-
$menu = $("<div class='slick-header-menu'></div>")
194+
$menu = $("<div class='slick-header-menu' style='min-width: " + options.minWidth + "px'></div>")
185195
.appendTo(_grid.getContainerNode());
186196
}
187197
$menu.empty();
@@ -222,10 +232,20 @@
222232
.appendTo($li);
223233
}
224234

235+
var leftPos = $(this).offset().left;
225236

226-
// Position the menu.
237+
// when auto-align is set, it will calculate whether it has enough space in the viewport to show the drop menu on the right (default)
238+
// if there isn't enough space on the right, it will automatically align the drop menu to the left
239+
// to simulate an align left, we actually need to know the width of the drop menu
240+
if (options.autoAlign) {
241+
var gridPos = _grid.getGridPosition();
242+
if ((leftPos + options.minWidth) >= gridPos.width) {
243+
leftPos = leftPos - options.minWidth + options.autoAlignOffset;
244+
}
245+
}
246+
227247
$menu
228-
.offset({ top: $(this).offset().top + $(this).height(), left: $(this).offset().left });
248+
.offset({ top: $(this).offset().top + $(this).height(), left: leftPos });
229249

230250

231251
// Mark the header as active to keep the highlighting.
@@ -267,6 +287,7 @@
267287
$.extend(this, {
268288
"init": init,
269289
"destroy": destroy,
290+
"setOptions": setOptions,
270291

271292
"onBeforeMenuShow": new Slick.Event(),
272293
"onCommand": new Slick.Event()

0 commit comments

Comments
 (0)