DevExtreme Complete 21.2

Microsoft Visual Studio 2022 Support

• DevExpress installers now ship separate VSIX extensions for Visual Studio 2022 to ensure that all major design-time tools (like the "DevExpress" menu, DevExpress Template Gallery, Toolbox, etc.) are fully functional.

Data Grid and Tree List

• API Enhancements:
  • New Toolbar Customization API
    • You can now customize the DataGrid/TreeList Toolbar on-the-fly:
      • You can alter Toolbar items dynamically, at any time (in the past, you could only do so once when the Toolbar was created).
      • When using the DataGrid/TreeList within a React, Angular or Vue app, you can customize the toolbar declaratively without direct DOM manipulation.
    • Added a new toolbar property that allows you to customize toolbar items in much the same way as a standalone Toolbar. Each DataGrid/TreeList Toolbar item can be specified as an object with the same structure as a standalone Toolbar. You can also specify an item using a predefined string name from the list of built-in DataGrid/TreeList commands (such as 'addRowButton', 'applyFilterButton','columnChooserButton', 'exportButton', 'groupPanel', 'revertButton', 'saveButton', 'searchPanel').
  • Disable Command Buttons
    • You can now disable certain command buttons for specific rows using the new disabled column button's property.
  • Custom Command Button Enhancements
    • You can now use the onClick, cssClass, hint, and disabled button properties if you have specified a custom command button template.
  • Extended navigateToRow API
    • The navigateToRow method now returns a Promise object. You can now be notified when a background operation has finished.
  • Virtual Scrolling Enhancements
    • Reworked the DataGrid/TreeList's Virtual Scrolling engine and introduced the following enhancements:
      • Optimized the row rendering algorithm to increase overall FPS.
      • Optimized the data loading algorithm to reduce the number of remote data requests.
      • Added a new scrolling.renderAsync property so you can render rows synchronously or asynchronously.
  • Improved Search
    • Reduced false-positive matches when users search for numbers within the DataGrid's Search Panel. The DataGrid now matches search string with both original and formatted cell values, respecting column formatting.

Data Grid

• Add New Row at a Specified Position
  • You can now specify where to insert a new row when using insertBeforeKey or insertAfterKey properties. Both properties accept a key for the row before/after which to insert the new row. For popular use cases, a newRowPosition property with a set of shortcut values has been added:
    • "first"/"last" - Insert a new row at the beginning/end of the dataset.
    • "pageTop"/"pageBottom" - Insert a new row at the top/bottom of the current page.
    • "viewportTop"/"viewportBottom" - Insert a new row at the top/bottom of the viewport.

HTML/Markdown Editor

• Table Management
  • This update includes the following table-related features:
    • Support for the 'thead' HTML tag (table headers).
    • Support for table and column resize operations via the new tableResizing configuration option.
    • Context menu for table-related operations. To enable the menu, activate the tableContextMenu setting.
    • Multiple paragraph support (<p> tag) within a table cell.
    • Table Context Menu customization.
    • Manage table/cell properties via built-in dialogs.
• Soft Line Breaks
  • The HTML/Markdown Editor includes a new allowSoftLineBreak configuration option. When enabled, users can break text within a single block element into multiple lines (via the <br> tag using the new Shift+Enter keyboard shortcut). This feature allows you to break a list item (<li>) into multiple lines or add multiline cells.

Diagram

• Touch Support Enhancement
  • Improved touch screen support in Chromium-based browsers (Google Chrome, Microsoft Edge, Opera).

Gantt

• Visible Date Range
  • You can now specify the visible data range using the startDateRange and endDateRange properties.
• Sorting
  • You can now sort tasks by one or more columns. Use the new sorting option to configure corresponding UI elements and their behavior.
• Export to PDF
  • You can now export Gantt data to PDF. Export options allow you to:
    • Set document size and page orientation.
    • Limit data export to a specific date range.
    • Specify whether to export only chart area, tree list area, or the entire Gantt component.
• Filtering
  • The Gantt control now supports filtering. End-users can filter tasks using the header filter or filter row. To filter tasks in code, use the following API:
    • headerFilter.
    • filterRow.
• New API to Expand/Collapse Tasks
  • Task-related (expand/collapse) API enhancements include:
    • expandAll - Expands all tasks.
    • collapseAll - Collapses all tasks.
    • expandAllToLevel - Expands all tasks up to the specified level (the root task has depth zero).
    • expandToTask - Expands all tasks to make the specified task visible.
    • collapseTask - Collapses the specified task.
    • expandTask - Expands the specified task.
• API Enhancements
  • Gantt control API enhancements include:
    • showDependencies - Specifies whether dependencies are visible in the chart area.
    • showResources and showDependencies - Shows/hides corresponding UI elements.
    • scaleTypeRange - Allows you to limit zoom range.
    • refresh - Reloads data and redraws the entire component.

File Manager

• New API
  • The File Manager ships with the following new API:
    • Create a directory (directoryCreating and directoryCreated).
    • Upload a file (fileUploading and fileUploaded).
    • Copy a file or directory (itemCopying and itemCopied).
    • Delete a file or directory (itemDeleting and itemDeleted).
    • Download a file (itemDownloading).
    • Move a file or directory (itemMoving and itemMoved).
    • Rename a file or directory (itemRenaming and itemRenamed).

UI Components

• Overlay and Popup Enhancements
  • New onShowing and onHiding events allow you to manage the display of a popup.
  • The new wrapperAttr property allows you to add custom HTML attributes to the popup root element.
  • Popup can now automatically adjust its position when its content changes.
  • The new hideOnParentScroll property allows you to close the popup when a user scrolls its container.
  • The new dragAndResizeArea property specifies boundaries for drag and resize operations.
  • The new dragOutsideBoundary property specifies whether the Popup can overlap container (and window) boundaries during drag operations.
  • The new restorePosition property specifies whether the Popup restores its initial position or whether the Popup maintains its position after drag/resize operations.
• CheckBox, TagBox, List Enhancements
  • CheckBox enhancements include the following:
    • Blur method: Removes focus from the component.
    • iconSize setting: Specifies desired icon size.
    • You can now assign a 'null' value to the CheckBox value property (to set an indeterminate state).
    • CheckBox text is now automatically centered by its icon.
  • The new selectAllText property allows you to specify custom text displayed within the "Select All" switch in the List and TagBox components.
• Floating Labels
  • Text input/placeholders now support the use of floating labels (conforms to Google's Material Design guidelines) so you can eliminate field labels from all your forms.
• Miscellaneous Enhancements
  • PivotGrid - Export Merged Cells to Microsoft Excel - The new mergeColumnFieldValues and mergeRowFieldValues properties allow you to disable/enable cell merge while exporting.
  • TreeView - The DevExtreme TreeView widget ships with native scrolling support. Set the useNativeScrolling property to 'true' to enable this feature.
  • ScrollView - RTL Support - ScrollView fully supports RTL rendering mode.
  • Button Group - New Selection Mode - The ButtonGroup ships with a new selection mode - 'none'. In this mode, group buttons are not selected on click.

Material Theme Enhancements

• Applied changes to the product libraries to mirror some of Google’s most recent Material Design Guidelines. For instance, Google deprecated the ‘underlined’ styling mode for inputs and elected to use ‘filled’ mode by default. Both modes have been preserved and you can switch back to the previous display style when necessary.

Architectural Enhancements

• TypeScript
  • Reduced the number of 'any' type entries in the API.
  • Properties, events, and methods are now typed based on data.
• Tree Shaking
  • Optimized internal module dependencies. This reduces bundle size/code chunk size for specific usage scenarios (e.g. when using Code Splitting).

Native React Grid

• Keyboard Navigation
  • End-users can now navigate through grid cells/rows with the keyboard.