diff --git a/packages/pluggableWidgets/datagrid-web/CHANGELOG.md b/packages/pluggableWidgets/datagrid-web/CHANGELOG.md
index 1f7339aa51..b383e557ec 100644
--- a/packages/pluggableWidgets/datagrid-web/CHANGELOG.md
+++ b/packages/pluggableWidgets/datagrid-web/CHANGELOG.md
@@ -16,6 +16,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
- We added configurable selection count visibility and clear selection button label template for improved row selection management.
+- We added the possiblity to configure the first row of a DataGrid to be auto-selected on first load, facilitating master-detail views.
+
### Fixed
- The property panel now shows keep selection property when datagrid is set to single selection.
diff --git a/packages/pluggableWidgets/datagrid-web/src/Datagrid.editorConfig.ts b/packages/pluggableWidgets/datagrid-web/src/Datagrid.editorConfig.ts
index b58eaf95c2..1fde960cf6 100644
--- a/packages/pluggableWidgets/datagrid-web/src/Datagrid.editorConfig.ts
+++ b/packages/pluggableWidgets/datagrid-web/src/Datagrid.editorConfig.ts
@@ -142,6 +142,10 @@ function hideSelectionProperties(defaultProperties: Properties, values: Datagrid
hidePropertyIn(defaultProperties, values, "itemSelectionMode");
}
+ if (itemSelection !== "Single") {
+ hidePropertyIn(defaultProperties, values, "autoSelect");
+ }
+
if (itemSelection !== "Multi" || itemSelectionMethod !== "checkbox") {
hidePropertyIn(defaultProperties, values, "showSelectAllToggle");
}
diff --git a/packages/pluggableWidgets/datagrid-web/src/Datagrid.xml b/packages/pluggableWidgets/datagrid-web/src/Datagrid.xml
index 1366fbe612..44a50cbda7 100644
--- a/packages/pluggableWidgets/datagrid-web/src/Datagrid.xml
+++ b/packages/pluggableWidgets/datagrid-web/src/Datagrid.xml
@@ -222,6 +222,10 @@
Row click
+
+ Auto select first row
+ Automatically select the first row
+
Toggle on click
Defines item selection behavior.
diff --git a/packages/pluggableWidgets/datagrid-web/src/model/configs/Datagrid.config.ts b/packages/pluggableWidgets/datagrid-web/src/model/configs/Datagrid.config.ts
index 1ce8da4b69..9d858994d4 100644
--- a/packages/pluggableWidgets/datagrid-web/src/model/configs/Datagrid.config.ts
+++ b/packages/pluggableWidgets/datagrid-web/src/model/configs/Datagrid.config.ts
@@ -19,6 +19,7 @@ export interface DatagridConfig {
settingsStorageEnabled: boolean;
enableSelectAll: boolean;
keepSelection: boolean;
+ autoSelect: boolean;
pagingPosition: PagingPositionEnum;
multiselectable: true | undefined;
loadingType: LoadingTypeEnum;
@@ -48,6 +49,7 @@ export function datagridConfig(props: DatagridContainerProps): DatagridConfig {
settingsStorageEnabled: isSettingsStorageEnabled(props),
enableSelectAll: props.enableSelectAll,
keepSelection: props.keepSelection,
+ autoSelect: props.autoSelect,
pagingPosition: props.pagingPosition,
multiselectable: isMultiselectable(props),
loadingType: props.loadingType,
diff --git a/packages/pluggableWidgets/datagrid-web/src/utils/test-utils.tsx b/packages/pluggableWidgets/datagrid-web/src/utils/test-utils.tsx
index e8bc5eb194..690a2084f6 100644
--- a/packages/pluggableWidgets/datagrid-web/src/utils/test-utils.tsx
+++ b/packages/pluggableWidgets/datagrid-web/src/utils/test-utils.tsx
@@ -64,6 +64,7 @@ export function mockContainerProps(overrides?: Partial):
columnsResizable: true,
columns: [column("Col1"), column("Col2")],
itemSelectionMethod: "checkbox",
+ autoSelect: false,
itemSelectionMode: "clear",
enableSelectAll: false,
keepSelection: false,
diff --git a/packages/pluggableWidgets/datagrid-web/typings/DatagridProps.d.ts b/packages/pluggableWidgets/datagrid-web/typings/DatagridProps.d.ts
index 056c487def..96a4193e65 100644
--- a/packages/pluggableWidgets/datagrid-web/typings/DatagridProps.d.ts
+++ b/packages/pluggableWidgets/datagrid-web/typings/DatagridProps.d.ts
@@ -108,6 +108,7 @@ export interface DatagridContainerProps {
filtersPlaceholder?: ReactNode;
itemSelection?: SelectionSingleValue | SelectionMultiValue;
itemSelectionMethod: ItemSelectionMethodEnum;
+ autoSelect: boolean;
itemSelectionMode: ItemSelectionModeEnum;
showSelectAllToggle: boolean;
enableSelectAll: boolean;
@@ -167,6 +168,7 @@ export interface DatagridPreviewProps {
filtersPlaceholder: { widgetCount: number; renderer: ComponentType<{ children: ReactNode; caption?: string }> };
itemSelection: "None" | "Single" | "Multi";
itemSelectionMethod: ItemSelectionMethodEnum;
+ autoSelect: boolean;
itemSelectionMode: ItemSelectionModeEnum;
showSelectAllToggle: boolean;
enableSelectAll: boolean;
diff --git a/packages/shared/widget-plugin-grid/src/selection/createSelectionHelper.ts b/packages/shared/widget-plugin-grid/src/selection/createSelectionHelper.ts
index 3902487856..86612bc84c 100644
--- a/packages/shared/widget-plugin-grid/src/selection/createSelectionHelper.ts
+++ b/packages/shared/widget-plugin-grid/src/selection/createSelectionHelper.ts
@@ -9,7 +9,7 @@ import { MultiSelectionHelper, SingleSelectionHelper } from "./helpers";
export function createSelectionHelper(
host: SetupComponentHost,
gate: DerivedPropsGate,
- config: { keepSelection: boolean } = { keepSelection: false }
+ config: { keepSelection: boolean; autoSelect: boolean } = { keepSelection: false, autoSelect: false }
): SelectionHelperService {
const { selection, datasource } = gate.props;
@@ -58,7 +58,24 @@ export function createSelectionHelper(
);
add(cleanup);
}
+ if (helper.type === "Single" && config.autoSelect) {
+ const dispose = autorun(
+ () => {
+ const { datasource } = gate.props;
+ const firstItem = datasource.items?.[0];
+ if (!firstItem) return;
+
+ if (helper.isSelected(firstItem)) {
+ dispose();
+ } else {
+ helper.reduceTo(firstItem);
+ }
+ },
+ { delay: 100 }
+ );
+ add(dispose);
+ }
return disposeAll;
}
diff --git a/packages/shared/widget-plugin-grid/src/selection/helpers.ts b/packages/shared/widget-plugin-grid/src/selection/helpers.ts
index 507e1f7bda..cb979c06da 100644
--- a/packages/shared/widget-plugin-grid/src/selection/helpers.ts
+++ b/packages/shared/widget-plugin-grid/src/selection/helpers.ts
@@ -350,6 +350,7 @@ export function useSelectionHelper(
): SelectionHelper | undefined {
const prevObjectListRef = useRef([]);
const firstLoadDone = useRef(false);
+
useState(() => {
if (selection) {
selection.setKeepSelection(selectionStateHandler(keepSelection));