DevExtreme Angular - What’s New 17.2 (2024)

New Color Schemes for the Generic Theme

You can now change your entire application’s color palette byapplying one ofour newly implemented schemes: Soft Blue, Carmine, Green Mist, Dark Violet, and Dark Moon. These new color schemes are based onthe DevExtreme Generic theme.

Enhancements

DevExtreme React Grid v17.2 ships with the following new features:

• Material UI Integration
• Column Reordering
• Column Resizing
• Keyboard Navigation
• Column Chooser
• Localization
• Data Formatting and Custom Data Accessors

Blog Post

Column Header Filter and Column Chooser Search

You can now search through header filter values. You can activate this feature for all columns oronly aspecific column using the widget’s orcolumn’s ’headerFilter.allowSearch’ option.

DateTime Data Type Support

Our HTML5 Data Grid fully supports time portions in Date-Time values:

• Proper time formatting is applied to cell display text.
• Cell drop-downs include time editing controls.
• The grid allows you to filter data while taking time values into account.

Custom Sorting

You can implement your own value comparison function and thus enable custom data sorting algorithms.

Funnel / Pyramid Chart

Our new Funnel widget allows you tocreate funnel and pyramid charts for use within your HTML5-JavaScript applications

Chart Axis - Scale Breaks

DevExtreme HTML5-JavaScript Chart can automatically analyze your chart’s data and apply scale breaks toimprove readability. Manual scale breaks are also supported.

Chart Axis - Tick Mark Generation

DevExpress HTML5 Chart v17.2 ships with improved tick mark generation logic:

• Date-time ticks are always displayed at the start of standard date-time intervals: first day of week / month / year, start of a day, top of an hour, etc.
• You can force a numeric axis to generate ticks only at whole number positions.
• Numeric and date-time axis can now automatically adjust label formatting, improving readability with a compact display option.

Date-Time Axis - Exclude Weekends and Holidays

You can now suppress weekends and holidays onthe chart’s arguments scale and provide anuninterrupted display for adataset that only includes work days.

Blog Post

Column Header Filter and Field Chooser Search Panel

With this release, our HTML5-JavaScript Pivot Grid can display asearch box within its Field Chooser dialog and Filter Dropdown.

Blog Post

Display Multiple Days, Weeks, or Months in a View

Our HTML5-JavaScript Scheduler allows you tospecify the number ofDays, Weeks orMonths todisplay within the Day View, Week View and Month View respectively.

Compressed Appointment Display Option

You can limit the number of simultaneously displayed appointments in:

• a single cell in the Month View;
• a single all-day panel in the Day View or Week View.

Ifthe number ofappointments exceeds the specified value, our Scheduler collapses them into asingle label (once selected, this label displays all events within adrop-down list).

You can customize drop-down list appearance using the ’dropDownAppointmentTemplate’ option.

Current Date-Time Indicator

Our HTML5-JavaScript Scheduler can indicate the current time inviews that utilize atime scale. Inaddition, you can enable timetable shading uptothe current time mark.

Blog Post

Recursive Node Selection

Our HTML5-JavaScript Tree List now supports recursive node selection:

• When changing a parent node's selected state, all child nodes at all nesting levels are updated accordingly.
• Parent nodes can automatically change their state to selected, unselected or indeterminate, based upon the number of selected child nodes.

Column Header Filter and Column Chooser Search

You can now search through header filter values. You can activate this feature for all columns oronly aspecific column using the widget’s orcolumn’s ’headerFilter.allowSearch’ option.

New Filter Builder Widget

Our new HTML5-JavaScript FilterBuilder widget allows users toconstruct complex filter expressions with absolute ease (supports anunlimited number offilter conditions). Itcan beused onastandalone basis orwith the List, Data Grid, and TreeList widgets.

TagBox - New Item Selection Options

The TagBox can now group multiple tags into asingle label when all available tags are selected orwhen end-users select apredefined set. Users can access individual tags byclicking the joined label (invokes the dropdown selection list).

DateBox and Calendar - Disable Desired Dates

Our HTML5-JavaScript DateBox and Calendar widgets include anew ’disabledDates’ option. Asthe name suggests, this new feature allows you todisable access tocertain dates within the calendar - byeither supplying apredefined date array, orimplementing afunction that determines whether adate should beavailable toend-users.

TreeView and List - Search Panel

Tosimplify record selection, our HTML5-JavaScript List and TreeView widgets allows you todisplay asearch box within its container.

NumberBox - Display Text Formatting and Input Masking

The NumberBox widget now supports flexible display text formatting using Locale Data Markup Language (LDML) patterns. The specified format can also beused asamask tocontrol end-user input.

This release includes the following Angular integration improvements:

• Optional jQuery Dependencies: Disable jQuery dependencies and Increase Angular component performance byupto30%.

  Blog Post

• Improved TypeScript Declarations: All Angular component properties are now declared with aspecific type instead ofany. This helps avoid type conversion errors.

  Blog Post

LDML Pattern Support

With this release, you can use Locale Data Markup Language (LDML) patterns tolocalize dates and numbers regardless ofthe localization library used.

Custom decimal and thousands separators

Our built-in localization engine now offers ’thousandsSeparator’ and ’decimalSeparator’ global configuration options.

Built-in parser for Intl

You nolonger need toimplement acustom Date-Time parser when localizing widgets with Intl.

Improvements

DevExtreme can now utilize the benefits ofTypeScript 2.0or higher and use specific types instead ofany wherever possible.

Easily Add DevExtreme MVC Controls to ASP.NET Core Projects

Wehave extended Visual Studio support with anew menu item that allows you toeasily incorporate DevExtreme ASP.NET MVC Controls toanexisting ASP.NET Core project.

.NET Core 2.0 Support

DevExtreme ASP.NET MVC Controls can now beused inRazor Page projects (introduced with .NET Core2.0). Inaddition, our project templates and demos have been updated to .NET Core2.0.

New Strongly-Typed HTML Helpers

You can now use lambdas when configuring Data Grid columns and summaries, PivotGrid fields, and Form items. This ensures compile-time type safety, enables IntelliSense, and automatically adds client-side validation based onData Annotations defined inthe model.

New NamedTemplate Helper for Creating Complex Views

This release introduces anew ’NamedTemplate()’ helper - allowing you toembed controls into one another. Byleveraging its capabilities, you can reduce the amount ofcode needed togenerate complex views.

Data Layer - Cross-domain Controller Support

The ’newRemoteController()’ method allows you toconsume API controllers hosted onexternal domains and identified byURLs.

@(Html.DevExtreme().DataGrid()
.DataSource(ds => ds.RemoteController()
.Key("OrderID")
.LoadUrl("http://www.example.com/Orders/GetOrders")
.InsertUrl("http://www.example.com/Orders/InsertOrder")
.UpdateUrl("http://www.example.com/Orders/UpdateOrder")
.DeleteUrl("http://www.example.com/Orders/DeleteOrder")
)
)

Data Layer - Areas Support

You can now access API controllers indifferent areas using the ’Area()’ method added tothe ’Mvc()’ data source.

.DataSource(d => d.Mvc()
.Area("Area")
.Controller("Controller")
.LoadAction("Action")
)