[WC-3027] dg2 selectall

packages/modules/data-widgets/package.json

@@ -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",

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

@@ -311,7 +311,7 @@ $root: ".widget-datagrid";
     justify-content: flex-end;
     white-space: nowrap;
     align-items: baseline;
-    margin: 0 16px;
+    margin: 16px;
     color: $pagination-caption-color;
 
     .paging-status {
@@ -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,
@@ -525,7 +526,7 @@ $root: ".widget-datagrid";
 
 .widget-datagrid .widget-datagrid-load-more {
     display: block !important;
-    margin: 0;
+    margin: var(--spacing-small, 8px) 0;
 }
 
 .infinite-loading.widget-datagrid-grid-body {
@@ -563,33 +564,51 @@ $root: ".widget-datagrid";
 :where(#{$root}-pb-start, #{$root}-tb-start, #{$root}-pb-end, #{$root}-tb-end, #{$root}-pb-middle) {
     flex-grow: 1;
     flex-basis: 33.33%;
-    min-height: 20px;
-    height: 54px;
-    padding: var(--spacing-small) 0;
+}
+
+:where(#{$root}-pb-middle) {
+    display: flex;
+    justify-content: center;
 }
 
 :where(#{$root}-pb-start, #{$root}-tb-start) {
-    padding-inline: var(--spacing-medium);
     display: flex;
     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;
+    white-space: nowrap;
 
-    &: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}-selection-counter) {
+    display: flex;
+    align-items: center;
+    height: 54px;
+    padding: var(--spacing-small) var(--spacing-medium);
+}
+
+: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;
     }
 }
 

packages/pluggableWidgets/custom-chart-web/src/controllers/ChartPropsController.ts

@@ -1,5 +1,5 @@
 import { EditorStoreState } from "@mendix/shared-charts/main";
-import { DerivedPropsGate, ReactiveController, ReactiveControllerHost } from "@mendix/widget-plugin-mobx-kit/main";
+import { DerivedPropsGate, SetupComponent, SetupComponentHost } from "@mendix/widget-plugin-mobx-kit/main";
 import { executeAction } from "@mendix/widget-plugin-platform/framework/execute-action";
 import { makeAutoObservable } from "mobx";
 import { Config, Data, Layout } from "plotly.js-dist-min";
@@ -18,14 +18,14 @@ interface ChartPropsControllerSpec {
     editorStateGate: DerivedPropsGate<EditorStoreState>;
 }
 
-export class ChartPropsController implements ReactiveController {
+export class ChartPropsController implements SetupComponent {
     private cleanup: undefined | (() => void) = undefined;
     private editorStateGate: DerivedPropsGate<EditorStoreState>;
     private propsGate: DerivedPropsGate<ControllerProps>;
     private sizeProvider: SizeProvider;
 
-    constructor(host: ReactiveControllerHost, spec: ChartPropsControllerSpec) {
-        host.addController(this);
+    constructor(host: SetupComponentHost, spec: ChartPropsControllerSpec) {
+        host.add(this);
 
         this.editorStateGate = spec.editorStateGate;
         this.propsGate = spec.propsGate;

packages/pluggableWidgets/custom-chart-web/src/controllers/CustomChartControllerHost.ts

@@ -1,17 +1,16 @@
 import { EditorStoreState } from "@mendix/shared-charts/main";
-import { BaseControllerHost } from "@mendix/widget-plugin-mobx-kit/BaseControllerHost";
-import { DerivedPropsGate } from "@mendix/widget-plugin-mobx-kit/props-gate";
-import { ResizeController } from "./ResizeController";
+import { DerivedPropsGate, SetupHost } from "@mendix/widget-plugin-mobx-kit/main";
 import { ChartPropsController } from "./ChartPropsController";
-import { ControllerProps } from "./typings";
 import { PlotlyController } from "./PlotlyController";
+import { ResizeController } from "./ResizeController";
+import { ControllerProps } from "./typings";
 
 interface CustomChartControllerHostSpec {
     propsGate: DerivedPropsGate<ControllerProps>;
     editorStateGate: DerivedPropsGate<EditorStoreState>;
 }
 
-export class CustomChartControllerHost extends BaseControllerHost {
+export class CustomChartControllerHost extends SetupHost {
     resizeCtrl: ResizeController;
     chartPropsController: ChartPropsController;
     plotlyController: PlotlyController;

packages/pluggableWidgets/custom-chart-web/src/controllers/PlotlyController.ts

@@ -1,5 +1,5 @@
-import { ChartProps, PlotlyChart } from "../components/PlotlyChart";
 import { autorun } from "mobx";
+import { ChartProps, PlotlyChart } from "../components/PlotlyChart";
 
 interface PropsProvider {
     mergedProps: ChartProps;
@@ -23,8 +23,6 @@ export class PlotlyController {
         } else {
             const chart = new PlotlyChart(target, this.propsProvider.mergedProps);
 
-            // const [updatePlotlyDebounced, abort] = debounce((props: ChartProps) => chart.update(props), 100);
-
             const dispose = autorun(
                 () => {
                     chart.update(this.propsProvider.mergedProps);

packages/pluggableWidgets/custom-chart-web/src/controllers/ResizeController.ts

@@ -1,14 +1,14 @@
-import { ReactiveController, ReactiveControllerHost } from "@mendix/widget-plugin-mobx-kit/main";
+import { SetupComponent, SetupComponentHost } from "@mendix/widget-plugin-mobx-kit/main";
 import { debounce } from "@mendix/widget-plugin-platform/utils/debounce";
 import { action, makeObservable, observable } from "mobx";
 
-export class ResizeController implements ReactiveController {
+export class ResizeController implements SetupComponent {
     width = 0;
     height = 0;
     private cleanup: undefined | (() => void) = undefined;
 
-    constructor(host: ReactiveControllerHost) {
-        host.addController(this);
+    constructor(host: SetupComponentHost) {
+        host.add(this);
 
         makeObservable(this, {
             width: observable,

packages/pluggableWidgets/datagrid-date-filter-web/package.json

@@ -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",

packages/pluggableWidgets/datagrid-date-filter-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="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>

packages/pluggableWidgets/datagrid-dropdown-filter-web/e2e/DataGridDropDownFilter.spec.js

@@ -1,4 +1,4 @@
-import { test, expect } from "@playwright/test";
+import { expect, test } from "@playwright/test";
 import AxeBuilder from "@axe-core/playwright";
 
 test.afterEach("Cleanup session", async ({ page }) => {
@@ -26,25 +26,25 @@ test.describe("datagrid-dropdown-filter-web", () => {
 
     test.describe("using enumeration as attribute", () => {
         test("shows the expected result", async ({ page }) => {
-            await page.locator(".mx-name-datagrid1 .mx-name-dataGridDrop_downFilter1").click({ delay: 1 });
+            await page.locator(".mx-name-datagrid1 .mx-name-dataGridDrop_downFilter1").click({ delay: 100 });
             await page.waitForSelector(".widget-dropdown-filter-menu-slot > ul > li:nth-child(1)");
-            await page.locator(".widget-dropdown-filter-menu-slot > ul > li:nth-child(1)").click({ delay: 1 });
+            await page.locator(".widget-dropdown-filter-menu-slot > ul > li:nth-child(1)").click({ delay: 100 });
             await page.waitForTimeout(300); // wait for filter to apply
-            await page.locator("#DataGrid4-column0").click({ delay: 1 });
+            await page.locator('.mx-name-datagrid1 .th[title="Age"]').click({ delay: 100 });
             const cells = await page.$$eval(".mx-name-datagrid1 .td", elements =>
                 elements.map(element => element.textContent)
             );
             await expect(cells).toEqual(["10", "test", "test", "Yes", ""]);
         });
 
         test("shows the expected result with multiple selected items", async ({ page }) => {
-            await page.locator(".mx-name-datagrid1 .mx-name-dataGridDrop_downFilter1").click({ delay: 10 });
+            await page.locator(".mx-name-datagrid1 .mx-name-dataGridDrop_downFilter1").click({ delay: 100 });
             await page.waitForSelector(".widget-dropdown-filter-menu-slot > ul > li:nth-child(1)");
-            await page.locator(".widget-dropdown-filter-menu-slot > ul > li:nth-child(1)").click({ delay: 10 });
+            await page.locator(".widget-dropdown-filter-menu-slot > ul > li:nth-child(1)").click({ delay: 100 });
             await page.waitForSelector(".widget-dropdown-filter-menu-slot > ul > li:nth-child(2)");
-            await page.locator(".widget-dropdown-filter-menu-slot > ul > li:nth-child(2)").click({ delay: 1 });
+            await page.locator(".widget-dropdown-filter-menu-slot > ul > li:nth-child(2)").click({ delay: 100 });
             await page.waitForTimeout(300); // wait for filter to apply
-            await page.locator("#DataGrid4-column0").click({ delay: 1 });
+            await page.locator('.mx-name-datagrid1 .th[title="Age"]').click({ delay: 100 });
             const cells = await page.$$eval(".mx-name-datagrid1 .td", elements =>
                 elements.map(element => element.textContent)
             );
@@ -54,20 +54,20 @@ test.describe("datagrid-dropdown-filter-web", () => {
 
     test.describe("using boolean as attribute", () => {
         test("shows the expected result", async ({ page }) => {
-            await page.getByRole("combobox", { name: "Active column filter" }).click({ delay: 1 });
+            await page.getByRole("combobox", { name: "Active column filter" }).click({ delay: 100 });
             const dropdownItem = await page.locator(".widget-dropdown-filter-menu-slot > ul > li:nth-child(3)");
             await expect(dropdownItem).toHaveText("No");
-            await dropdownItem.click({ delay: 1 });
-            await page.locator("#DataGrid4-column1").click({ delay: 1 });
+            await dropdownItem.click({ delay: 100 });
+            await page.locator('.mx-name-datagrid1 .th[title="First Name"]').click({ delay: 100 });
             const cells = await page.locator(".mx-name-datagrid1 .tr");
             expect(cells).toHaveCount(1);
         });
 
         test("shows no results when no items selected", async ({ page }) => {
-            await page.getByRole("combobox", { name: "Active column filter" }).click({ delay: 1 });
-            const dropdownItem = await page.locator(".widget-dropdown-filter-menu-slot > ul > li:nth-child(1)"); //the first item means none selected
-            await dropdownItem.click({ delay: 1 });
-            await page.locator("#DataGrid4-column1").click({ delay: 1 });
+            await page.getByRole("combobox", { name: "Active column filter" }).click({ delay: 100 });
+            const dropdownItem = await page.locator(".widget-dropdown-filter-menu-slot > ul > li:nth-child(1)"); // the first item means none selected
+            await dropdownItem.click({ delay: 100 });
+            await page.locator('.mx-name-datagrid1 .th[title="Age"]').click({ delay: 100 });
             const cells = await page.locator(".mx-name-datagrid1 .tr");
             expect(cells).toHaveCount(4);
         });

packages/pluggableWidgets/datagrid-dropdown-filter-web/package.json

@@ -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",

packages/pluggableWidgets/datagrid-dropdown-filter-web/src/hocs/withLinkedRefStore.tsx

@@ -3,7 +3,7 @@ import { RefFilterStore } from "@mendix/widget-plugin-dropdown-filter/stores/Ref
 import { FilterAPI, useFilterAPI } from "@mendix/widget-plugin-filtering/context";
 import { BaseStoreProvider } from "@mendix/widget-plugin-filtering/custom-filter-api/BaseStoreProvider";
 import { GateProvider } from "@mendix/widget-plugin-mobx-kit/GateProvider";
-import { DerivedPropsGate } from "@mendix/widget-plugin-mobx-kit/props-gate";
+import { DerivedPropsGate } from "@mendix/widget-plugin-mobx-kit/main";
 import { useConst } from "@mendix/widget-plugin-mobx-kit/react/useConst";
 import { useSetup } from "@mendix/widget-plugin-mobx-kit/react/useSetup";
 import { AssociationMetaData, ListAttributeValue, ListExpressionValue, ListValue } from "mendix";

packages/pluggableWidgets/datagrid-dropdown-filter-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="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>

packages/pluggableWidgets/datagrid-number-filter-web/package.json

@@ -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",

packages/pluggableWidgets/datagrid-number-filter-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="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>

packages/pluggableWidgets/datagrid-text-filter-web/package.json

@@ -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",

packages/pluggableWidgets/datagrid-text-filter-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="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>

packages/pluggableWidgets/datagrid-web/CHANGELOG.md

@@ -12,6 +12,16 @@ 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 a '"Select all" across pages' setting that, when enabled, allows users to select all rows across all pages.
+
+### Breaking changes
+
+- The widget settings have been reorganized to make configuration easier.
+
+### Changed
+
+- Selection count texts now have default value for en_US locale.
+
 ## [3.6.1] - 2025-10-14
 
 ### Fixed

packages/pluggableWidgets/datagrid-web/package.json

@@ -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",
@@ -50,6 +50,8 @@
         "@mendix/widget-plugin-mobx-kit": "workspace:*",
         "@mendix/widget-plugin-platform": "workspace:*",
         "@radix-ui/react-progress": "^1.1.7",
+        "brandi": "^5.0.0",
+        "brandi-react": "^5.0.0",
         "classnames": "^2.5.1",
         "mobx": "6.12.3",
         "mobx-react-lite": "4.0.7",