DevExtreme has a collection of high-performance HTML5/JavaScript widgets that allow you to leverage modern web development stacks (including React, Angular, ASP.NET Core, jQuery, Knockout, etc.) to build interactive web applications. From Angular and React, to ASP.NET Core or Vue, DevExtreme includes a comprehensive collection of high-performance and responsive UI widgets for use in traditional web and next-generation mobile applications. The suite comes with a fully functional data grid, interactive chart widgets, data editor, and more.
DevExtreme's first major version v23.1 has been released this year. The new version released a new DateRangeBox component, upgraded Data Grid and Tree List functions, etc. Welcome to experience the new version!
DevExtreme v23.1 official version download (Q technical exchange: 523159565)
Brand new DateRangeBox component
DateRangeBox component for Angular, React, Vue and jQuery, which allows you to select a date range. Features include:
- mask input
- Customize popups and calendars
- Enter tags and style patterns
- value pattern
- input validation
Data Grid和Tree List
custom column selector
The new selection property allows the user to configure selection options in the Column Chooser window, available options include:
- recursive selection
- select all
- Select a column by clicking its label
You can specify a search configuration object to customize searches in the Column Chooser.
Our new position property allows you to specify where the Column Chooser is displayed.
Data Filtering - UI Customization
Custom header filters in data grid, pivot grid, tree list, Gantt chart
In the new version, you can customize the search options in the column header filter and the appearance of the search box. You can set the search box as a TextBox component, specify comparison rules and timeout/delay (in milliseconds).
Use the Search method to configure search settings globally, or use the columns[].headerFilter.search configuration object to make changes to individual columns, and have the fields[].headerFilter.search property configure search settings in the Pivot grid.
data visualization
Charts - Color Gradients and Patterns
You can now customize styles and apply gradients, patterns and images to DevExpress chart components.
Use the registerGradient() method to declare linear and radial gradient styles, and the registerPattern() method to declare pattern and image styles. These methods return a unique id for the declared style. In the series/pointcolor object, specify the base color for labels and connectors, and apply the generated id to the fillId field.
You can also use the highlight option to highlight hover and selected series.
Charts - Custom Series Label Position
The new shift(x,y) method allows you to display series labels at a specified offset from their default positions.
Gauge - Displays custom SVG content
Use the centerTemplate property to display custom SVG content in the Gauge component.
BarGauge - supports "Shift" mode to resolve overlapping labels
If the BarGauge displays multiple adjacent values, the corresponding labels may overlap. Use the resolveLabelOverlapping property to specify how the BarGauge component modifies the label's position or visibility. Available options include:
- Shift
- Hide
- None
In Shift mode, BarGauge automatically shifts labels when necessary.
