From c04106cc99ae5d20b5f71b6f6471f9d9ffe22951 Mon Sep 17 00:00:00 2001 From: Ben McIntyre Date: Tue, 9 May 2023 22:40:25 +0930 Subject: [PATCH 1/4] Enable hidden property for column. Adds example-column-hidden, method getVisibleColumns() and alternate method updateColumns() calling event onBeforeUpdateColumns() for when a hidden property has changed but the column list itself has not changed. --- controls/slick.columnpicker.js | 2 + examples/example-column-hidden.html | 378 +++++++++++++++++++++++ plugins/slick.cellexternalcopymanager.js | 7 +- slick.grid.js | 109 ++++++- 4 files changed, 479 insertions(+), 17 deletions(-) create mode 100644 examples/example-column-hidden.html diff --git a/controls/slick.columnpicker.js b/controls/slick.columnpicker.js index 78fb5567..24049c9f 100644 --- a/controls/slick.columnpicker.js +++ b/controls/slick.columnpicker.js @@ -124,6 +124,8 @@ let columnId, columnLabel, excludeCssClass; for (var i = 0; i < columns.length; i++) { + if (columns[i].hidden) continue; + columnId = columns[i].id; excludeCssClass = columns[i].excludeFromColumnPicker ? "hidden" : ""; diff --git a/examples/example-column-hidden.html b/examples/example-column-hidden.html new file mode 100644 index 00000000..105023e4 --- /dev/null +++ b/examples/example-column-hidden.html @@ -0,0 +1,378 @@ + + + + + + SlickGrid example: Hidden Columns + + + + + + + + + +
+
+
+ + +
+
+
+
+ +
+ Search: +
+
+ + +
+ +
+
+ + +

+ +

+ Hide Duration Column +
+ +

Demonstrates:

+
    +
  • a filtered Model (DataView) as a data source instead of a simple array
    • +
  • grid reacting to model events (onRowCountChanged, onRowsChanged)
    • +
  • + FAST DataView recalculation and real-time grid updating in response to data changes.
    + The grid holds 50'000 rows, yet you are able to sort, filter, scroll, navigate and edit as if it had 50 + rows. +
    • +
  • adding new rows, bidirectional sorting
    • +
  • column options: cannotTriggerInsert
    • +
  • events: onCellChange, onAddNewRow, onKeyDown, onSelectedRowsChanged, onSort
    • +
  • NOTE: all filters are immediately applied to new/edited rows
    • +
  • Handling row selection against model changes.
    • +
  • Paging.
    • +
  • inline filter panel
    • +
+

View Source:

+ + +
+
+
+ + + + + + + + + + + + + + + + + + + + + + diff --git a/plugins/slick.cellexternalcopymanager.js b/plugins/slick.cellexternalcopymanager.js index 71d6c8d4..7dd45abf 100644 --- a/plugins/slick.cellexternalcopymanager.js +++ b/plugins/slick.cellexternalcopymanager.js @@ -365,14 +365,17 @@ if (clipTextRows.length === 0 && _options.includeHeaderWhenCopying) { var clipTextHeaders = []; for (var j = range.fromCell; j < range.toCell + 1 ; j++) { - if (columns[j].name.length > 0) + if (columns[j].name.length > 0 && !columns[j].hidden) { clipTextHeaders.push(getHeaderValueForColumn(columns[j])); + } } clipTextRows.push(clipTextHeaders.join("\t")); } for (var j=range.fromCell; j< range.toCell+1 ; j++){ - clipTextCells.push(getDataItemValueForColumn(dt, columns[j], e)); + if (columns[j].name.length > 0 && !columns[j].hidden) { + clipTextCells.push(getDataItemValueForColumn(dt, columns[j], e)); + } } clipTextRows.push(clipTextCells.join("\t")); } diff --git a/slick.grid.js b/slick.grid.js index db8d2a8a..fa6cac32 100644 --- a/slick.grid.js +++ b/slick.grid.js @@ -126,6 +126,7 @@ if (typeof Slick === "undefined") { defaultSortAsc: true, focusable: true, selectable: true, + hidden: false }; var columnAutosizeDefaults = { @@ -791,6 +792,8 @@ if (typeof Slick === "undefined") { var includeScrollbar = !options.autoHeight; for (var i = 0, ii = columns.length; i < ii; i++) { + if (columns[ i ].hidden) continue; + var width = columns[ i ].width; if (( options.frozenColumn ) > -1 && ( i > options.frozenColumn )) { @@ -826,6 +829,8 @@ if (typeof Slick === "undefined") { headersWidthL =0; columns.forEach(function(column, i) { + if (column.hidden) return; + if (!((options.frozenColumn) > -1 && (i > options.frozenColumn))) { headersWidthL += column.width; } @@ -845,6 +850,7 @@ if (typeof Slick === "undefined") { headersWidthR =0; columns.forEach(function(column, i) { + if (column.hidden) return; if ((options.frozenColumn) > -1 && (i > options.frozenColumn)) { headersWidthR += column.width; } @@ -865,6 +871,8 @@ if (typeof Slick === "undefined") { canvasWidthL = canvasWidthR = 0; while (i--) { + if (columns[ i ].hidden) continue; + if (hasFrozenColumns() && (i > options.frozenColumn)) { canvasWidthR += columns[i].width; } else { @@ -1187,6 +1195,8 @@ if (typeof Slick === "undefined") { for (var i = 0; i < columns.length; i++) { var m = columns[i]; + if (m.hidden) continue; + const footerRowCell = utils.createDomElement('div', { className: `ui-state-default slick-footerrow-column l${i} r${i}` }, hasFrozenColumns() && (i > options.frozenColumn) ? _footerRowR : _footerRowL); const className = hasFrozenColumns() && i <= options.frozenColumn? 'frozen': null; if (className) { @@ -1329,6 +1339,8 @@ if (typeof Slick === "undefined") { for (var i = 0; i < columns.length; i++) { const m = columns[i]; + if (m.hidden) continue; + const headerTarget = hasFrozenColumns() ? ((i <= options.frozenColumn) ? _headerL : _headerR) : _headerL; const headerRowTarget = hasFrozenColumns() ? ((i <= options.frozenColumn) ? _headerRowL : _headerRowR) : _headerRowL; @@ -1704,8 +1716,8 @@ if (typeof Slick === "undefined") { handle.remove(); }); - if (i >= columns.length) { - return; + if (i >= columns.length || columns[i].hidden) { + continue; } if (columns[i].resizable) { @@ -1723,7 +1735,7 @@ if (typeof Slick === "undefined") { for (let i = 0; i < children.length; i++) { const colElm = children[i]; - if (i >= columns.length) { continue; } + if (i >= columns.length || columns[i].hidden) { continue; } if (i < firstResizable || (options.forceFitColumns && i >= lastResizable)) { continue; } @@ -1746,7 +1758,7 @@ if (typeof Slick === "undefined") { var shrinkLeewayOnRight = null, stretchLeewayOnRight = null; // lock each column's width option to current width for (let pw = 0; pw < children.length; pw++) { - if (pw >= columns.length) { + if (pw >= columns.length || columns[pw].hidden) { continue; } columns[pw].previousWidth = children[pw].offsetWidth; @@ -1757,7 +1769,7 @@ if (typeof Slick === "undefined") { // colums on right affect maxPageX/minPageX for (j = i + 1; j < columns.length; j++) { c = columns[j]; - if (c.resizable) { + if (c.resizable && !c.hidden) { if (stretchLeewayOnRight !== null) { if (c.maxWidth) { stretchLeewayOnRight += c.maxWidth - c.previousWidth; @@ -1773,7 +1785,7 @@ if (typeof Slick === "undefined") { for (j = 0; j <= i; j++) { // columns on left only affect minPageX c = columns[j]; - if (c.resizable) { + if (c.resizable && !c.hidden) { if (stretchLeewayOnLeft !== null) { if (c.maxWidth) { stretchLeewayOnLeft += c.maxWidth - c.previousWidth; @@ -1811,7 +1823,7 @@ if (typeof Slick === "undefined") { for (j = i; j >= 0; j--) { c = columns[j]; - if (c.resizable) { + if (c.resizable && !c.hidden) { actualMinWidth = Math.max(c.minWidth || 0, absoluteColumnMinWidth); if (x && c.previousWidth + x < actualMinWidth) { x += c.previousWidth - actualMinWidth; @@ -1825,7 +1837,8 @@ if (typeof Slick === "undefined") { for (k = 0; k <= i; k++) { c = columns[k]; - + if (c.hidden) { continue; } + if (hasFrozenColumns() && (k > options.frozenColumn)) { newCanvasWidthR += c.width; } else { @@ -1837,6 +1850,7 @@ if (typeof Slick === "undefined") { x = -d; for (j = i + 1; j < columns.length; j++) { c = columns[j]; + if (c.hidden) { continue; } if (c.resizable) { if (x && c.maxWidth && (c.maxWidth - c.previousWidth < x)) { x -= c.maxWidth - c.previousWidth; @@ -1856,7 +1870,8 @@ if (typeof Slick === "undefined") { } else { for (j = i + 1; j < columns.length; j++) { c = columns[j]; - + if (c.hidden) { continue; } + if (hasFrozenColumns() && (j > options.frozenColumn)) { newCanvasWidthR += c.width; } else { @@ -1869,7 +1884,8 @@ if (typeof Slick === "undefined") { x = -d; for (j = i + 1; j < columns.length; j++) { c = columns[j]; - if (c.resizable) { + if (c.hidden) { continue; } + if (c.resizable) { if (x && c.maxWidth && (c.maxWidth - c.previousWidth < x)) { x -= c.maxWidth - c.previousWidth; c.width = c.maxWidth; @@ -1888,6 +1904,7 @@ if (typeof Slick === "undefined") { for (j = i; j >= 0; j--) { c = columns[j]; + if (c.hidden) { continue; } if (c.resizable) { if (x && c.maxWidth && (c.maxWidth - c.previousWidth < x)) { x -= c.maxWidth - c.previousWidth; @@ -1912,7 +1929,8 @@ if (typeof Slick === "undefined") { for (k = 0; k <= i; k++) { c = columns[k]; - + if (c.hidden) { continue; } + if (hasFrozenColumns() && (k > options.frozenColumn)) { newCanvasWidthR += c.width; } else { @@ -1924,6 +1942,7 @@ if (typeof Slick === "undefined") { x = -d; for (j = i + 1; j < columns.length; j++) { c = columns[j]; + if (c.hidden) { continue; } if (c.resizable) { actualMinWidth = Math.max(c.minWidth || 0, absoluteColumnMinWidth); if (x && c.previousWidth + x < actualMinWidth) { @@ -1944,6 +1963,7 @@ if (typeof Slick === "undefined") { } else { for (j = i + 1; j < columns.length; j++) { c = columns[j]; + if (c.hidden) { continue; } if (hasFrozenColumns() && (j > options.frozenColumn)) { newCanvasWidthR += c.width; @@ -1980,6 +2000,7 @@ if (typeof Slick === "undefined") { var newWidth; for (j = 0; j < columns.length; j++) { c = columns[j]; + if (c.hidden) { continue; } newWidth = children[j].offsetWidth; if (c.previousWidth !== newWidth && c.rerenderOnResize) { @@ -2161,6 +2182,8 @@ if (typeof Slick === "undefined") { ]; for (var i = 0; i < columns.length; i++) { + if (columns[i].hidden) continue; + rules.push("." + uid + " .l" + i + " { }"); rules.push("." + uid + " .r" + i + " { }"); } @@ -2490,6 +2513,8 @@ if (typeof Slick === "undefined") { // if addl space remains in the viewport and there are SizeToRemaining cols, just the SizeToRemaining cols expand proportionally to fill viewport for (i = 0; i < columns.length; i++) { c = columns[i]; + if (c.hidden) continue; + var totalSTRViewportWidth = viewportWidth - totalWidthLessSTR; if (c.autoSize.sizeToRemaining) { colWidth = totalSTRViewportWidth * c.autoSize.widthPx / strColTotalGuideWidth; @@ -2512,6 +2537,8 @@ if (typeof Slick === "undefined") { var unallocatedViewportWidth = viewportWidth - totalLockedColWidth - strColsMinWidth; for (i = 0; i < columns.length; i++) { c = columns[i]; + if (c.hidden) continue; + colWidth = c.width; if (c.autoSize.autosizeMode !== Slick.ColAutosizeMode.Locked && !treatAsLocked(c.autoSize)) { if (c.autoSize.sizeToRemaining) { @@ -2545,6 +2572,8 @@ if (typeof Slick === "undefined") { if (autosizeMode === Slick.GridAutosizeColsMode.IgnoreViewport) { // just size columns as-is for (i = 0; i < columns.length; i++) { + if (columns[i].hidden) continue; + colWidth = columns[i].autoSize.widthPx; if (columns[i].rerenderOnResize && columns[i].width != colWidth) { reRender = true; @@ -2556,6 +2585,12 @@ if (typeof Slick === "undefined") { reRenderColumns(reRender); } + function LogColWidths () { + var s = "Col Widths:"; + for (var i = 0; i < columns.length; i++) { s += ' ' + (columns[i].hidden ? "H" : columns[i].width); } + console.log(s); + } + function getColAutosizeWidth(columnDef, colIndex, gridCanvas, isInit, colArrayIndex) { var autoSize = columnDef.autoSize; @@ -2843,6 +2878,7 @@ if (typeof Slick === "undefined") { for (i = 0; i < columns.length; i++) { c = columns[i]; + if (c.hidden) continue; widths.push(c.width); total += c.width; if (c.resizable) { @@ -2856,6 +2892,7 @@ if (typeof Slick === "undefined") { var shrinkProportion = (total - availWidth) / shrinkLeeway; for (i = 0; i < columns.length && total > availWidth; i++) { c = columns[i]; + if (c.hidden) continue; var width = widths[i]; if (!c.resizable || width <= c.minWidth || width <= absoluteColumnMinWidth) { continue; @@ -2879,6 +2916,7 @@ if (typeof Slick === "undefined") { var growProportion = availWidth / total; for (i = 0; i < columns.length && total < availWidth; i++) { c = columns[i]; + if (c.hidden) continue; var currentWidth = widths[i]; var growSize; @@ -2898,6 +2936,8 @@ if (typeof Slick === "undefined") { var reRender = false; for (i = 0; i < columns.length; i++) { + if (c.hidden) continue; + if (columns[i].rerenderOnResize && columns[i].width != widths[i]) { reRender = true; } @@ -2920,6 +2960,10 @@ if (typeof Slick === "undefined") { } } + function getVisibleColumns() { + return columns.filter(c => !c.hidden); + } + ////////////////////////////////////////////////////////////////////////////////////////////// // General ////////////////////////////////////////////////////////////////////////////////////////////// @@ -2979,10 +3023,11 @@ if (typeof Slick === "undefined") { } let columnIndex = 0; + let vc = getVisibleColumns(); _headers.forEach(function (header) { for (let i = 0; i < header.children.length; i++, columnIndex++) { const h = header.children[i]; - const col = columns[columnIndex] || {}; + const col = vc[columnIndex] || {}; const width = (col.width || 0) - headerColumnWidthDiff; if (utils.width(h) !== width) { utils.width(h, width); @@ -2996,6 +3041,8 @@ if (typeof Slick === "undefined") { function applyColumnWidths() { var x = 0, w, rule; for (var i = 0; i < columns.length; i++) { + if (columns[i].hidden) continue; + w = columns[i].width; rule = getColumnCssRules(i); @@ -3131,6 +3178,8 @@ if (typeof Slick === "undefined") { columnPosRight = []; var x = 0; for (var i = 0, ii = columns.length; i < ii; i++) { + if (columns[i].hidden) continue; + columnPosLeft[i] = x; columnPosRight[i] = x + columns[i].width; @@ -3171,6 +3220,16 @@ if (typeof Slick === "undefined") { columns = columnDefinitions; } + columns = columnDefinitions; + updateColumnsInternal(); + } + + function updateColumns() { + trigger(self.onBeforeUpdateColumns, { columns: columns, grid: self }); + updateColumnsInternal(); + } + + function updateColumnsInternal() { updateColumnProps(); updateColumnCaches(); @@ -3471,6 +3530,8 @@ if (typeof Slick === "undefined") { var colspan, m; for (var i = 0, ii = columns.length; i < ii; i++) { m = columns[i]; + if (m.hidden) continue; + colspan = 1; if (metadata && metadata.columns) { var columnData = metadata.columns[m.id] || metadata.columns[i]; @@ -3746,7 +3807,8 @@ if (typeof Slick === "undefined") { columnIdx = columnIdx | 0; var m = columns[columnIdx], - node = cacheEntry.cellNodesByColumnIdx[columnIdx]; + + node = cacheEntry.cellNodesByColumnIdx[columnIdx]; if (row === activeRow && columnIdx === activeCell && currentEditor) { currentEditor.loadValue(d); @@ -4161,6 +4223,8 @@ if (typeof Slick === "undefined") { // TODO: shorten this loop (index? heuristics? binary search?) for (var i = 0, ii = columns.length; i < ii; i++) { + if (columns[i].hidden) continue; + // Cells to the right are outside the range. if (columnPosLeft[i] > range.rightPx) { break; @@ -5011,6 +5075,8 @@ if (typeof Slick === "undefined") { var w = 0; for (var i = 0; i < columns.length && w < x; i++) { + if (columns[i].hidden) continue; + w += columns[i].width; cell++; } @@ -5124,6 +5190,8 @@ if (typeof Slick === "undefined") { var y2 = y1 + options.rowHeight - 1; var x1 = 0; for (var i = 0; i < cell; i++) { + if (columns[i].hidden) continue; + x1 += columns[i].width; if (options.frozenColumn == i) { @@ -5278,7 +5346,7 @@ if (typeof Slick === "undefined") { } // does this cell have an editor? - if (!getEditor(row, cell)) { + if (columns[cell].hidden || !getEditor(row, cell)) { return false; } @@ -6000,6 +6068,10 @@ if (typeof Slick === "undefined") { return false; } + if (columns[cell].hidden) { + return false; + } + var rowMetadata = data.getItemMetadata && data.getItemMetadata(row); if (rowMetadata && typeof rowMetadata.focusable !== "undefined") { return !!rowMetadata.focusable; @@ -6013,7 +6085,7 @@ if (typeof Slick === "undefined") { return !!columnMetadata[cell].focusable; } - return !!columns[cell].focusable; + return !!(columns[cell].focusable); } function canCellBeSelected(row, cell) { @@ -6021,6 +6093,10 @@ if (typeof Slick === "undefined") { return false; } + if (columns[cell].hidden) { + return false; + } + var rowMetadata = data.getItemMetadata && data.getItemMetadata(row); if (rowMetadata && typeof rowMetadata.selectable !== "undefined") { return !!rowMetadata.selectable; @@ -6269,6 +6345,7 @@ if (typeof Slick === "undefined") { "onCellCssStylesChanged": new Slick.Event(), "onAutosizeColumns": new Slick.Event(), "onBeforeSetColumns": new Slick.Event(), + "onBeforeUpdateColumns": new Slick.Event(), "onRendered": new Slick.Event(), "onSetOptions": new Slick.Event(), @@ -6278,6 +6355,8 @@ if (typeof Slick === "undefined") { "getPluginByName": getPluginByName, "getColumns": getColumns, "setColumns": setColumns, + "updateColumns": updateColumns, + "getVisibleColumns": getVisibleColumns, "getColumnIndex": getColumnIndex, "updateColumnHeader": updateColumnHeader, "setSortColumn": setSortColumn, From 1ec806b5f6579ad0b510078273f4cb95ed3f12db Mon Sep 17 00:00:00 2001 From: Ben McIntyre Date: Wed, 10 May 2023 12:04:03 +0930 Subject: [PATCH 2/4] remove jQuery from example and add frozen rows/hidden cols example --- examples/example-column-hidden.html | 73 ++++-- ...n-columns-and-column-group-hidden-col.html | 228 ++++++++++++++++++ 2 files changed, 276 insertions(+), 25 deletions(-) create mode 100644 examples/example-frozen-columns-and-column-group-hidden-col.html diff --git a/examples/example-column-hidden.html b/examples/example-column-hidden.html index 105023e4..01deccd5 100644 --- a/examples/example-column-hidden.html +++ b/examples/example-column-hidden.html @@ -9,7 +9,6 @@ - + + +
+
+
+
+ +
+

Demonstrates:

+
    +
  • Frozen columns with extra header row grouping columns into categories
    • +
+
+ + +
+
+ Hide Duration Column +

+ Hide Finish Column +
+

View Source:

+ +
+
+ + + + + + + + + + + + + + + + From b1a59d4493924622a4cf9edb9f52fc40c2cab5e1 Mon Sep 17 00:00:00 2001 From: Ben McIntyre Date: Mon, 15 May 2023 14:11:02 +0930 Subject: [PATCH 3/4] final changes: add frozen columns example, fix issue with hidden columns on frozen grid boundary, fix gridmenu control to work with .hidden flag on columns) --- controls/slick.gridmenu.js | 3 +- examples/example-column-hidden.html | 2 +- ...n-columns-and-column-group-hidden-col.html | 58 ++++++++++--------- slick.grid.js | 21 +++---- 4 files changed, 44 insertions(+), 40 deletions(-) diff --git a/controls/slick.gridmenu.js b/controls/slick.gridmenu.js index 7c40380b..bd62d4a5 100644 --- a/controls/slick.gridmenu.js +++ b/controls/slick.gridmenu.js @@ -453,7 +453,7 @@ checkboxElm.dataset.columnid = columns[i].id; liElm.appendChild(checkboxElm); - if (_grid.getColumnIndex(columns[i].id) != null) { + if (_grid.getColumnIndex(columns[i].id) != null && !columns[i].hidden) { checkboxElm.checked = true; } @@ -679,6 +679,7 @@ let visibleColumns = []; columnCheckboxes.forEach((columnCheckbox, idx) => { if (columnCheckbox.checked) { + if (columns[idx].hidden) columns[idx].hidden = false; visibleColumns.push(columns[idx]); } }); diff --git a/examples/example-column-hidden.html b/examples/example-column-hidden.html index 01deccd5..a7003cda 100644 --- a/examples/example-column-hidden.html +++ b/examples/example-column-hidden.html @@ -379,7 +379,7 @@

View Source:

//$("#chkHideColumn").change(function () { var hideCol = document.querySelector('#chkHideColumn').checked || false; columns[2].hidden = hideCol; - grid.setColumns(columns); + grid.updateColumns(); }); // initialize the model after all the events have been hooked up diff --git a/examples/example-frozen-columns-and-column-group-hidden-col.html b/examples/example-frozen-columns-and-column-group-hidden-col.html index 95d58905..d3be0f31 100644 --- a/examples/example-frozen-columns-and-column-group-hidden-col.html +++ b/examples/example-frozen-columns-and-column-group-hidden-col.html @@ -46,9 +46,6 @@

View Source:

- - - @@ -63,39 +60,42 @@

View Source:

// when it's a frozen grid, we need to render both side (left/right) if (options.frozenColumn >=0) { // Add column groups to left panel - var $preHeaderPanel = $(grid.getPreHeaderPanelLeft()); - renderHeaderGroups($preHeaderPanel, 0, options.frozenColumn + 1, columns.length); + var preHeaderPanelElm = grid.getPreHeaderPanelLeft(); + renderHeaderGroups(preHeaderPanelElm, 0, options.frozenColumn + 1, columns.length); // Add column groups to right panel - $preHeaderPanel = $(grid.getPreHeaderPanelRight()); - renderHeaderGroups($preHeaderPanel, options.frozenColumn + 1, columns.length); + preHeaderPanelElm = grid.getPreHeaderPanelRight(); + renderHeaderGroups(preHeaderPanelElm, options.frozenColumn + 1, columns.length); } else { // when it's a regular grid (without frozen rows), after clearning frozen columns, we re-render everything on the left - var $preHeaderPanel = $(grid.getPreHeaderPanelLeft()); - renderHeaderGroups($preHeaderPanel, 0, columns.length); + var preHeaderPanelElm = grid.getPreHeaderPanelLeft(); + renderHeaderGroups(preHeaderPanelElm, 0, columns.length); } function renderHeaderGroups(preHeaderPanel, start, end) { - preHeaderPanel.empty() - .addClass("slick-header-columns") - .css('left','-1000px') - .width(grid.getHeadersWidth()); - preHeaderPanel.parent().addClass("slick-header"); + preHeaderPanel.innerHTML = ''; + preHeaderPanel.classList.add("slick-header-columns"); + preHeaderPanel.style.left = '-1000px'; + preHeaderPanel.style.width = `${grid.getHeadersWidth()}px`; + preHeaderPanel.parentElement.classList.add("slick-header"); var headerColumnWidthDiff = grid.getHeaderColumnWidthDiff(); var m, header, lastColumnGroup = '', widthTotal = 0; - + for (var i = start; i < end; i++) { m = columns[i]; + if (m.hidden) continue; + if (lastColumnGroup === m.columnGroup && i>start) { widthTotal += m.width; - header.width(widthTotal - headerColumnWidthDiff) + header.style.width = `${widthTotal - headerColumnWidthDiff}px`; } else { widthTotal = m.width; - header = $("
") - .html("" + (m.columnGroup || '') + "") - .width(m.width - headerColumnWidthDiff) - .appendTo(preHeaderPanel); + header = document.createElement('div'); + header.className = 'ui-state-default slick-header-column'; + header.innerHTML = `${(m.columnGroup || '')}`; + header.style.width = `${m.width - headerColumnWidthDiff}px`; + preHeaderPanel.appendChild(header); } lastColumnGroup = m.columnGroup; } @@ -130,7 +130,7 @@

View Source:

explicitInitialization: true, frozenColumn: 2, - // if you wish to include the columnGroup as part of the pickers, you can do so with following code + // if you wish to include the columnGroup as part of the pickers, you can do so with following code columnPicker: { headerColumnValueExtractor: pickerHeaderColumnValueExtractor }, @@ -160,7 +160,7 @@

View Source:

{id: "effort-driven", name: "Effort Driven", width: 140, minWidth: 20, maxWidth: 140, field: "effortDriven", columnGroup:"Analysis"} ]; - $(function () { + document.addEventListener("DOMContentLoaded", function() { for (var i = 0; i < 50000; i++) { var d = (data[i] = {}); @@ -201,28 +201,30 @@

View Source:

setFrozenColumns(-1); } }); - + document.querySelector('#chkHideColumn1').addEventListener("change", function(e) { //$("#chkHideColumn").change(function () { var hideCol = document.querySelector('#chkHideColumn1').checked || false; columns[2].hidden = hideCol; - grid.setColumns(columns); - }); + grid.updateColumns(); + CreateAddlHeaderRow(); + }); document.querySelector('#chkHideColumn2').addEventListener("change", function(e) { //$("#chkHideColumn").change(function () { var hideCol = document.querySelector('#chkHideColumn2').checked || false; columns[4].hidden = hideCol; - grid.setColumns(columns); + grid.updateColumns(); + CreateAddlHeaderRow(); }); // Initialise data dataView.beginUpdate(); dataView.setItems(data); dataView.endUpdate(); - + CreateAddlHeaderRow(); - }) + }); diff --git a/slick.grid.js b/slick.grid.js index fa6cac32..0214bd18 100644 --- a/slick.grid.js +++ b/slick.grid.js @@ -3041,20 +3041,21 @@ if (typeof Slick === "undefined") { function applyColumnWidths() { var x = 0, w, rule; for (var i = 0; i < columns.length; i++) { - if (columns[i].hidden) continue; - - w = columns[i].width; + if (!columns[i].hidden) { + w = columns[i].width; - rule = getColumnCssRules(i); - rule.left.style.left = x + "px"; - rule.right.style.right = (((options.frozenColumn != -1 && i > options.frozenColumn) ? canvasWidthR : canvasWidthL) - x - w) + "px"; + rule = getColumnCssRules(i); + rule.left.style.left = x + "px"; + rule.right.style.right = (((options.frozenColumn != -1 && i > options.frozenColumn) ? canvasWidthR : canvasWidthL) - x - w) + "px"; - // If this column is frozen, reset the css left value since the - // column starts in a new viewport. + // If this column is frozen, reset the css left value since the + // column starts in a new viewport. + if (options.frozenColumn != i) { + x += columns[i].width; + } + } if (options.frozenColumn == i) { x = 0; - } else { - x += columns[i].width; } } } From d70b7e9409ccdb51fd47d9ba5e9d82c5ac89b5c7 Mon Sep 17 00:00:00 2001 From: Ben McIntyre Date: Tue, 16 May 2023 23:10:02 +0930 Subject: [PATCH 4/4] changes as suggested in #765 --- controls/slick.gridmenu.js | 2 +- examples/example-column-hidden.html | 96 +---------------------------- 2 files changed, 2 insertions(+), 96 deletions(-) diff --git a/controls/slick.gridmenu.js b/controls/slick.gridmenu.js index bd62d4a5..36badfc6 100644 --- a/controls/slick.gridmenu.js +++ b/controls/slick.gridmenu.js @@ -679,7 +679,7 @@ let visibleColumns = []; columnCheckboxes.forEach((columnCheckbox, idx) => { if (columnCheckbox.checked) { - if (columns[idx].hidden) columns[idx].hidden = false; + if (columns[idx].hidden) { columns[idx].hidden = false; } visibleColumns.push(columns[idx]); } }); diff --git a/examples/example-column-hidden.html b/examples/example-column-hidden.html index a7003cda..9586f3a1 100644 --- a/examples/example-column-hidden.html +++ b/examples/example-column-hidden.html @@ -37,9 +37,7 @@
- -
+
@@ -48,15 +46,6 @@ Search:
- - -
- -
-
- - -



Hide Duration Column @@ -176,26 +165,6 @@

View Source:

return (x == y ? 0 : (x > y ? 1 : -1)); } -function toggleFilterRow() { - grid.setTopPanelVisibility(!grid.getOptions().showTopPanel); -} - -let elList = document.querySelectorAll('.grid-header .ui-icon'); -elList.forEach(function(el) { - el.classList.add('ui-state-default ui-corner-all'); - el.addEventListener("mouseover", function(e) { e.target.classList.add('ui-state-hover'); }); - el.addEventListener("mouseleave", function(e) { e.target.classList.remove('ui-state-hover'); }); -}); - -//$(".grid-header .ui-icon") -// .addClass("ui-state-default ui-corner-all") -// .mouseover(function (e) { -// $(e.target).addClass("ui-state-hover") -// }) -// .mouseout(function (e) { -// $(e.target).removeClass("ui-state-hover") -// }); - document.addEventListener("DOMContentLoaded", function() { // prepare the data for (var i = 0; i < 50000; i++) { @@ -219,16 +188,6 @@

View Source:

var pager = new Slick.Controls.Pager(dataView, grid, document.querySelector('#pager')); var columnpicker = new Slick.Controls.ColumnPicker(columns, grid, options); - - // move the filter panel defined in a hidden div into grid top panel - let el = document.querySelector('#inlineFilterPanel'); - grid.getTopPanel().append(el); - el.style.display = 'block'; - - //$("#inlineFilterPanel") - // .appendTo(grid.getTopPanel()) - // .show(); - grid.onCellChange.subscribe(function (e, args) { dataView.updateItem(args.item.id, args.item); }); @@ -310,58 +269,6 @@

View Source:

console.log('on Before Paging Info Changed - Previous Paging:: ', previousPagingInfo); }); - var h_runfilters = null; - - // wire up the slider to apply the filter to the model - var slider = document.getElementById("pcSlider"); - var slider2 = document.getElementById("pcSlider2"); - var sliderCallback = function() { - Slick.GlobalEditorLock.cancelCurrentEdit(); - - if (percentCompleteThreshold != this.value) { - window.clearTimeout(h_runfilters); - h_runfilters = window.setTimeout(updateFilter, 10); - percentCompleteThreshold = this.value; - } - } - - slider.oninput = sliderCallback; - slider2.oninput = sliderCallback; - - // wire up the search textbox to apply the filter to the model - document.querySelector('#txtSearch,#txtSearch2').addEventListener("keyup", function(e) { - Slick.GlobalEditorLock.cancelCurrentEdit(); - - // clear on Esc - if (e.which == 27) { - this.value = ""; - } - - searchString = this.value; - updateFilter(); - }); - -// $("#txtSearch,#txtSearch2").keyup(function (e) { -// Slick.GlobalEditorLock.cancelCurrentEdit(); -// -// // clear on Esc -// if (e.which == 27) { -// this.value = ""; -// } -// -// searchString = this.value; -// updateFilter(); -// }); - - function updateFilter() { - dataView.setFilterArgs({ - percentCompleteThreshold: percentCompleteThreshold, - searchString: searchString - }); - dataView.refresh(); - } - -// $("#btnSelectRows").click(function () { document.querySelector('#btnSelectRows').addEventListener("click", function(e) { if (!Slick.GlobalEditorLock.commitCurrentEdit()) { return; @@ -376,7 +283,6 @@

View Source:

}); document.querySelector('#chkHideColumn').addEventListener("change", function(e) { - //$("#chkHideColumn").change(function () { var hideCol = document.querySelector('#chkHideColumn').checked || false; columns[2].hidden = hideCol; grid.updateColumns();