mendix · rahmanunver · Sep 19, 2025 · Sep 19, 2025 · Sep 22, 2025 · Sep 25, 2025
@@ -1,7 +1,7 @@
 {
     "name": "@mendix/data-widgets",
     "moduleName": "Data Widgets",
-    "version": "3.6.1",
+    "version": "3.7.0",
     "description": "Data Widgets module containing a set of widgets to display data in various ways.",
     "copyright": "© Mendix Technology BV 2025. All rights reserved.",
     "license": "Apache-2.0",

@@ -428,7 +428,8 @@ $root: ".widget-datagrid";
         align-items: center;
     }
 
-    &-exporting {
+    &-exporting,
+    &-selecting-all-pages {
         .widget-datagrid-top-bar,
         .widget-datagrid-header,
         .widget-datagrid-content,
@@ -574,22 +575,31 @@ $root: ".widget-datagrid";
     align-items: center;
 }
 
-#{$root}-clear-selection {
+#{$root}-btn-link {
     cursor: pointer;
     background: transparent;
     border: none;
-    text-decoration: underline;
     color: var(--link-color);
-    padding: 0;
+    padding: 0.3em 0.5em;
+    border-radius: 6px;
     display: inline-block;
 
-    &:focus:not(:focus-visible) {
-        outline: none;
+    &:hover,
+    &:focus-visible {
+        background-color: var(--brand-primary-50, #e6e7f2);
     }
+}
 
-    &:focus-visible {
-        outline: 1px solid var(--brand-primary, $brand-primary);
-        outline-offset: 2px;
+:where(#{$root}-select-all-bar) {
+    grid-column: 1 / -1;
+    background-color: #f0f1f2;
+    display: flex;
+    flex-flow: row nowrap;
+    align-items: center;
+    padding: var(--spacing-smaller, 8px) var(--spacing-medium, 16px);
+
+    #{$root}-spinner {
+        padding: 6.2px;
     }
 }
 

@@ -1,7 +1,7 @@
 {
     "name": "@mendix/datagrid-date-filter-web",
     "widgetName": "DatagridDateFilter",
-    "version": "3.6.0",
+    "version": "3.7.0",
     "description": "Filter Data Grid 2 rows by date or date range, using a calendar picker.",
     "copyright": "© Mendix Technology BV 2025. All rights reserved.",
     "license": "Apache-2.0",

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

@@ -1,7 +1,7 @@
 {
     "name": "@mendix/datagrid-dropdown-filter-web",
     "widgetName": "DatagridDropdownFilter",
-    "version": "3.6.0",
+    "version": "3.7.0",
     "description": "Filter Data Grid 2 rows by selecting values from a drop-down list.",
     "copyright": "© Mendix Technology BV 2025. All rights reserved.",
     "license": "Apache-2.0",

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

@@ -1,7 +1,7 @@
 {
     "name": "@mendix/datagrid-number-filter-web",
     "widgetName": "DatagridNumberFilter",
-    "version": "3.6.0",
+    "version": "3.7.0",
     "description": "Filter Data Grid 2 rows by numeric values, supporting equals, greater than, and less than operations.",
     "copyright": "© Mendix Technology BV 2025. All rights reserved.",
     "license": "Apache-2.0",

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

@@ -1,7 +1,7 @@
 {
     "name": "@mendix/datagrid-text-filter-web",
     "widgetName": "DatagridTextFilter",
-    "version": "3.6.0",
+    "version": "3.7.0",
     "description": "Filter Data Grid 2 rows by text input, supporting contains, starts with, and equals operations.",
     "copyright": "© Mendix Technology BV 2025. All rights reserved.",
     "license": "Apache-2.0",

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

@@ -12,6 +12,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 - We fixed an issue where missing consistency checks for the captions were causing runtime errors instead of in Studio Pro
 
+- 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.6.1] - 2025-10-14
 
 ### Fixed

@@ -1,7 +1,7 @@
 {
     "name": "@mendix/datagrid-web",
     "widgetName": "Datagrid",
-    "version": "3.6.1",
+    "version": "3.7.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",

@@ -3,8 +3,7 @@ import {
     hideNestedPropertiesIn,
     hidePropertiesIn,
     hidePropertyIn,
-    Properties,
-    transformGroupsIntoTabs
+    Properties
 } from "@mendix/pluggable-widgets-tools";
 import {
     container,
@@ -22,7 +21,7 @@ import { ColumnsPreviewType, DatagridPreviewProps } from "../typings/DatagridPro
 export function getProperties(
     values: DatagridPreviewProps,
     defaultProperties: Properties,
-    platform: "web" | "desktop"
+    _: "web" | "desktop"
 ): Properties {
     values.columns.forEach((column, index) => {
         if (column.showContentAs !== "attribute" && !column.sortable && !values.columnsFilterable) {
@@ -65,15 +64,6 @@ export function getProperties(
         if (column.minWidth !== "manual") {
             hidePropertyIn(defaultProperties, values, "columns", index, "minWidthLimit");
         }
-        if (!values.advanced && platform === "web") {
-            hideNestedPropertiesIn(defaultProperties, values, "columns", index, [
-                "columnClass",
-                "sortable",
-                "resizable",
-                "draggable",
-                "hidable"
-            ]);
-        }
     });
 
     if (values.pagination === "buttons") {
@@ -125,28 +115,6 @@ export function getProperties(
         "columns"
     );
 
-    if (platform === "web") {
-        if (!values.advanced) {
-            hidePropertiesIn(defaultProperties, values, [
-                "pagination",
-                "pagingPosition",
-                "showEmptyPlaceholder",
-                "rowClass",
-                "columnsSortable",
-                "columnsDraggable",
-                "columnsResizable",
-                "columnsHidable",
-                "configurationAttribute",
-                "onConfigurationChange",
-                "filterSectionTitle"
-            ]);
-        }
-
-        transformGroupsIntoTabs(defaultProperties);
-    } else {
-        hidePropertyIn(defaultProperties, values, "advanced");
-    }
-
     if (values.configurationStorageType === "localStorage") {
         hidePropertiesIn(defaultProperties, values, ["configurationAttribute", "onConfigurationChange"]);
     }
@@ -170,11 +138,8 @@ function hideSelectionProperties(defaultProperties: Properties, values: Datagrid
     }
 
     if (itemSelection !== "Multi") {
-        hidePropertiesIn(defaultProperties, values, [
-            "keepSelection",
-            "selectionCountPosition",
-            "clearSelectionButtonLabel"
-        ]);
+        hidePropertyIn(defaultProperties, values, "keepSelection");
+        hidePropertyIn(defaultProperties, values, "enableSelectAll");
     }
 }
 

@@ -5,6 +5,11 @@ import { enableStaticRendering } from "mobx-react-lite";
 enableStaticRendering(true);
 
 import { useFocusTargetController } from "@mendix/widget-plugin-grid/keyboard-navigation/useFocusTargetController";
+import { DatasourceController } from "@mendix/widget-plugin-grid/query/DatasourceController";
+import { SelectAllController } from "@mendix/widget-plugin-grid/selection";
+import { ProgressStore } from "@mendix/widget-plugin-grid/stores/ProgressStore";
+import { SelectionCountStore } from "@mendix/widget-plugin-grid/stores/SelectionCountStore";
+import { BaseControllerHost } from "@mendix/widget-plugin-mobx-kit/BaseControllerHost";
 import { GateProvider } from "@mendix/widget-plugin-mobx-kit/GateProvider";
 import { useConst } from "@mendix/widget-plugin-mobx-kit/react/useConst";
 import { parseStyle } from "@mendix/widget-plugin-platform/preview/parse-style";
@@ -15,11 +20,11 @@ import { ColumnsPreviewType, DatagridPreviewProps } from "typings/DatagridProps"
 import { Cell } from "./components/Cell";
 import { Widget } from "./components/Widget";
 import { ColumnPreview } from "./helpers/ColumnPreview";
-import { DatagridContext } from "./helpers/root-context";
+import { DatagridContext, DatagridRootScope } from "./helpers/root-context";
 import { useSelectActionHelper } from "./helpers/SelectActionHelper";
 import { GridBasicData } from "./helpers/state/GridBasicData";
-
-import { SelectionCountStore } from "@mendix/widget-plugin-grid/selection/stores/SelectionCountStore";
+import { SelectAllBarViewModel } from "./helpers/state/SelectAllBarViewModel";
+import { SelectionProgressDialogViewModel } from "./helpers/state/SelectionProgressDialogViewModel";
 import "./ui/DatagridPreview.scss";
 
 // Fix type definition for Selectable
@@ -61,6 +66,8 @@ const initColumns: ColumnsPreviewType[] = [
 
 const numberOfItems = 3;
 
+class Host extends BaseControllerHost {}
+
 export function preview(props: DatagridPreviewProps): ReactElement {
     const EmptyPlaceholder = props.emptyPlaceholder.renderer;
     const data: ObjectItem[] = Array.from({ length: numberOfItems }).map((_, index) => ({
@@ -87,18 +94,35 @@ export function preview(props: DatagridPreviewProps): ReactElement {
     const eventsController = { getProps: () => Object.create({}) };
 
     const ctx = useConst(() => {
-        const gateProvider = new GateProvider({});
-        const basicData = new GridBasicData(gateProvider.gate);
-        const selectionCountStore = new SelectionCountStore(gateProvider.gate);
+        const host = new Host();
+        const gateProvider = new GateProvider({ datasource: {} as any, itemSelection: undefined });
+        const basicData = new GridBasicData(gateProvider.gate as any);
+        const query = new DatasourceController(host, { gate: gateProvider.gate });
+        const selectionCountStore = new SelectionCountStore(gateProvider.gate as any);
+        const selectAllController = new SelectAllController(host, gateProvider.gate, query);
+        const selectAllProgressStore = new ProgressStore();
         return {
             basicData,
             selectionHelper: undefined,
             selectActionHelper,
             cellEventsController: eventsController,
             checkboxEventsController: eventsController,
             focusController,
-            selectionCountStore
-        };
+            selectionCountStore,
+            selectAllProgressStore,
+            selectAllBarViewModel: new SelectAllBarViewModel(
+                host,
+                gateProvider.gate as any,
+                selectAllController,
+                selectionCountStore
+            ),
+            selectionProgressDialogViewModel: new SelectionProgressDialogViewModel(
+                host,
+                gateProvider.gate as any,
+                selectAllProgressStore,
+                selectAllController
+            )
+        } satisfies DatagridRootScope;
     });
 
     return (

@@ -9,35 +9,31 @@ import { DatagridContainerProps } from "../typings/DatagridProps";
 import { Cell } from "./components/Cell";
 import { Widget } from "./components/Widget";
 import { WidgetHeaderContext } from "./components/WidgetHeaderContext";
-import { ProgressStore } from "./features/data-export/ProgressStore";
 import { useDataExport } from "./features/data-export/useDataExport";
 import { useCellEventsController } from "./features/row-interaction/CellEventsController";
 import { useCheckboxEventsController } from "./features/row-interaction/CheckboxEventsController";
-import { DatagridContext } from "./helpers/root-context";
+import { DatagridContext, DatagridRootScope } from "./helpers/root-context";
 import { useSelectActionHelper } from "./helpers/SelectActionHelper";
-import { IColumnGroupStore } from "./helpers/state/ColumnGroupStore";
 import { RootGridStore } from "./helpers/state/RootGridStore";
 import { useRootStore } from "./helpers/state/useRootStore";
 import { useDataGridJSActions } from "./helpers/useDataGridJSActions";
 
 interface Props extends DatagridContainerProps {
-    columnsStore: IColumnGroupStore;
     rootStore: RootGridStore;
-    progressStore: ProgressStore;
 }
 
 const Container = observer((props: Props): ReactElement => {
-    const { columnsStore, rootStore } = props;
-    const { paginationCtrl } = rootStore;
+    const { rootStore } = props;
+    const { paginationCtrl, gate, query, columnsStore, exportProgressStore } = rootStore;
 
-    const items = props.datasource.items ?? [];
+    const items = query.items ?? [];
 
-    const [exportProgress, abortExport] = useDataExport(props, props.columnsStore, props.progressStore);
+    const [exportProgress, abortExport] = useDataExport(props, columnsStore, exportProgressStore);
 
     const selectionHelper = useSelectionHelper(
-        props.itemSelection,
-        props.datasource,
-        props.onSelectionChange,
+        gate.props.itemSelection,
+        gate.props.datasource,
+        gate.props.onSelectionChange,
         props.keepSelection ? "always keep" : "always clear"
     );
 
@@ -65,16 +61,20 @@ const Container = observer((props: Props): ReactElement => {
     const checkboxEventsController = useCheckboxEventsController(selectActionHelper, focusController);
 
     const ctx = useConst(() => {
-        rootStore.basicData.setSelectionHelper(selectionHelper);
-        return {
+        const scope: DatagridRootScope = {
             basicData: rootStore.basicData,
             selectionHelper,
             selectActionHelper,
             cellEventsController,
             checkboxEventsController,
             focusController,
-            selectionCountStore: rootStore.selectionCountStore
+            selectionCountStore: rootStore.selectionCountStore,
+            selectAllProgressStore: rootStore.selectAllProgressStore,
+            selectAllBarViewModel: rootStore.selectAllBarViewModel,
+            selectionProgressDialogViewModel: rootStore.selectionProgressDialogViewModel
         };
+
+        return scope;
     });
 
     return (
@@ -124,7 +124,7 @@ const Container = observer((props: Props): ReactElement => {
                 rowClass={useCallback((value: any) => props.rowClass?.get(value)?.value ?? "", [props.rowClass])}
                 setPage={paginationCtrl.setPage}
                 styles={props.style}
-                exporting={exportProgress.exporting}
+                exporting={exportProgress.inProgress}
                 processedRows={exportProgress.loaded}
                 visibleColumns={columnsStore.visibleColumns}
                 availableColumns={columnsStore.availableColumns}
@@ -147,14 +147,5 @@ const Container = observer((props: Props): ReactElement => {
 Container.displayName = "DatagridComponent";
 
 export default function Datagrid(props: DatagridContainerProps): ReactElement | null {
-    const rootStore = useRootStore(props);
-
-    return (
-        <Container
-            {...props}
-            rootStore={rootStore}
-            columnsStore={rootStore.columnsStore}
-            progressStore={rootStore.exportProgressCtrl}
-        />
-    );
+    return <Container {...props} rootStore={useRootStore(props)} />;
 }