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));