[pull] latest from ag-grid:latest

community-modules/styles/src/internal/base/parts/_columns-tool-panel.scss

@@ -59,7 +59,7 @@
         line-height: 1.5;
     }
 
-    .ag-column-panel .ag-standard-button.ag-column-panel-buttons-apply-button {
+    .ag-column-panel .ag-standard-button.ag-column-panel-buttons-apply-button:not(:disabled) {
         color: var(--ag-column-panel-apply-button-color);
         background-color: var(--ag-column-panel-apply-button-background-color);
     }

documentation/ag-grid-docs/src/content/docs/tool-panel-columns/index.mdoc

@@ -24,9 +24,19 @@ Selecting columns means different things depending on whether the grid is in piv
 -   **Pivot Mode Off**: When pivot mode is off, selecting a column toggles the visibility of the column. A selected column is visible and an unselected column is hidden. With `allowDragFromColumnsToolPanel=true`, you can drag a column from the tool panel onto the grid and it will become visible.
 -   **Pivot Mode On**: When pivot mode is on, selecting a column will trigger the column to be either aggregated, grouped or pivoted depending on what is allowed for that column.
 
-## Deferred Apply Mode
+## Deferred Updates
 
-You can configure the Columns Tool Panel to stage changes and require an explicit **Apply** action before they are committed.
+You can configure the Columns Tool Panel to stage changes and require an explicit **Apply** action before they are committed. This allows multiple configuration changes to be made and applied in a single update, avoiding unnecessary intermediate recomputations or requests.
+
+Deferred Updates are enabled by including the **Apply** button in `toolPanelParams.buttons`.
+
+The example below uses the Server-Side Row Model. Note that in the example below:
+
+-   Changes made in the Columns Tool Panel (CTP) are staged as pending changes.
+-   **Apply** commits all pending changes in a single operation.
+-   **Cancel** discards all pending changes and restores the last applied state.
+
+{% gridExampleRunner title="Deferred Updates" name="deferred-apply-mode"  exampleHeight=830 /%}
 
 ```{% frameworkTransform=true %}
 const gridOptions = {
@@ -48,18 +58,9 @@ const gridOptions = {
 };
 ```
 
-When `buttons` includes `'apply'`:
-
--   Changes made in the Columns Tool Panel are staged as pending changes.
--   The configured buttons are displayed at the bottom of the tool panel.
--   **Apply** commits pending changes.
--   **Cancel** discards pending changes.
-
-Changes made outside the Columns Tool Panel (for example via other grid entry points) continue to apply immediately.
-
-The example below uses the Server-Side Row Model.
-
-{% gridExampleRunner title="Deferred Apply Mode" name="deferred-apply-mode"  exampleHeight=830 /%}
+{% note %}
+Changes made outside the Columns Tool Panel — such as dragging columns into the Row Group or Pivot Panels, using the Column Menu, or calling the Grid / Column API — are applied immediately and clear any pending changes. Column pinning, resizing, and group expansion do not clear pending changes.
+{% /note %}
 
 ## Columns Tool Panel Sections
 

packages/ag-grid-community/src/validation/errorMessages/errorText.ts

@@ -733,8 +733,7 @@ export const AG_GRID_ERRORS = {
         'Since v35, `api.hideOverlay()` does not hide the overlay when `activeOverlay` is set. Set `activeOverlay=null` instead.' as const,
     297: () =>
         '`api.hideOverlay()` does not hide the no matching rows overlay as it is only controlled by grid state. Set `suppressOverlays=["noMatchingRows"] to not show it.' as const,
-    298: () =>
-        `Columns Tool Panel 'buttons' requires 'apply' to enable deferred mode. Without it, other buttons have no effect.` as const,
+    298: () => `Columns Tool Panel 'buttons' requires 'apply' to enable Deferred Updates.` as const,
 };
 
 export type ErrorMap = typeof AG_GRID_ERRORS;

packages/ag-grid-enterprise/src/columnToolPanel/columnToolPanel.css

@@ -61,7 +61,7 @@
 }
 
 /* stylelint-disable-next-line selector-max-specificity */
-:where(.ag-column-panel) .ag-column-panel-buttons-apply-button {
+:where(.ag-column-panel) .ag-column-panel-buttons-apply-button:not(:disabled) {
     color: var(--ag-column-panel-apply-button-color);
     background-color: var(--ag-column-panel-apply-button-background-color);
 }

packages/ag-grid-enterprise/src/columnToolPanel/columnToolPanel.ts

@@ -148,11 +148,13 @@ export class ColumnToolPanel extends Component implements IColumnToolPanel, IToo
             );
         }
 
-        if (mergedParams.buttons?.length) {
+        if (mergedParams.buttons) {
             if (!mergedParams.buttons.includes('apply')) {
                 _warn(298);
             }
-            this.initDeferredButtons(mergedParams.buttons);
+            if (mergedParams.buttons.length) {
+                this.initDeferredButtons(mergedParams.buttons);
+            }
         }
 
         this.initialised = true;

packages/ag-grid-enterprise/src/columnToolPanel/toolPanelColumnComp.ts

@@ -231,6 +231,10 @@ export class ToolPanelColumnComp extends Component {
         const beans = this.beans;
         const { gos, eventSvc, dragAndDrop } = beans;
 
+        if (isDeferredMode(this.params)) {
+            eDragHandle.setAttribute('data-column-tool-panel-deferred', '');
+        }
+
         let hideColumnOnExit = !gos.get('suppressDragLeaveHidesColumns');
         const dragSource: GridDragSource = {
             type: DragSourceType.ToolPanel,
@@ -251,7 +255,7 @@ export class ToolPanelColumnComp extends Component {
                 });
             },
             onGridEnter: (dragItem: DragItem | null) => {
-                if (hideColumnOnExit) {
+                if (hideColumnOnExit && !isDeferredMode(this.params)) {
                     // when dragged into the grid, restore the state that was active pre-drag
                     updateColumns(beans, {
                         columns: [this.column],
@@ -263,8 +267,8 @@ export class ToolPanelColumnComp extends Component {
                 }
             },
             onGridExit: () => {
-                if (hideColumnOnExit) {
-                    // when dragged outside of the grid, mimic what happens when checkbox is disabled
+                if (hideColumnOnExit && !isDeferredMode(this.params)) {
+                    // when dragged outside of the grid, copy what happens when checkbox is disabled
                     // this handles the behaviour for pivot which is different to just hiding a column.
                     this.onChangeCommon(false);
                 }

packages/ag-grid-enterprise/src/columnToolPanel/updates/columnStateUpdateExecutionStrategy.ts

@@ -265,7 +265,7 @@ class DeferredColumnStateUpdateStrategy implements ColumnStateConcreteUpdateStra
                     (patch.hide !== undefined && patch.hide !== !column.isVisible()) ||
                     (patch.rowGroup !== undefined && !!patch.rowGroup !== column.isRowGroupActive()) ||
                     (patch.pivot !== undefined && !!patch.pivot !== column.isPivotActive()) ||
-                    (patch.aggFunc !== undefined && patch.aggFunc !== column.getAggFunc())
+                    (patch.aggFunc !== undefined && (patch.aggFunc ?? null) !== (column.getAggFunc() ?? null))
                 ) {
                     return true;
                 }
@@ -646,11 +646,16 @@ class DeferredColumnStateUpdateStrategy implements ColumnStateConcreteUpdateStra
             return [];
         }
 
+        const livePivotColumns = this.beans.pivotColsSvc?.columns;
+        const fallbackColumns = livePivotColumns?.length
+            ? livePivotColumns
+            : getDraftColumns(this.beans, this.lastPivotColIds);
+
         return getDraftColumns(
             this.beans,
             getDraftFunctionColumnIds(
                 this.state.pivot?.colIds,
-                this.beans.pivotColsSvc?.columns,
+                fallbackColumns,
                 this.state.columnState?.patches,
                 (patch) => (patch.pivot == null ? undefined : !!patch.pivot)
             )

packages/ag-grid-enterprise/src/rowGrouping/columnDropZones/baseDropZonePanel.ts

@@ -9,8 +9,6 @@ import { DropZoneColumnComp } from './dropZoneColumnComp';
 
 export type TDropZone = 'rowGroup' | 'pivot' | 'aggregation';
 
-const DEFERRED_TOOL_PANEL_CLASS = 'ag-column-panel-deferred';
-
 export abstract class BaseDropZonePanel extends PillDropZonePanel<DropZoneColumnComp, AgColumn> {
     constructor(
         horizontal: boolean,
@@ -49,7 +47,7 @@ export abstract class BaseDropZonePanel extends PillDropZonePanel<DropZoneColumn
             return true;
         }
 
-        return !sourceElement.closest(`.${DEFERRED_TOOL_PANEL_CLASS}`);
+        return !sourceElement.hasAttribute('data-column-tool-panel-deferred');
     }
 
     protected override minimumAllowedNewInsertIndex(): number {

packages/ag-grid-enterprise/src/rowGrouping/columnDropZones/dropZoneColumnComp.ts

@@ -10,7 +10,7 @@ import type {
 } from 'ag-grid-community';
 import { Component, DragSourceType, KeyCode, RefPlaceholder, _createElement } from 'ag-grid-community';
 
-import { isDeferredMode } from '../../columnToolPanel/toolPanelDeferredUiUtils';
+import { isDeferredMode, refreshDeferredToolPanelUi } from '../../columnToolPanel/toolPanelDeferredUiUtils';
 import type { ColumnStateUpdateParams } from '../../columnToolPanel/updates/columnStateUpdateTypes';
 import { PillDragComp } from '../../widgets/pillDragComp';
 import { VirtualList } from '../../widgets/virtualList';
@@ -61,6 +61,10 @@ export class DropZoneColumnComp extends PillDragComp<AgColumn> {
 
         super.postConstruct();
 
+        if (this.deferApply) {
+            this.eDragHandle.setAttribute('data-column-tool-panel-deferred', '');
+        }
+
         if (sortSvc) {
             this.setupSort();
 
@@ -178,6 +182,7 @@ export class DropZoneColumnComp extends PillDragComp<AgColumn> {
                 this.beans.columnStateUpdateStrategy.progressSortFromEvent(this.deferApply, column, event);
                 eSortIndicator.refresh();
                 this.setupAria();
+                refreshDeferredToolPanelUi(this.beans, this.updateParams);
             };
 
             this.addGuiEventListener('click', performSort);
@@ -360,6 +365,7 @@ export class DropZoneColumnComp extends PillDragComp<AgColumn> {
                 eText.textContent = this.getDisplayValue();
             }
             this.setupAria();
+            refreshDeferredToolPanelUi(this.beans, this.updateParams);
         };
 
         const localeTextFunc = this.getLocaleTextFunc();

packages/ag-grid-enterprise/src/widgets/pillDragComp.ts

@@ -38,7 +38,7 @@ const PillDragCompElement: ElementParams = {
 };
 export abstract class PillDragComp<TItem> extends Component<PillDragCompEvent> {
     private readonly eText: HTMLElement = RefPlaceholder;
-    private readonly eDragHandle: HTMLElement = RefPlaceholder;
+    protected readonly eDragHandle: HTMLElement = RefPlaceholder;
     private readonly eButton: HTMLElement = RefPlaceholder;
 
     public abstract getItem(): TItem;