feat(datagrid-web): add untracked shared files, version bump, changelog update

Author: rahmanunver

packages/modules/data-widgets/src/themesource/datawidgets/web/_datagrid.scss

@@ -420,7 +420,8 @@ $root: ".widget-datagrid";
         align-items: center;
     }
 
-    &-exporting {
+    &-exporting,
+    &-selecting-all-pages {
         .widget-datagrid-top-bar,
         .widget-datagrid-header,
         .widget-datagrid-content,
@@ -433,6 +434,30 @@ $root: ".widget-datagrid";
         }
     }
 
+    // Better positioning for multi-page selection modal
+    &-selecting-all-pages {
+        .widget-datagrid-modal {
+            &-overlay {
+                position: fixed;
+                top: 0;
+                right: 0;
+                bottom: 0;
+                left: 0;
+            }
+
+            &-main {
+                position: fixed;
+                top: 0;
+                left: 0;
+                right: 0;
+                bottom: 0;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+            }
+        }
+    }
+
     &-col-select input:focus-visible {
         outline-offset: 0;
     }

packages/pluggableWidgets/datagrid-web/CHANGELOG.md

@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Added
+
+- We added multi-page select all functionality for Datagrid widget with configurable batch processing, progress tracking, and page restoration to allow users to select all items across multiple pages with a single click.
+
 ## [3.4.0] - 2025-09-12
 
 ### Fixed

packages/pluggableWidgets/datagrid-web/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@mendix/datagrid-web",
     "widgetName": "Datagrid",
-    "version": "3.4.0",
+    "version": "3.5.0",
     "description": "A powerful, flexible grid for displaying, sorting, and editing data collections in Mendix web apps.",
     "copyright": "© Mendix Technology BV 2025. All rights reserved.",
     "license": "Apache-2.0",

packages/pluggableWidgets/datagrid-web/src/package.xml

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <package xmlns="http://www.mendix.com/package/1.0/">
-    <clientModule name="Datagrid" version="3.4.0" xmlns="http://www.mendix.com/clientModule/1.0/">
+    <clientModule name="Datagrid" version="3.5.0" xmlns="http://www.mendix.com/clientModule/1.0/">
         <widgetFiles>
             <widgetFile path="Datagrid.xml" />
         </widgetFiles>

packages/shared/widget-plugin-grid/src/query/datasource-traversal.ts

@@ -0,0 +1,182 @@
+import { ListValue, ObjectItem } from "mendix";
+import { createNanoEvents, Emitter } from "nanoevents";
+
+export interface TraversalOptions {
+    chunkSize?: number;
+    signal?: AbortSignal;
+    onProgress?: (processed: number, total?: number) => void;
+    onChunk?: (items: ObjectItem[], offset: number) => void | Promise<void>;
+}
+
+interface TraversalEvents {
+    statechange: (state: { offset: number; limit: number; status: string }) => void;
+}
+
+/**
+ * Traverses all items in a ListValue datasource by paginating through chunks.
+ * Mirrors the pattern used by ExportController - snapshots state, iterates, then restores.
+ */
+export async function traverseAllItems(ds: ListValue, options: TraversalOptions = {}): Promise<void> {
+    // Use the datasource's current limit as chunk size to respect its pagination
+    const naturalChunkSize = ds.limit ?? 25;
+    const { chunkSize = naturalChunkSize, signal, onProgress, onChunk } = options;
+
+    // Snapshot current state
+    const snapshot = {
+        offset: ds.offset,
+        limit: ds.limit
+    };
+
+    // Create event emitter for tracking datasource changes
+    const emitter: Emitter<TraversalEvents> = createNanoEvents();
+    let processed = 0;
+
+    try {
+        // Start from the beginning
+        let currentOffset = 0;
+        let hasMore = true;
+        let chunkIndex = 0;
+
+        while (hasMore && !signal?.aborted) {
+            // Set pagination parameters
+
+            ds.setOffset(currentOffset);
+            if (ds.limit !== chunkSize) {
+                ds.setLimit(chunkSize);
+            }
+
+            // Trigger reload
+            ds.reload();
+
+            // Wait for reload to complete with simpler polling
+            await waitForReload(ds, currentOffset, chunkSize);
+
+            // Process items
+            const items = ds.items ?? [];
+
+            if (items.length === 0) {
+                break; // No more items
+            }
+
+            // Handle the chunk
+            if (onChunk) {
+                await onChunk(items, currentOffset);
+            }
+
+            // Update progress
+            processed += items.length;
+            onProgress?.(processed, ds.totalCount);
+
+            // Check if this was the last page
+            // Stop if we've processed all items according to totalCount
+            // or if we got fewer items than expected
+            const totalCount = ds.totalCount;
+            const reachedTotal = totalCount && processed >= totalCount;
+            const gotPartialChunk = items.length < chunkSize;
+            hasMore = !reachedTotal && !gotPartialChunk;
+            currentOffset += chunkSize;
+            chunkIndex++;
+
+            // Yield to UI
+            await new Promise(resolve => setTimeout(resolve, 0));
+        }
+
+        if (signal?.aborted) {
+            // Traversal aborted
+        } else {
+            // Traversal completed
+        }
+    } finally {
+        // Always restore original view state
+        await restoreSnapshot(ds, snapshot, emitter);
+    }
+}
+
+/**
+ * Reloads the datasource and waits for it to stabilize
+ */
+async function reloadAndWait(ds: ListValue, emitter: Emitter<TraversalEvents>): Promise<void> {
+    const targetOffset = ds.offset;
+    const targetLimit = ds.limit;
+
+    // Set up one-time listener for state change
+    const statePromise = new Promise<void>(resolve => {
+        const checkState = (): void => {
+            if (ds.status !== "loading" && ds.offset === targetOffset && ds.limit === targetLimit) {
+                resolve();
+            }
+        };
+
+        // Check immediately in case already loaded
+        checkState();
+
+        // Otherwise wait for state change
+        const unsubscribe = emitter.on("statechange", state => {
+            if (state.status !== "loading" && state.offset === targetOffset && state.limit === targetLimit) {
+                unsubscribe();
+                resolve();
+            }
+        });
+    });
+
+    // Trigger reload
+    ds.reload();
+
+    // Poll for changes (fallback for when events aren't available)
+    const pollPromise = pollDatasource(ds, targetOffset, targetLimit);
+
+    // Race between event-based and polling
+    await Promise.race([statePromise, pollPromise]);
+}
+
+/**
+ * Simpler wait function that waits for datasource to be ready
+ */
+async function waitForReload(
+    ds: ListValue,
+    expectedOffset: number,
+    expectedLimit: number,
+    maxAttempts = 50
+): Promise<void> {
+    for (let i = 0; i < maxAttempts; i++) {
+        if (ds.status !== "loading" && ds.offset === expectedOffset && ds.limit === expectedLimit && ds.items) {
+            return;
+        }
+        await new Promise(resolve => setTimeout(resolve, 100));
+    }
+    console.warn("Datasource wait timeout - proceeding anyway");
+}
+
+/**
+ * Polls the datasource until it reflects the expected state
+ */
+async function pollDatasource(
+    ds: ListValue,
+    expectedOffset: number,
+    expectedLimit: number,
+    maxAttempts = 50
+): Promise<void> {
+    for (let i = 0; i < maxAttempts; i++) {
+        if (ds.status !== "loading" && ds.offset === expectedOffset && ds.limit === expectedLimit) {
+            return;
+        }
+        await new Promise(resolve => setTimeout(resolve, 100));
+    }
+    console.warn("Datasource polling timeout - proceeding anyway");
+}
+
+/**
+ * Restores the datasource to its original offset/limit
+ */
+async function restoreSnapshot(
+    ds: ListValue,
+    snapshot: { offset: number; limit: number },
+    emitter: Emitter<TraversalEvents>
+): Promise<void> {
+    // Restore original pagination
+    ds.setLimit(snapshot.limit);
+    ds.setOffset(snapshot.offset);
+
+    // Wait for restore to complete
+    await reloadAndWait(ds, emitter);
+}

packages/shared/widget-plugin-grid/src/selection/helpers.ts

@@ -2,6 +2,7 @@ import { executeAction } from "@mendix/widget-plugin-platform/framework/execute-
 import type { ActionValue, ListValue, ObjectItem, SelectionMultiValue, SelectionSingleValue } from "mendix";
 import { useEffect, useRef, useState } from "react";
 import { Direction, MoveEvent1D, MoveEvent2D, MultiSelectionStatus, ScrollKeyCode, SelectionMode, Size } from "./types";
+import { traverseAllItems } from "../query/datasource-traversal";
 
 class SingleSelectionHelper {
     type = "Single" as const;
@@ -34,6 +35,10 @@ export class MultiSelectionHelper {
         this.rangeStart = undefined;
     }
 
+    get pageItemsCount(): number {
+        return this.selectableItems.length;
+    }
+
     isSelected(value: ObjectItem): boolean {
         return this.selectionValue.selection.some(obj => obj.id === value.id);
     }
@@ -223,6 +228,93 @@ export class MultiSelectionHelper {
         this._resetRange();
     }
 
+    /**
+     * Gets the currently selected item IDs
+     */
+    getSelectedIds(): Set<string> {
+        return new Set(this.selectionValue.selection.map(item => item.id));
+    }
+
+    /**
+     * Selects items by their IDs, preserving object references where possible
+     */
+    selectByIds(ids: string[]): void {
+        const currentSelection = new Map(this.selectionValue.selection.map(item => [item.id as string, item]));
+        const pageItems = new Map(this.selectableItems.map(item => [item.id as string, item]));
+
+        // Build new selection preserving object references
+        const newSelection: ObjectItem[] = [];
+
+        for (const id of ids) {
+            // Prefer existing selection object, then current page object
+            const item = currentSelection.get(id) || pageItems.get(id);
+            if (item) {
+                newSelection.push(item);
+            }
+        }
+
+        this.selectionValue.setSelection(newSelection);
+        this._resetRange();
+    }
+
+    /**
+     * Selects all items across multiple pages by loading them in batches.
+     * This method preserves existing selections and adds new items as pages are loaded.
+     *
+     * @param datasource - The data source to load items from
+     * @param bufferSize - The batch size for loading items
+     * @param onProgress - Optional callback to report progress (loaded, total)
+     * @param abortSignal - Optional AbortSignal for cancellation
+     * @returns Promise that resolves when selection is complete
+     */
+    async selectAllPages(
+        datasource: ListValue,
+        bufferSize: number,
+        onProgress?: (loaded: number, total: number) => void,
+        abortSignal?: AbortSignal
+    ): Promise<void> {
+        // If everything fits in current page, use regular selectAll
+        if (
+            this.selectableItems.length > 0 &&
+            datasource.items?.length === this.selectableItems.length &&
+            (!datasource.totalCount || datasource.totalCount <= this.selectableItems.length)
+        ) {
+            this.selectAll();
+            return;
+        }
+
+        // Use the new traversal utility for better robustness
+        // Accumulate all items across pages, avoiding duplicates
+        const allItems: ObjectItem[] = [];
+        const processedIds = new Set<string>();
+        const existingSelection = new Map(this.selectionValue.selection.map(item => [item.id as string, item]));
+
+        await traverseAllItems(datasource, {
+            chunkSize: bufferSize,
+            signal: abortSignal,
+            onProgress: processed => {
+                const total = datasource.totalCount || processed;
+                onProgress?.(processed, total);
+            },
+            onChunk: async items => {
+                // Add new items, preserving existing selection objects and avoiding duplicates
+                for (const item of items) {
+                    const itemId = item.id as string;
+                    if (!processedIds.has(itemId)) {
+                        processedIds.add(itemId);
+                        allItems.push(existingSelection.get(itemId) || item);
+                    }
+                }
+            }
+        });
+
+        // Set the final selection if not aborted
+        if (!abortSignal?.aborted) {
+            this.selectionValue.setSelection(allItems);
+            this._resetRange();
+        }
+    }
+
     /**
      * Deselects all currently selected items by removing them from the selection.
      * Resets the selection range after clearing the selection.