diff --git a/packages/common/src/extensions/__tests__/slickDraggableGrouping.spec.ts b/packages/common/src/extensions/__tests__/slickDraggableGrouping.spec.ts
index 42e34ca08..b455916f7 100644
--- a/packages/common/src/extensions/__tests__/slickDraggableGrouping.spec.ts
+++ b/packages/common/src/extensions/__tests__/slickDraggableGrouping.spec.ts
@@ -65,6 +65,7 @@ const mockColumns = [ // The column definitions
grouping: {
getter: 'age', aggregators: [new Aggregators.Avg('age')],
formatter: (g) => `Age: ${g.value} (${g.count} items)`,
+ collapsed: true
}
},
{
@@ -360,6 +361,7 @@ describe('Draggable Grouping Plugin', () => {
mockHeaderColumnDiv1.className = 'slick-dropped-grouping';
mockHeaderColumnDiv1.id = 'age';
mockHeaderColumnDiv1.dataset.id = 'age';
+ mockColumns[2].grouping.collapsed = false;
mockHeaderColumnDiv2 = document.createElement('div');
mockHeaderColumnDiv2.className = 'slick-dropped-grouping';
@@ -389,7 +391,7 @@ describe('Draggable Grouping Plugin', () => {
expect(plugin.columnsGroupBy.length).toBeGreaterThan(0);
expect(groupChangedSpy).toHaveBeenCalledWith({
caller: 'sort-group',
- groupColumns: [{ aggregators: expect.toBeArray(), formatter: mockColumns[2].grouping.formatter, getter: 'age' }],
+ groupColumns: [{ aggregators: expect.toBeArray(), formatter: mockColumns[2].grouping.formatter, getter: 'age', collapsed: false, }],
});
jest.spyOn(gridStub, 'getHeaderColumn').mockReturnValue(mockHeaderColumnDiv1);
@@ -415,22 +417,22 @@ describe('Draggable Grouping Plugin', () => {
const clickEvent = new Event('click');
Object.defineProperty(clickEvent, 'target', { writable: true, configurable: true, value: toggleAllIconElm });
- // initially expanded
- expect(toggleAllIconElm.classList.contains('expanded')).toBeTruthy();
+ // initially collapsed
expect(toggleAllIconElm.classList.contains('collapsed')).toBeFalsy();
+ expect(toggleAllIconElm.classList.contains('expanded')).toBeTruthy();
// collapsed after toggle
toggleAllElm.dispatchEvent(clickEvent);
toggleAllElm = document.querySelector('.slick-group-toggle-all');
- expect(toggleAllIconElm.classList.contains('expanded')).toBeFalsy();
expect(toggleAllIconElm.classList.contains('collapsed')).toBeTruthy();
+ expect(toggleAllIconElm.classList.contains('expanded')).toBeFalsy();
expect(dvCollapseSpy).toHaveBeenCalled();
// expanded after toggle
toggleAllElm.dispatchEvent(clickEvent);
toggleAllElm = document.querySelector('.slick-group-toggle-all');
- expect(toggleAllIconElm.classList.contains('expanded')).toBeTruthy();
expect(toggleAllIconElm.classList.contains('collapsed')).toBeFalsy();
+ expect(toggleAllIconElm.classList.contains('expanded')).toBeTruthy();
expect(dvExpandSpy).toHaveBeenCalled();
});
diff --git a/packages/common/src/extensions/slickDraggableGrouping.ts b/packages/common/src/extensions/slickDraggableGrouping.ts
index de9d69883..1c088447e 100644
--- a/packages/common/src/extensions/slickDraggableGrouping.ts
+++ b/packages/common/src/extensions/slickDraggableGrouping.ts
@@ -79,7 +79,7 @@ export class SlickDraggableGrouping {
protected _grid?: SlickGrid;
protected _gridColumns: Column[] = [];
protected _gridUid = '';
- protected _groupToggler!: HTMLDivElement;
+ protected _groupToggler?: HTMLDivElement;
protected _sortableInstance: any;
protected _subscriptions: EventSubscription[] = [];
protected _defaults = {
@@ -160,7 +160,7 @@ export class SlickDraggableGrouping {
title: this._addonOptions.toggleAllPlaceholderText ?? '',
style: { display: 'none' },
});
- const groupTogglerIconElm = createDomElement('span', { className: 'slick-group-toggle-all-icon expanded mdi mdi-close' });
+ const groupTogglerIconElm = createDomElement('span', { className: 'slick-group-toggle-all-icon' });
this._groupToggler.appendChild(groupTogglerIconElm);
if (this.gridOptions.enableTranslate && this._addonOptions.toggleAllButtonTextKey) {
@@ -341,7 +341,7 @@ export class SlickDraggableGrouping {
this.updateGroupBy('add-group');
}
- protected addGroupByRemoveClickHandler(id: string | number, _container: HTMLDivElement, column: Column, entry: any) {
+ protected addGroupByRemoveClickHandler(id: string | number, _container: HTMLDivElement, headerColumn: JQuery, entry: any) {
const groupRemoveElm = document.querySelector(`${this.gridUidSelector}_${id}_entry > .slick-groupby-remove`);
if (groupRemoveElm) {
this._bindEventService.bind(groupRemoveElm, 'click', () => {
@@ -349,13 +349,13 @@ export class SlickDraggableGrouping {
for (const boundedEvent of boundedElms) {
this._bindEventService.unbind(boundedEvent.element, 'click', boundedEvent.listener);
}
- this.removeGroupBy(id, column, entry);
+ this.removeGroupBy(id, headerColumn, entry);
});
}
}
- protected handleGroupByDrop(container: any, column: any) {
- const columnid = column.attr('id').replace(this._gridUid, '');
+ protected handleGroupByDrop(container: HTMLDivElement, headerColumn: JQuery) {
+ const columnid = headerColumn.attr('id')!.replace(this._gridUid, '');
let columnAllowed = true;
this.columnsGroupBy.forEach(col => {
if (col.id === columnid) {
@@ -367,10 +367,10 @@ export class SlickDraggableGrouping {
this._gridColumns.forEach(col => {
if (col.id === columnid) {
if (col.grouping !== null && !isEmptyObject(col.grouping)) {
- const columnName = column.children('.slick-column-name').first();
+ const columnName = headerColumn.children('.slick-column-name').first();
const entryElm = createDomElement('div', { id: `${this._gridUid}_${col.id}_entry`, className: 'slick-dropped-grouping', dataset: { id: `${col.id}` } });
const groupTextElm = createDomElement('div', {
- textContent: columnName.length ? columnName.text() : column.text(),
+ textContent: columnName.length ? columnName.text() : headerColumn.text(),
style: { display: 'inline-flex' },
});
entryElm.appendChild(groupTextElm);
@@ -386,14 +386,27 @@ export class SlickDraggableGrouping {
entryElm.appendChild(groupRemoveIconElm);
entryElm.appendChild(document.createElement('div'));
container.appendChild(entryElm);
+
+ // if we're grouping by only 1 group, at the root, we'll analyze Toggle All and add collapsed/expanded class
+ if (this._groupToggler && this.columnsGroupBy.length === 0) {
+ const togglerIcon = this._groupToggler.querySelector('.slick-group-toggle-all-icon');
+ if (col.grouping?.collapsed) {
+ togglerIcon?.classList.add('collapsed');
+ togglerIcon?.classList.remove('expanded');
+ } else {
+ togglerIcon?.classList.add('expanded');
+ togglerIcon?.classList.remove('collapsed');
+ }
+ }
+
this.addColumnGroupBy(col);
- this.addGroupByRemoveClickHandler(col.id, container, column, entryElm);
+ this.addGroupByRemoveClickHandler(col.id, container, headerColumn, entryElm);
}
}
});
// show the "Toggle All" when feature is enabled
- if (this._groupToggler) {
+ if (this._groupToggler && this.columnsGroupBy.length > 0) {
this._groupToggler.style.display = 'inline-block';
}
}
@@ -409,10 +422,10 @@ export class SlickDraggableGrouping {
return arrayToModify;
}
- protected removeGroupBy(id: string | number, _column: Column, entry: any) {
+ protected removeGroupBy(id: string | number, _hdrColumn: JQuery, entry: any) {
entry.remove();
const groupByColumns: Column[] = [];
- this._gridColumns.forEach((col: any) => groupByColumns[col.id] = col);
+ this._gridColumns.forEach(col => groupByColumns[col.id as number] = col);
this.removeFromArray(this.columnsGroupBy, groupByColumns[id as any]);
if (this.columnsGroupBy.length === 0) {
// show placeholder text & hide the "Toggle All" when that later feature is enabled
diff --git a/packages/common/src/styles/_variables-theme-material.scss b/packages/common/src/styles/_variables-theme-material.scss
index ca3b2c721..6b634a2ab 100644
--- a/packages/common/src/styles/_variables-theme-material.scss
+++ b/packages/common/src/styles/_variables-theme-material.scss
@@ -84,6 +84,8 @@ $slick-draggable-group-drop-border-right: 0px !default;
$slick-draggable-group-drop-width: 100% !default;
$slick-draggable-group-drop-radius: 0 !default;
$slick-draggable-group-delete-vertical-align: middle !default;
+$slick-draggable-group-toggle-all-icon-height: $slick-icon-font-size !default;
+$slick-draggable-group-toggle-all-icon-width: $slick-icon-font-size !default;
$slick-draggable-group-toggle-all-icon-vertical-align: text-bottom !default;
$slick-draggable-group-toggle-collapsed-icon: $slick-icon-group-collapsed !default;
$slick-draggable-group-toggle-expanded-icon: $slick-icon-group-expanded !default;
diff --git a/packages/common/src/styles/_variables-theme-salesforce.scss b/packages/common/src/styles/_variables-theme-salesforce.scss
index 87285f0f9..e21eff9b6 100644
--- a/packages/common/src/styles/_variables-theme-salesforce.scss
+++ b/packages/common/src/styles/_variables-theme-salesforce.scss
@@ -104,6 +104,8 @@ $slick-draggable-group-drop-border-top: 0px !default;
$slick-draggable-group-drop-width: 100% !default;
$slick-draggable-group-drop-radius: 0px !default;
$slick-draggable-group-delete-vertical-align: middle !default;
+$slick-draggable-group-toggle-all-icon-height: $slick-icon-font-size !default;
+$slick-draggable-group-toggle-all-icon-width: $slick-icon-font-size !default;
$slick-draggable-group-toggle-all-icon-vertical-align: text-bottom !default;
$slick-draggable-group-toggle-collapsed-icon: $slick-icon-group-collapsed !default;
$slick-draggable-group-toggle-expanded-icon: $slick-icon-group-expanded !default;
diff --git a/packages/common/src/styles/_variables.scss b/packages/common/src/styles/_variables.scss
index fe04fd3e2..19d1c39ac 100644
--- a/packages/common/src/styles/_variables.scss
+++ b/packages/common/src/styles/_variables.scss
@@ -606,6 +606,11 @@ $slick-compound-filter-text-padding: 0 0 0 2px !default;
$slick-date-range-filter-border-radius: 4px !default;
/* Draggable Grouping Plugin */
+$slick-draggable-group-column-background-color: transparent !default;
+$slick-draggable-group-column-border: 1px solid transparent !default;
+$slick-draggable-group-column-border-radius: 6px !default;
+$slick-draggable-group-column-padding: 0 5px !default;
+$slick-draggable-group-column-margin-right: 2px !default;
$slick-draggable-group-drop-border: 1px solid #e0e0e0 !default;
$slick-draggable-group-drop-border-top: $slick-draggable-group-drop-border !default;
$slick-draggable-group-drop-border-bottom: $slick-draggable-group-drop-border !default;
@@ -623,21 +628,23 @@ $slick-draggable-group-placeholder-color: #616161 !default;
$slick-draggable-group-delete-color: pink !default;
$slick-draggable-group-delete-hover-color: red !default;
$slick-draggable-group-delete-padding-left: 5px !default;
-$slick-draggable-group-delete-padding-right: 7px !default;
+$slick-draggable-group-delete-padding-right: 0px !default;
$slick-draggable-group-delete-font-size: 16px !default;
$slick-draggable-group-delete-vertical-align: baseline !default;
$slick-draggable-group-toggle-all-border: 1px solid #c7c7c7 !default;
$slick-draggable-group-toggle-all-border-radius: 3px !default;
$slick-draggable-group-toggle-all-color: $slick-icon-group-color !default;
$slick-draggable-group-toggle-all-display: none !default;
-$slick-draggable-group-toggle-all-margin-right: 8px !default;
-$slick-draggable-group-toggle-all-padding: 0 6px !default;
+$slick-draggable-group-toggle-all-margin-right: 15px !default;
+$slick-draggable-group-toggle-all-padding: 0 8px !default;
$slick-draggable-group-toggle-all-position: relative !default;
$slick-draggable-group-toggle-all-top: 0px !default;
$slick-draggable-group-toggle-all-right: unset !default;
$slick-draggable-group-toggle-all-icon-vertical-align: middle !default;
$slick-draggable-group-toggle-all-text-font-size: 15px !default;
$slick-draggable-group-toggle-all-text-margin: 0 0 0 2px !default;
+$slick-draggable-group-toggle-all-icon-height: inherit !default;
+$slick-draggable-group-toggle-all-icon-width: $slick-icon-font-size !default;
$slick-draggable-group-toggle-collapsed-icon: "\f0fe" !default;
$slick-draggable-group-toggle-expanded-icon: "\f146" !default;
$slick-draggable-group-title-height: $slick-icon-group-height !default;
diff --git a/packages/common/src/styles/slick-plugins.scss b/packages/common/src/styles/slick-plugins.scss
index 67085ff95..20ce5fd30 100644
--- a/packages/common/src/styles/slick-plugins.scss
+++ b/packages/common/src/styles/slick-plugins.scss
@@ -885,11 +885,13 @@ input.flatpickr.form-control {
.slick-group-toggle-all-icon.collapsed:before {
content: var(--slick-draggable-group-toggle-collapsed-icon, $slick-draggable-group-toggle-collapsed-icon);
}
- .slick-group-toggle-all-icon.collapsed:before,
- .slick-group-toggle-all-icon.expanded:before {
+ .slick-group-toggle-all-icon:before {
+ display: inline-block;
color: var(--slick-draggable-group-toggle-all-color, $slick-draggable-group-toggle-all-color);
font-family: var(--slick-icon-font-family, $slick-icon-font-family);
vertical-align: var(--slick-draggable-group-toggle-all-icon-vertical-align, $slick-draggable-group-toggle-all-icon-vertical-align);
+ height: var(--slick-draggable-group-toggle-all-icon-height, $slick-draggable-group-toggle-all-icon-height);
+ width: var(--slick-draggable-group-toggle-all-icon-width, $slick-draggable-group-toggle-all-icon-width);
}
.slick-group-toggle-all-text {
font-size: var(--slick-draggable-group-toggle-all-text-font-size, $slick-draggable-group-toggle-all-text-font-size);
@@ -898,9 +900,14 @@ input.flatpickr.form-control {
}
.slick-dropped-grouping {
- display: inline-block;
- vertical-align: middle;
cursor: move;
+ display: flex;
+ align-items: center;
+ background-color: var(--slick-draggable-group-column-background-color, $slick-draggable-group-column-background-color);
+ border: var(--slick-draggable-group-column-border, $slick-draggable-group-column-border);
+ border-radius: var(--slick-draggable-group-column-border-radius, $slick-draggable-group-column-border-radius);
+ padding: var(--slick-draggable-group-column-padding, $slick-draggable-group-column-padding);
+ margin-right: var(--slick-draggable-group-column-margin-right, $slick-draggable-group-column-margin-right);
}
.slick-groupby-remove {