Skip to content

Form: implement relayouting instead of full rerender on dimension change#32728

Open
pharret31 wants to merge 3 commits intoDevExpress:26_1from
pharret31:26_1_3565-form-implement-relayouting-instead-of-full-rerender-on-dimension-change
Open

Form: implement relayouting instead of full rerender on dimension change#32728
pharret31 wants to merge 3 commits intoDevExpress:26_1from
pharret31:26_1_3565-form-implement-relayouting-instead-of-full-rerender-on-dimension-change

Conversation

@pharret31
Copy link
Contributor

No description provided.

@pharret31 pharret31 self-assigned this Feb 27, 2026
@pharret31 pharret31 marked this pull request as ready for review February 27, 2026 09:46
@pharret31 pharret31 requested a review from a team as a code owner February 27, 2026 09:46
Copilot AI review requested due to automatic review settings February 27, 2026 09:46
Copy link
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This pull request implements a performance optimization for the DevExtreme Form widget by replacing full rerenders with lightweight relayouting when dimension changes occur (e.g., responsive screen factor changes). Instead of destroying and recreating all widgets, the form now updates only the ResponsiveBox layout and CSS classes, preserving editor instances and their state.

Changes:

  • Introduced a relayouting code path that bypasses full rerender when dimension changes trigger a refresh
  • Refactored group column count CSS class management into reusable methods for both initial render and updates
  • Added helper methods in LayoutManager for updating ResponsiveBox layout and managing CSS classes without full rerender

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 2 comments.

File Description
packages/devextreme/js/__internal/ui/form/form.ts Added _isDimensionChangeRefresh flag, _updateLayoutsOnDimensionChange(), _applyGroupColCount(), and _updateGroupsColCount() methods to support relayouting. Modified _refresh() to use relayouting path for dimension changes. Refactored group column count class application into reusable method.
packages/devextreme/js/__internal/ui/form/form.layout_manager.ts Added updateResponsiveBoxLayout() method to update ResponsiveBox without full rerender. Added helper methods _getLocationBoundaryFlags(), _getLocationCssClasses(), _getLayoutManagerItemByLocation(), and _updateItemsCssClasses() for CSS class management. Improved type safety by changing _cashedColCount type and removing ts-expect-error comments. Introduced Location and LocationBoundaryFlags type definitions.
packages/devextreme/testing/tests/DevExpress.ui.widgets.form/form.tests.js Updated test expectations to verify that editors are preserved (not reinitialized) during dimension changes, confirming the relayouting optimization works correctly.

@pharret31 pharret31 requested a review from a team as a code owner February 27, 2026 12:38
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants