DevExtreme JavaScript - Early Access Preview (v21.2)

Data Grid/TreeList

New Toolbar Customization API

• 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 our DataGrid/TreeList within a React, Angular or Vue app, you can customize the toolbar declaratively without direct DOM manipulation.

Angular

<dx-data-grid ...>
    ...
    <dxo-toolbar>
        <dxi-item location="before">
            <dx-button
                text="My button"
                width="120"
                (onClick)="onClickHandler($event)">
            </dx-button>        
        </dxi-item>
        <dxi-item name="columnChooserButton"></dxi-item>
    </dxo-toolbar>
    ...   
</dx-data-grid>

React

<DataGrid ...>
    ...
    <Toolbar>
        <Item location='before'>
            <Button
              text='My button'
              width='120'
              onClick={this.onClickHandler} />
        </Item>
        <Item name='columnChooserButton' />
    </Toolbar>        
    ...
</DataGrid>

Vue

<DxDataGrid ...>
    ...
    <DxToolbar>
        <DxItem location="before">
            <DxButton
                text="My button"
                width="120"
                @click="onClickHandler"
            />
        </DxItem>
        <DxItem
            name="columnChooserButton"
        />
    </DxToolbar>        
    ...
</DxDataGrid>

jQuery

$('#container').dxDataGrid({
    ...
    toolbar: {
        items: [
            {
                location: "before",
                widget: "dxButton",
                options: {
                    text: "My button",
                    width: 120,
                    onClick: function(e) { ... }
                }
            },
            'columnChooserButton'
        ]
    },
    ...   
})

Improved Search Functionality

Improved navigateToRow API

Control New Row Position

• "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.

Reworked Virtual Scrolling

HTML/Markdown Editor

Table Support Enhancements

• Support for the 'thead' HTML tag (table headers). (Online demo)
• Table and column resizing. Please use the new tableResizing configuration option. (Online demo)
• Context menu with common table operations that you can enable via the new 'tableContextMenu' configuration option. (Online demo)

• Multiple paragraph support (<p> tag) within a table cell
• Table Context Menu customization
• Manage table/cell properties via built-in dialogs.

Soft Breaks in Block Elements

Gantt

Sorting

• ascendingText, clearText and descendingText - Customize the text used for sorting context menu items.
• mode - Specifies sort mode:
  • “none” - Sorting is disabled.
  • “single” (the default value) - Sorting is allowed against a single column.
  • “multiple” - Sorting is allowed against multiple columns.
• showSortIndexes - Specifies whether sort indices are displayed within column headers. This property applies only when the sorting.mode property is set to “multiple” and the DevExtreme Gantt is sorted against more than one column.

Task Expand/Collapse API

• expandAll - Expand all tasks.
• collapseAll - Collapse all tasks.
• expandAllToLevel - Expands all tasks up to the specified level (a root task has zero level).
• expandToTask - Accepts a task key value, expands all tasks to make the specified task visible.
• collapseTask - Accepts a task key value, collapses the specified task.
• expandTask - Accepts a task key value, expands the specified task.

Specify a Visible Date Range

Gantt View Customization API

• showDependencies - A new property that specifies whether dependencies are visible in the chart area.
• showResources() and showDependencies() - New methods to display/hide corresponding visual elements.
• “showResources” and “showDependencies” - New items for the Gantt component’s built-in toolbar.

Refresh

Diagram

Touch Screen Support

• Create a new shape via drag-and-drop from the toolbox.
• Display/hide the context menu.
• Display/hide shape connection points.
• Create a connector and display the context toolbox.
• Rearrange shape connectors.
• Select shapes and connectors.
• Drag selected elements including a connector’s start and end points.
• Add text to diagram elements.

Other API and UI/UX Enhancements

CheckBox

• The new blur method removes focus from the component.
• The new iconSize option makes it easy to customize CheckBox icon size.
• You can now use a ‘null’ value and place the CheckBox into an indeterminate state.
• CheckBox text is now automatically centered by its icon (useful for custom icon size).

Popup

• The showing and hiding events can now be cancelled.
• 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 size changes.

• The new ‘hideOnParentScroll’ property will allow you to close the popup when a user scrolls its container.
• The new ‘dragAndResizeArea’ property will specify boundaries for drag and resize operations.
• The new ‘allowDragOutside’ property will specify whether the Popup can overlap container boundaries during drag operations.

TreeView

Button Group

Material Theme Update

Features expected in v21.2 but not included in our first EAP

TypeScript

Native React Grid

Tree Shaking

Feedback