Quantcast
Channel: Developer Express Inc.
Viewing all 2401 articles
Browse latest View live

Reporting — Important Changes in v21.2

$
0
0

We wanted to share some important information related to DevExpress Reports v21.2 (due out in November). As always, we welcome your feedback and your perspective. Should you have any questions about the changes described herein, feel free to comment below.

Reporting for WinForms & WPF — End of Default Bitmap Icons Support

Many years ago (specifically, 5 years ago in our v16.2 release cycle), DevExpress Reports was the first DevExpress product to include a complete set of built-in SVG icons for its Document Viewer and its End User Report Designer toolbar. We incorporated SVG icons to better support HDPI (4K) displays.

When we added SVG icons, we knew that some would not be happy with the change and so we also introduced the WindowsFormsSettings.AllowDefaultSvgImages property for backward compatibility. This property allowed customers to retain the look and feel of existing apps and maintain use of bitmap icons until we completed delivery of our entire icon set.

Over the last few years, the DevExpress WinForms and WPF product line have evolved and SVG icons have become the preferred choice for most of our customers. Said differently, feedback tells us that most of you have moved away from bitmaps and have elected to leverage the flexibility of SVG icons.

To that end, we’ve chosen to only support SVG icons moving forward. With our next major update (v21.2), the AllowDefaultSvgImages property will have no impact on DevExpress Reports components such as the DevExpress Document Viewer, End-User Report Designer and Query Builder. An exception applies to custom print preview or end-user designer forms you may have added to your apps: if bitmap icons were serialized into form resources during the very first initialization, they’ll still be in place.

This change WILL apply to our WinForms and WPF report components (DevExpress Reports for WPF has offered SVG icon support since v17.2). Our WPF ApplicationThemeHelper.UseDefaultSvgImages property will no longer affect DevExpress Report controls after our v21.2 update.

Of course, you may be asking why – why this change and why now. Frankly, it’s just too time consuming (and expensive) to maintain two sets of icons (and our graphic design resources are now solely directed at SVG icons). If you’re still using bitmaps, you may have noticed this reality already. If you disable the property mentioned above, a number of UI elements (toolbar buttons) do not include bitmap icons.

If your app is wholly reliant on bitmaps, please do create a support ticket and share your use case with us and let us know why you cannot/will not move to SVG. We will be happy to listen to your thoughts and figure out the best path forward for your specific app.

Cross-Platform PDF Export — Image Conversion and Compression

The goal of this change is to deliver clarity and flexibility to our image compression API for PDF file creators. Our objective is to offer an image compression mechanism for images embedded into PDF files and separate the option that manages vector image rasterization. This will be useful for users who wish to decrease PDF size (via image compression) but who wish to retain the highest possible quality for charts/vector images.

Prior to v21.2, a single PdfExportOptions.ConvertImagesToJpeg property performed the following:

  • enabled by default
  • compressed all images to JPG
  • rasterized vector images.

With v21.2, we will:

  • Change the PdfExportOptions.ConvertImagesToJpeg property behavior: it will only convert bitmap images to JPG.
  • Add a PdfExportOptions.RasterizeImages property to the export options dialog. This property will allow you to convert vector images to PNGs.
  • Add the PdfExportOptions.RasterizationResolution property to the export options dialog. This property will allow you to specify the resolution (in dots per inch or simply said, DPI) used to rasterize vector images on export to PDF.

You’ll be able to enable both these properties simultaneously (in such instances, a vector image will be converted to PNG first and then compressed to JPG).

Reporting for Web Forms — End Of Medium Trust Support

Before we describe this change, it’s important to consider Microsoft’s position as it relates to partial trust applications:

With the introduction of ASP.NET Core and containerization technology (technologies that effectively manage application permissions), we feel that continued investment in Medium Trust support will negatively impact the long-term health of DevExpress Reports. Medium Trust related restrictions within the .NET Framework (see: Medium Trust Support) create development obstacles and add to our maintenance costs.

Accordingly, we will not offer Medium Trust support for DevExpress Reports once we release v21.2. We will stop maintaining our tests for this trust level and will no longer certify DevExpress Reports for use within partial trust environments.

Your Feedback Matters

If you have questions about the changes described herein, please comment below or create a support ticket via the DevExpress Support Center. We’ll be happy to follow-up.


Reporting — Updated Web Report Designer UI (Coming Soon in v21.2)

$
0
0

Thanks to excellent customer feedback and our on-going efforts to address user experience-related issues, we’ve made a series of changes to the DevExpress Web Report Designer and its UI. The following screenshot should illustrate what you can expect with our v21.2 release:

Here is a snapshot of what you can expect once we release v21.2 in November:

  1. The two-column toolbox that displays the entire report control set simultaneously.
  2. A new centered toolbar and a separate button that allows you to switch between design and preview modes.
  3. New vector-based icon set that we’ll be using across our entire web reporting product line (including Blazor).
  4. Enlarged icons for the quick actions region of our properties panel. The goal is to make these actions distinguishable for Web Report Designer users.
  5. A new button with a formula symbol - displayed next to the selected control. This button allows you to invoke the Expression Editor right here, right now.
  6. A new indicator within the properties panel (f symbol) that reflects a property’s data-bound state. This will allow users to determine if a property supports data binding or if it is already bound to a data column.
  7. Introduction of our web Report Design Analyzer panel. To learn more about this new feature, please refer to the blog post: Reporting — Avoid Mistakes in Report Creation with The Help of Report Design Analyzer (v21.1).

We also expect to change the font used across for Web Report Designer interface elements and update the Expression Editor (see the screenshot here) to match the changes we’ve made to our desktop reporting components.

Your Feedback Counts

Your opinion is what counts the most. Please tell us what you think of the changes described above in the comments section or engage us via Support Center.

Blazor Form Layout and Tabs - Advanced Caption Management, Lazy Load, and more (available in v21.1)

$
0
0

As you may know, our Form Layout component for Blazor includes data editors and allows you to create responsive edit forms with built-in auto-arrangement support. Our Blazor Tab component allows you to incorporate tabbed interfaces within your web app.

This post details new features/enhancements we’ve made to both components in our most recent release (v21.1).

Form Layout

Caption Position

We added a new CaptionPosition property to improve the flexibility of our Form Layout component's auto-generated design. Use this property to display a caption above (Vertical) or to the left of an item (Horizontal).

You can now specify this property individually for each group, tab page, or a single item. When you set the CaptionPosition at the Form Layout level, the property is passed down recursively, unless, one of the descendants has its own CaptionPosition specified. In essence, individual settings have higher priority.

Demo | Documentation

Item Caption Alignment

For a Form Layout with horizontal captions, we added an option that allows you to choose how paddings are calculated between captions and corresponding editors. You can use the ItemCaptionAlignment property to select one of the following options.

  • All - Paddings are calculated based on the longest caption in the entire Form Layout component, except for tab pages wherein caption widths are always calculated separately.

Blazor-form-layout-all-item-caption-aligned

  • InGroups - Works like the All option, but the longest caption is chosen for each group. Captions outside the group do not affect caption alignment inside the group.

Blazor-form-layout-item-caption-aligned-in-group

  • None - Disables automatic caption width calculations. As such, caption width is equal to the width of its content. The corresponding editor will be placed directly after its caption and therefore, may not align with other editors in the group.

Blazor-form-layout-item-caption-not-aligned

Tabs Enhancements

Render Mode

We added a new RenderMode property for the DevExpress Tabs component for Blazor so you can configure how content within Tabs is loaded by selecting one of the following options:

  • Default– The component initially loads only content of an active tab. When a user selects another tab, its content is replaced by the content of the previously active tab in the DOM. Performance for initial load is fast because the component doesn't maintain the state of its tabs.
  • AllTabs– The component loads the content of all tabs initially and stores it within the DOM. This mode speeds up navigation between tabs, but the page may take a longer time to load and can increase memory consumption.
  • OnDemand (aka Lazy Load) – The component initially loads content of only the active tab. As the user selects other tabs, these are loaded and stored in the DOM. This mode allows you to maintain the tab's state and improve overall performance at the same time.

Tab Click

In v21.1, we implemented the DxTabs.TabClick and DxTabBase.Click events so you can catch and respond to tab clicks, as needed.

Use the TabClick event to process every tab click with the same code:

<DxTabs TabClick="OnTabClick">
  <DxTab Text="Tab 1"></DxTab>
  <DxTab Text="Tab 2"></DxTab>
</DxTabs>

@ClickedTab

@code  {
  public string ClickedTab { get; set; } = "";
  void OnTabClick(TabClickEventArgs e) {
    ClickedTab = $"' Tab {e.TabIndex + 1}' has been clicked";
  }
}

To process a specific tab’s Click event, create an individual event handler for each tab:

@inject IJSRuntime JSRuntime

<DxTabs>
  <DxTab Text="Home" Click="OnHomeTabClick" />
  ...
</DxTabs>

@code  {
  async Task OnHomeTabClick(TabClickEventArgs e) {
    if(e.MouseEventArgs.Detail == 2)
      await JSRuntime.InvokeVoidAsync("open", "/", "_blank");
  }
}

DevExtreme JavaScript Scheduler - UI, Time Zone, and Performance Enhancements (v21.1)

$
0
0
In this short post, I’ll quickly describe important Scheduler-related features we introduced in our last release cycle. Should you have any questions on these features, feel free to post your comments below.

Time Zone Support

We are often asked about time zone support, and I wanted to quickly remind you that our JavaScript Scheduler control (for React, Vue, Angular, and jQuery) allows you to specify individual appointment time zones in data objects. Through the component’s allowTimeZoneEditing property, you can allow end-users to specify/modify appointment time zones within our Scheduler's edit form.

jQuery

$("#scheduler").dxScheduler({
  editing: {
    allowTimeZoneEditing: true
  }
});
Angular
<dx-scheduler>
  <dxo-editing
    [allowTimeZoneEditing]="true">
  </dxo-editing>
</dx-scheduler>
Vue
<DxScheduler>
  <DxEditing
    :allow-time-zone-editing="true"
  />
</DxScheduler>
React
<Scheduler>
  <Editing
    allowTimeZoneEditing={true}
  />
</Scheduler>

The following image illustrates how allowTimeZoneEditing affects the appearance of our Scheduler component’s edit form.  


View Demo

Agenda View Redesign

As you may already know, we redesigned our Scheduler component’s Agenda view earlier this year. The Agenda view displays appointments within a compact list and does not render a time scale. We’d love to hear your thoughts on our redesign and whether you currently use this view within your app. Please post your comments below...

View Demo

Horizontal Virtual Scrolling

Thanks to virtual scrolling, our Scheduler component only loads visible appointments into the DOM. This helps reduce load time and allows you to optimize overall app performance.

To enable virtual scrolling, simply set the Scheduler’s scrolling.mode property to "virtual":

jQuery

$("#scheduler").dxScheduler({
  scrolling: {
    mode: "virtual"
  }
});

Angular

<dx-scheduler>
  <dxo-scrolling
    mode="virtual">
  </dxo-scrolling>
</dx-scheduler>

Vue

<DxScheduler>
  <DxScrolling
    mode="virtual"
  />
</DxScheduler>

React

<Scheduler>
  <Scrolling
    mode="virtual"
  />
</Scheduler>

View Demo

Drag & Drop Enhancements

We recently changed the logic used to position appointments after drag & drop events. Previously, a dropped appointment occupied a timetable cell under the mouse pointer. With v21.1, our Scheduler uses the top of the appointment rectangle to define its position. The following animation demonstrates the impact of this change:

Tell Us What You Think

Should you have questions/comments about these changes, feel free to post your thoughts below or contact us via the DevExpress Support Center.

XAF — Dashboards, RTF Editor, Functional Testing, Swagger UI for Blazor, Auditing for EF Core (EAP v21.2)

$
0
0

As you may already know, we are a couple of months away from our next major update (v21.2). This post describes some of the features we expect to ship in October and details what’s inside our Early Access Preview build. If you own an active Universal Subscription, feel free to download this Early Access Preview (EAP) build at your convenience.

If you own an active DXperience Subscription and would like to learn more about XAF, you can explore the features described herein by logging onto the DevExpress Download Manager and installing this EAP build in trial mode. Once you do, please take a moment to tell us whether these new features address your business needs. This will help us fine-tune our code before the official launch.

Early Access and CTP builds are provided solely for early testing purposes and are not ready for production use. This build can be installed side by side with other major versions of DevExpress products. Please backup your project and other important data before installing Early Access and CTP builds.

This EAP may not include all features/products we expect to ship in our v21.2 release cycle. As its name implies, the EAP offers an early preview of what we expect to ship in two months.

ASP.NET Core Blazor

Dashboards Module

You can now use the Dashboard component to design and preview dashboards from within your XAF-powered Blazor app.

Documentation: Dashboards Module Overview.

The Dashboards Module in the XAF-powered ASP.NET Core Blazor application

Office Module (Rich Text Editor)

XAF's Blazor UI now supports the DevExpress Rich Text Editor component (as part of XAF's Office Module).

Documentation: Office (Edit Rich Text & Spreadsheets).

Functional Testing Support

You can test your Blazor or Web Forms application via Easy Test in Google Chrome or Microsoft Edge. Note: We no longer support Internet Explorer (see End of support for Internet Explorer 11).

Documentation: Test XAF Blazor UI Applications.

User Profile Avatar

The Security System allows you to specify a user image/avatar and display it in the top right corner of your application page.

Documentation: How to: Assign an Image to a User.

User image in an XAF-powered ASP.NET Core Blazor application

Enhanced Lookup Editor Buttons

Our Lookup Editor displays a Clear button within the UI if its AllowClear model option is enabled.

The Clear button in an XAF-powered ASP.NET Core Blazor application

Windows Forms

View in Model Action

XAF's new View in Model Action invokes the Model Editor at runtime and automatically expands a model node with settings for the current View or its business class.

View in Model Action

Enhanced Mask Settings in the Model Editor

The Model Editor now invokes the Mask Settings form and allows you to customize the mask used for your WinForms projects. Previously used EditMask and EditMaskType properties are now disabled.

Cross-Platform Enhancements

EF Core Audit Trail (RTM)

The Audit Trail Module now supports both XAF-powered Blazor and WinForms UI apps.

Documentation: Audit Trail Module (EF Core).

The Audit Trail Module in a WinForms and Blazor applications

Web API Backend Service (CTP)

You can now reuse XAF application data, logic, and modules within non-XAF apps via a Web API backend service (Swagger: OpenAPI). This service is available as a part of Blazor projects. To test, create a new XPO-based Blazor project, run the application, and navigate to https://localhost:44318/swagger/index.html. You can also test the implementation by using XAF's MainDemo Blazor application. This demo is installed in the following folder: %PUBLIC%\Documents\DevExpress Demos 21.2\Components\eXpressApp Framework\MainDemo.Blazor.

Note: We do not recommend use of our new Web API Backend Service for production code. We've made it available to gather feedback and engage those of you considering it for future use.

Web API Backend Service Project

Pre-Built Error Code Diagnostics (CTP)

You can check your solution with pre-built error diagnostics using Roslyn Analyzers. You can view a detailed error report locally or integrate this option into your CI system. The following diagnostics are available in this release:

  • XAF0001: An XPO business object’s constructor invalid declaration detected.
  • XAF0002: An XPO business object’s invalid property declaration detected.

Documentation: Code Diagnostics.

Code diagnostics

.NET App Security API (Role-based Access Control) - Free Offer

Oh, and before I forget...we've got some good news for those considering our .NET App Security API for future use. We expect to ship this product free of charge in about a month or so...

Once our installer is ready, we'll make an official announcement on this blog.

Breaking Changes in v21.2

Before you migrate and test existing projects, we ask that you review the following breaking changes:

Your Feedback Matters!

We realize beta-testing is a time-consuming process and we are grateful to those who invest time with our EAP builds. Find the current implementation lacking flexibility? Feel we've overlooked a valuable usage scenario? Does our current implementation fail to address your business requirements? Please post your thoughts in the comment section below or create a Support Center ticket. We will happily follow up and do what we can to extend the capabilities of our new products/features.

Blazor Data Editors - Date, Time, and Numeric Masked Input (available in v21.1)

$
0
0

A masked input field can help you improve readability and better control data input within a form field. As you may already know, our last release (v21.1) added masked input support to our Blazor Date Edit, Time Edit, and Spin Edit components. This post summarizes the new enhancements made to these three Blazor data editors and examines how their implementation differs from those found in our Masked Input component].

Date Edit and Time Edit

As you may know, the DevExpress Date Edit for Blazor displays a drop-down calendar that allows users to select dates while the DevExpress Time Edit for Blazor displays a drop-down time picker. Both components now support a new Mask property.

To enable masks in both, set your desired mask pattern for the appropriate Mask property: DxDateEdit.Mask or DxTimeEdit.Mask. This mask type supports predefined mask patterns or the standard date and time .NET formats.

You can also specify additional mask-related settings (current culture, caret mode, etc) by configuring the DxDateTimeMaskProperties component (common for both mentioned components).

For instance, use DxDateTimeMaskProperties.CaretMode (advancing caret) to automatically move the caret to the next date or time section once an end-user has edited the previous value:

<DxDateEdit @bind-Date="@Date" Mask="D">
  <DxDateTimeMaskProperties Culture="@CultureInfo.GetCultureInfo("en-US")"
                            CaretMode="MaskCaretMode.Advancing" />
</DxDateEdit>

Blazor-date-masked-input

Demo | Documentation

Spin Edit

The DevExpress Spin Edit for Blazor allows you to display and edit numeric values. With v21.1, you can specify a mask pattern (a value format) by using the new DxSpinEdit.Mask property and configure additional mask settings with the DxNumericMaskProperties component.

Blazor-numeric-masked-input

For more information on Numeric masks, refer to the following help topic: Numeric Masks.

Demo | Documentation

An Alternative - Masked Input

Let’s quickly review the capabilities of the new DevExpress Masked Input component.

While our Masked Input component for Blazor supports DateTime, Numeric, Text, and Regular Expressionmask types, it has one fundamental difference from the aforementioned data editors (Date Edit, Time Edit, and Spin Edit).

Most of our data editors work with standard data types (DateTime, numeric objects, etc), but you cannot use these editors (Date Time, Spin Edit, Time Edit) if you store data source objects (dates or numbers) as strings. The Masked Input component can work with string-based data fields. It converts strings from the data source to the appropriate data type (DateTime, int, and so forth) and then treats the resulting value as a date or number. This auto conversion process allows you to apply the desired mask type (Date-Time, Numeric) for your string objects.

To summarize, if you store your data source objects as strings, you should definitely consider the use of our Masked Input component. If you store your data using corresponding data types (DateTime, int, etc), feel free to use our new Mask property (for our Blazor Date Edit, Time Edit, and Spin Edit) instead.

Set Focus from Code

Before I wrap up, quick reminder that you can set editor focus in code. Use the FocusAsync method for all data editors that contain 'input' or 'text-area' elements (ComboBox, TagBox, Text Box, Masked Input, Memo, Spin Edit, Date Edit, and CheckBox) to set focus. For example, call the DxTextBox.FocusAsync to focus a Text Box from within Razor code:

<DxTextBox @ref="component" Text="This is a text box."></DxTextBox>

@code {
    DxTextBox component;

    protected override void OnAfterRender(bool firstRender)
    {
        base.OnAfterRender(firstRender);
        component.FocusAsync();
    }
}

Data Visualization & BI Dashboard (EAP v21.2)

$
0
0

This post outlines some of the DevExpress Dashboard related features we expect to ship in our next major release (v21.2). If you are an active Universal subscriber, please take a moment to download our Early Access Preview (EAP) and share your feedback with us. Your comments will help us fine-tune our implementation before official release in November. Active Universal subscribers can download the EAP build via the DevExpress Download Manager (if you own a DXperience Subscription, you can install the DevExpress Dashboard EAP in evaluation mode).

This post also includes enhancements and new features we expect to introduce across our data visualization components (DevExpress Chart and Map Control for WinForms, WPF and ASP.NET).

Important Note: This post does not contain information about our data visualization components for JavaScript (Angular, Vue, jQuery, React).

Early Access and CTP builds are provided solely for early testing purposes and are not ready for production use. This build can be installed side by side with other major versions of DevExpress products. Please backup your project and other important data before installing Early Access and CTP builds.

This EAP may not include all features/products we expect to ship in our v21.2 release cycle. As its name implies, the EAP offers an early preview of what we expect to ship in two months.

Dashboard - Enhanced Layout Capabilities (Dashboard Viewer and Dashboard Designer)

We extended the DevExpress Dashboard’s layout capabilities with new layout options.

Prior to this release, a dashboard was automatically resized to populate the Dashboard Viewer’s entire display region (to fully fit the screen). You can now customize the default display mode and specify the dashboard’s surface height and width. This feature will be of value if your dashboard uses a scrollable layout or if you need to tailor the dimensions of your dashboard for a specific screen size.

You can also mix layout settings and use adaptive size for width and fixed size for height.

 

If you’re an active Universal or DXperience subscriber, and have installed our EAP, select one of the following to explore this feature in greater detailSales Performance dashboard (WinForms) | Sales Performance dashboard (WPF)

Try it online: Web Dashboard demo (v21.2 EAP)


Dashboard - Custom Aggregation Functions

Along with the predefined aggregations, Dashboard now supports custom aggregation functions in client mode.

Refer to the following example to implement a custom aggregation function:
https://github.com/DevExpress-Examples/winforms-dashboard-custom-aggregates

Web Dashboard - End of support for Internet Explorer 11

All good things must come to an end. With v21.2, we will officially end support for Internet Explorer 11 (IE 11). For additional information, please refer to following blog post: DevExtreme and related products: End of support for Internet Explorer 11.

Charts - Customizable Empty Points (for WinForms, WPF and ASP.NET)

The DevExpress Chart Control can process gaps in a data source as empty points (points with undefined values). These gaps can now be visualized using different style options (based on Series view type). You can fully customize the appearance of point markers, line and area segments used to display empty points.

You can also draw “mock” points instead of gaps (based on values of neighboring Series points). To use this feature, set the series view’s EmptyPointOptions.ProcessPoints property to Interpolate.

  

Documentation: Empty Points (WinForms) | Empty Points (WPF)

If you’re an active Universal or DXperience subscriber, and have installed our EAP, select one of the following to explore this feature in greater detailEmpty Points (WinForms) | Empty Points (WPF)

Charts - Fast (Swift) Point Series (WinForms and ASP.NET)

We added a new lightweight Swift Point Series optimized to quickly render large data sets as a scatter (XY) plot.

 

The following chart summarizes the benefits of a Swift Point versus a regular Point Series with default settings enabled:

 

Documentation: SwiftPointSeriesView

If you’re an active Universal or DXperience subscriber, and have installed our EAP, use the following link to explore this feature in greater detail: Swift Point View (WinForms)

New Heat Map Control (WinForms)

v21.2 includes a new WinForms Heatmap Control that you can use to plot heatmap charts. Heatmaps help visualize data using a tabular layout (through color variations).


The following is a summary of Heatmap related features included in this release:

  • Binding to various data source types
  • Unbound mode support
  • Multiple coloring algorithms
  • Zoom and scroll operation support
  • Cell highlighting modes
  • Tooltip support
  • Titles
  • Cell labels

Documentation: HeatmapControl

If you’re an active Universal or DXperience subscriber, and have installed our EAP, use the following link to explore this feature in greater detail: Heatmap - Color Providers (WinForms)

Maps - Create Lines, Polylines and Polygons from a View Model (MVVM enhancements) (WPF)

In our on-going effort to enhance our MVVM bindings, we extended ListSourceDataAdapter to generate lines, polylines, and polygons from a collection of coordinates in a View Model.

We added two new mapping types (MapLineMappingInfo and MapMultipointItemMappingInfo) for lines and multi-point shapes (MapPolylines and MapPolygons).

Documentation: MapLineMappingInfo | MapMultipointItemMappingInfo

If you’re an active Universal or DXperience subscriber, and have installed our EAP, use the following link to explore this feature in greater detail: Map Arrows (WPF)

Maps - Lambert Azimuthal Equal-Area projection support (WinForms, WPF)

This release includes support for a new projection type – the European Terrestrial Reference System 1989 - Lambert azimuthal equal-area (ETRS89-LAEA) projection. To enable this new projection, set the GeoMapCoordinateSystem.Projection property to Etrs89LambertAzimuthalEqualAreaProjection.

You can use this projection to display European Union (EU) maps with minimal distortion.

If you’re an active Universal or DXperience subscriber, and have installed our EAP, select one of the following to explore this feature in greater detail: Map Projections (WinForms) | Map Projections (WPF)

WinForms — Early Access Preview (v21.2)

$
0
0

Our next major release (v21.2) is just around the corner and all active DevExpress Universal or DXperience subscribers can explore our newest features months before official release. Point your browser to the DevExpress Download Manager and download our WinForms Early Access Preview (EAP) v21.2 build to review the features outlined in this blog post.

Early Access and CTP builds are provided solely for early testing purposes and are not ready for production use. This build can be installed side by side with other major versions of DevExpress products. Please backup your project and important data before installing Early Access and CTP builds.

Please remember that this EAP does not include all features/products we expect to ship in our v21.2 release cycle. We are working hard to finalize all v21.2 features/capabilities and once we have more information to share, we’ll post updates on this channel.

HTML & CSS Templates

The DevExpress WinForms 2021 Roadmap briefly outlined our plans regarding HTML & CSS template support. In this v21.2 EAP build, you will find four primary updates to our HTML-CSS Template engine:

  • HtmlTemplateControl— a brand-new control designed to render the template assigned to it. You can use it to create a variety of UI elements including buttons, toolbars, search panels, etc.
  • HtmlTemplatePopup— ike the HtmlTemplateControl, this new component renders HTML-CSS templates, and displays results as a pop-up menu.
  • ItemsView for the DevExpress WinForms Data Grid control — a Data Grid View compatible with web templates. This View has no default data representation. Its appearance and record layout is driven by the template assigned to it.
  • Template support for existing DevExpress controls. The Data Grid Tile View and Gantt Control are the UI first controls with built-in web template support (more are on the way).

We've used these four items to construct a new "Chat Client App" demo (available in the DevExpress WinForms Demo Center and on GitHub). This demo simulates a chat client application and was built almost exclusively with HTML-CSS templates.

We expect to extend HTML-CSS template support over the next year and to:

  • Increase the number of DevExpress controls that support templates. WinExplorerView, Scheduler and Tree List are among the first candidates for future upgrade.
  • Increase the number of supported HTML tags. At present, our internal engine only supports a limited set of HTML tags. As such, you cannot simply copy complex HTML layouts found on the web and paste it into our controls. Of course, our ultimate objective is to deliver parity between DevExpress WinForms templates and native HTML markup. For now, you can use the following small trick to check whether your template is compatible with our controls: insert it into the HtmlTemplateControl designer and its built-in syntax editor will highlight unsupported tags and values.

  • We will also continue to evolve our WinForms Demo Center module to better explain how to use web mark-up and demonstrate how to leverage its potential to design UI elements within your app (and share sample templates with others).

Data Grid

In addition to HTML-CSS features mentioned above (templates support for the Tile View and our brand-new Items View), this EAP includes Search mode support for our recently introduced column in-header search box. In our previous major release, this option was only available in Filter mode — values that did not match entered strings were hidden. In v21.2, you can set the OptionsFilter.InHeaderSearchMode property to "TextSearch". When InHeaderSearchMode is set to "TextSearch", our WinForms Data Grid highlights matching values and leaves non-matching values visible.

End-users can press Ctrl+Up/Ctrl+Down or F3/Shift+F3 to navigate between matching records.

This new search feature is limited to matches within visible data rows (collapsed and group rows are ignored). This feature is also limited to client (non-server) mode and is recommended for data sources with 100,000 rows or less.

Gantt Control

You can now use HTML-CSS templates to customize the appearance of the following Gantt Control elements:

  • Tasks, Summaries, and Milestones
  • Regular and Summary Task Progresses
  • Regular, Summary and Milestone Task Baselines
  • Text Labels
  • Interaction tooltips
  • Split Tasks

To create a template, use the editor dialog (invoked when you click the ellipsis button next to the GanttControl.HtmlTemplates property in Visual Studio Property Grid). When your template is ready, handle the GanttControl.QueryItemTemplate event to assign it to a required element type.

void GanttControl1_QueryItemTemplate(object sender, QueryItemTemplateEventArgs e) {
    switch(e.ItemType) {
        case GanttChartItemType.Task:
        case GanttChartItemType.SummaryTask:
            e.Template.Assign(template1);
            break;
        case GanttChartItemType.Progress:
        case GanttChartItemType.SummaryTaskProgress:
            e.Template.Assign(template2);
            break;
        case GanttChartItemType.TextLabel:
            e.Template.Assign(template3);
            break;
    }
}

Windows 11 Support

Microsoft is rolling out Windows 11 later this year, and as you might expect, we're doing everything possible to ensure compatibility with Microsoft’s newest OS. In addition to compatibility-related considerations, we’ve also updated our UI to better match the Windows 11 user experience. Your DevExpress forms will now include rounded corners to match the look and feel of Windows 11. Note: This change applies to applications using both vector and raster skins.

These updated forms do not have shadows/skinned borders when using Office-inspired skins. We'd love to hear your feedback on the appearance of this new window (whether you think certain skins should ship with standard square corners). Note that you can always modify the static WindowsFormsSetting.AllowRoundedWindowCorners setting to manually control the appearance of form corners (this setting is functional only in apps running on Windows 11).

Diagrams

The DevExpress WinForms v21.2 EAP allows you to use the designer to configure the WinForms Diagram Control in .NET.

Scheduler

With our v21.2 EAP, you will be able to set custom appointment or column widths as needs dictate.

Column width is specified by the View.ColumnWidth property. The View.ColumnWidthMode property must be set to "Fixed". In this mode, you can enable the View.AppointmentDisplayOptions.StretchAppointments property so that appointments stretch horizontally to occupy the entire column width.

To specify the custom appointment width, use the View.AppointmentDisplayOptions.AppointmentWidth property. This setup is available when the View.ColumnWidthMode is set to "Auto". You can modify the View.AppointmentDisplayOptions.StretchAppointments property to specify whether rightmost appointments ignore custom width settings and occupy free column space.

These settings are available in Day, Work Week and Full Week Views, and only when appointments are not groupped by dates.

Charts - Customizable Empty Points

The DevExpress Chart Control can process gaps in a data source as empty points (points with undefined values). These gaps can now be visualized using different style options (based on Series view type). You can fully customize the appearance of point markers, line and area segments used to display empty points.

You can also draw “mock” points instead of gaps (based on values of neighboring Series points). To use this feature, set the series view’s EmptyPointOptions.ProcessPoints property to Interpolate.

Documentation: Empty Points (WinForms)

Demo: Empty Points (WinForms)

Charts - Fast (Swift) Point Series

We added a new lightweight Swift Point Series optimized to quickly render large data sets as a scatter (XY) plot.

The following chart summarizes the benefits of a Swift Point versus a regular Point Series with default settings enabled:

Documentation: SwiftPointSeriesView

Demo: Swift Point View (WinForms)

New Heat Map Control

v21.2 includes a new WinForms Heatmap Control that you can use to plot heatmap charts. Heatmaps help visualize data using a tabular layout (through color variations).

The following is a summary of Heatmap related features included in this release:

  • Binding to various data source types
  • Unbound mode support
  • Multiple coloring algorithms
  • Zoom and scroll operation support
  • Cell highlighting modes
  • Tooltip support
  • Titles
  • Cell labels

Documentation: HeatmapControl

Demo: Heatmap - Color Providers

Maps - Lambert Azimuthal Equal-Area projection support

This release includes support for a new projection type – the European Terrestrial Reference System 1989 - Lambert azimuthal equal-area (ETRS89-LAEA) projection. To enable this new projection, set the GeoMapCoordinateSystem.Projection property to "Etrs89LambertAzimuthalEqualAreaProjection".

You can use this projection to display European Union (EU) maps with minimal distortion.

Demo: Map Projections (WinForms)

Reports

WinForms Report Viewer - DirectX Support

Our WinForms Document Viewer control now supports DirectX rendering for both user interface elements and the report document. The benefits of DirectX rendering are numerous and include:

  • Up to 80% faster document rendering
  • Smoother scrolling experience
  • Enhanced responsiveness in multi-page mode
  • Enhanced glyph rendering quality thanks to DirectWrite

The following videos help demonstrate the power of DirectX rendering:

Localization - Translation Strings CSV Import/Export

You are now able to export report localization strings to a CSV file and use it to translate report elements with the help of third-party services. In addition, our Localization Editor can import translations made within a CSV file and apply it to a report.

PDF Content - Embed PDFs into Report Pages

The XRPdfContent report control exposes a new GenerateOwnPages property – a property that manages operation mode. This control can act like a subreport when the property is disabled. With the help of a control placeholder, you can limit the area to scale and embed PDF files directly into your report.

This new mode will be useful when:

  • You need to embed PDF file content into a report with common headers/footers (headers/footers will be printed on PDF file pages as well).
  • You need to print specific content (pictures, bar codes, page numbers, a report watermark) over the contents of your PDF file.
  • You need to design a pre-printed form and use a PDF file as a watermark.
  • You need to create a report document with an A4 paper kind and include a PDF file with different page dimensions.
If you’ve yet to explore the capabilities of the XRPdfContent report control, refer to the following article for more information: Reporting - Merge PDF Documents into Your Report (v20.1).

Upcoming Features

While the following features/capabilities did not make our first EAP, they will ship in our v21.2 release cycle.

Office-Inspired UI Controls (DevExpress Spreadsheet, Rich Text Editor, and PDF Viewer)

Accessible PDF Export

Our upcoming release will allow you to export your spreadsheet and rich text documents to tagged (accessible) PDF files. We expect to fully support PDF/A-1a, PDF/A-2a, PDF/A-3a, and PDF/UA standards. You will be able to generate accessible PDFs in code or via user interface elements.

Custom Font Loading Engine

Our desktop Rich Text Editor and Spreadsheet controls (v21.2) will allow you to use fonts not installed on a given system. This feature allows you to avoid font substitution when you display, print, or export (to PDF) documents with non-standard fonts. You will be able to load necessary fonts from files, streams, or byte arrays. These fonts will be available to all instances of the DevExpress Spreadsheet and Rich Text Editor within a given project.

Set Print Options in Print Preview

v21.2 will add a new Settings pane to the Spreadsheet control’s Print Preview window. This pane will allow you to specify the following print-related settings:

  • Select spreadsheet content to print. You will be able to print the entire workbook or a specific portion of your document.
  • Specify the number of copies to print.
  • Customize page settings (document orientation, paper size, and page margins).
  • Define scaling options.

File Dialogs

We expect to release a stand-alone component that tweaks DevExpress WinForms Data Grid, Tree List, and Breadcrumb Editor controls so that you could use them to create custom file & folder managers.


Your Feedback Matters

As always, we welcome your thoughts and feedback. Please comment below or submit a support ticket via the DevExpress Support Center for more information on what we have planned for v21.2.


WPF and WinUI — Early Access Preview, Upcoming Features (v21.2)

$
0
0

As you may know, we are a few months away from our next major release (v21.2). In this post, I’ll summarize WPF-related features/capabilities available in our upcoming Early Access (EAP) build, and preview additional WPF and WinUI features we expect to ship in November.

If you own an active DevExpress Universal or DXperience Subscription, you can download and install our v21.2 Early Access Preview (EAP) today. Visit the DownloadManager page to obtain the EAP build.

And please remember - your feedback matters. Once you’ve installed the EAP and had the opportunity to explore its capabilities, reach out to us via the DevExpress Support Center and tell us how we can improve our implementation and better serve your business needs going forward.

Early Access and CTP builds are provided solely for early testing purposes and are not ready for production use. This build can be installed side by side with other major versions of DevExpress products. Please backup your project and important data before installing Early Access and CTP builds.

Perhaps most importantly, this EAP may not include all features/products we expect to ship in our v21.2 release cycle. We are working hard to finalize all v21.2 features/capabilities and once we have more information to share, we’ll post updates on this channel.

Table of Contents

WinUI Development Update

We expect to release a new version of DevExpress WinUI components later this year. The new build will include the following new features/capabilities:

  • New WinUI Report Viewer
  • WinUI Data Grid - Printing & Export
  • WinUI Data Grid - New Optimized Templates
  • WinUI Data Grid - Horizontal Virtualization

The DevExpress WinUI 3 component suite is available free-of-charge for a limited-time. If you have yet to register your free copy, please visit the page below at your convenience.

DevExpress WinUI Controls v21.2 – Reserve Your Free Copy Today
Includes: DataGrid, Scheduler, Ribbon Toolbar, Data Editors, Gauge Indicators, Range Control,
and over 10 Chart types.

New XAML Designer Extensions for VS2022 and .NET 5

Visual Studio uses a new XAML designer for .NET Core, .NET 5, and .NET 6 WPF projects. The same designer is also used for .NET Framework-powered WPF projects within Visual Studio 2022.

v21.2 will include the following extensions to our new XAML Designer.

Chart Designer

The DevExpress Chart Designer is implemented as a separate window and allows you to create new and customize existing charts with ease.

Documentation

Chart Designer

Report Designer - Expressions

We extended the Report Designer and improved its user experience when defining expression bindings:

  • A new button (with a formula-f symbol) is now displayed next to the selected control. This button allows you to invoke the Expression Editor instantly.
Report Designer - New Expression Button
  • The Properties panel within the Report Designer now highlights “bindable” properties with a formula (f) symbol. A “colored” formula (f) symbol indicates that a property is bound to data:
Report Designer - Properties Panel - Expression Indicator

Mask Editor

The DevExpress Mask Editor allows you to quickly create and customize masks of any complexity at design time.

Documentation

Mask Editor

Quick Action Enhancements

  • Improved startup performance for dialogs and wizards activated via Quick Actions.
  • Added new actions that generate a Ribbon UI for our WPF Spreadsheet, Rich Text Editor, and Scheduler components.
Quick-Actions

Remote Desktop Performance Enhancements

Our theme cache engine - enabled by default for all built-in and custom WPF themes - now supports multiple sign in/sign out operations. This new option enhances the performance of all WPF apps developed with DevExpress components. Performance gains are especially significant for applications executed remotely (using tools such as Microsoft Remote Desktop Services or Citrix), where sign in/sign out operations are more common.

To help visualize performance related benefits associated with this enhancement, we measured how long it takes to render a WPF Spreadsheet control normally and after sign in/sign out:

RDP Enhancements

ARM64 Support

x86 apps built with v21.2 DevExpress WPF components can successfully execute on ARM64 devices.

Accessibility

Screen Reader Support for Validation Errors

Accessibility-related features now include validation support. Screen readers can now inform a user of validation errors within focused WPF editors and data cells.

Documentation

Visual Studio and Office Themes - Enhanced Contrast Palettes

Our enhanced Contrast palettes use carefully selected color combinations to help individuals with vision impairment distinguish text, borders, selection states, and other visual elements.

Documentation

Enhanced Contrast palettes are available for the following themes:

Enhanced Contrast Palettes

Data Grid and TreeList

MVVM Command API

Our WPF Data Grid and TreeList components include a new set of command properties:

  • AddingNewNodeCommand
  • CustomNodeFilterCommand
  • CustomUnboundColumnDataCommand
  • CellMergeCommand
  • CellValueChangedCommand
  • CellValueChangingCommand
  • InitNewRowCommand
  • InitNewNodeCommand
  • InvalidRowExceptionCommand
  • NodeChangedCommand
  • ValidateCellCommand

These properties act as counterparts to standard events and allow developers to shape data and react to user input at the ViewModel level without writing code in the View.

<dxg:GridControl CustomUnboundColumnDataCommand="{Binding UnboundColumnDataCommand}">
[Command]
public void UnboundColumnData(DevExpress.Mvvm.Xpf.UnboundColumnRowArgs args) {
    if(args.IsGetData) {
        Product item = (Product)args.Item;
        args.Value = item.UnitPrice * item.UnitsOnOrder;
    }
}

Documentation

Lock TreeList Updates

Our WPF TreeList allows you to fully lock calculations and tree hierarchy updates within it.

public void UpdateSource() {
    TreeListControl.View.BeginDataUpdate(true);
    //update source
    TreeListControl.View.EndDataUpdate();
}

As you might expect, this new API will help improve performance for large data sets (when/if large record sets must be updated simultaneously).

Documentation

New Windows 10 Dark Theme

This release includes a new Win10Dark theme – a theme that was inspired by the dark mode in Windows 10. Much like the Win10Light theme, the Win10Dark theme will automatically update its colors after each change to an accent color in Windows.

In addition, applications developed with DevExpress WPF controls can automatically switch between Win10Dark and Win10Light themes when a user selects the light or dark app mode within the OS.

Windows 10 Themes | Windows 10 Accent Color and App Mode

Windows 10 Dark Theme & App Mode Support

SVG Enhancements

Our internal SVG image parser can now display raster images embedded in SVG.

Charts and Maps

Charts - Customizable Empty Points

The DevExpress Chart Control can process gaps in a data source as empty points (points with undefined values). These gaps can now be visualized using different style options (based on Series view type). You can fully customize the appearance of point markers, line and area segments used to display empty points.

You can also draw “mock” points instead of gaps (based on values of neighboring Series points). To use this feature, set the series view’s EmptyPointOptions.ProcessPoints property to Interpolate.

Documentation

Charts - Customizable Empty Points

If you’re an active Universal or DXperience subscriber, and have installed our EAP, select one of the following to explore this feature in greater detail: Empty Points

Maps - Create Lines, Polylines and Polygons from a View Model (MVVM Enhancements)

In our on-going effort to enhance our MVVM bindings, we extended ListSourceDataAdapter to generate lines, polylines, and polygons from a collection of coordinates in a View Model.

We added two new mapping types (MapLineMappingInfo and MapMultipointItemMappingInfo) for lines and multi-point shapes (MapPolylines and MapPolygons).

Documentation: MapLineMappingInfo | MapMultipointItemMappingInfo

If you’re an active Universal or DXperience subscriber, and have installed our EAP, use the following link to explore this feature in greater detail: Map Arrows

Maps - Lambert Azimuthal Equal-Area Projections

This release includes support for a new projection type – the European Terrestrial Reference System 1989 - Lambert azimuthal equal-area (ETRS89-LAEA) projection. To enable this new projection, set the GeoMapCoordinateSystem.Projection property to Etrs89LambertAzimuthalEqualAreaProjection.

You can use this projection to display European Union (EU) maps with minimal distortion.

Maps - Lambert Azimuthal Equal-Area Projections

If you’re an active Universal or DXperience subscriber, and have installed our EAP, select one of the following to explore this feature in greater detail: Map Projections

Upcoming Features

Though the following features are not included in our first EAP, we expect to include them in our next preview or our first beta.

.NET 6 Support

DevExpress WPF controls will support the latest Preview build of .NET 6.

Visual Studio 2022 Support

We expect to add DevExpress WPF Project & Item Templates, menu items, Toolbox items, and XAML designer extensions for Visual Studio 2022 Preview.

Windows 11 Support

We will make certain that apps built with DevExpress WPF components function properly on Windows 11 devices.

New Heat Map Control

A new Heatmap Control that visualizes data in tabular format through variations in coloring.

Data Grid & TreeList - New CRUD API

New events & commands will simplify CRUD operations:

  • Row editing - start, finish & cancellation across all edit modes (inline editing, Edit Entire Row, Edit Form).
  • Deletion of selected rows & synchronization of deleted rows with the database.
  • Refresh operations for regular, asynchronous, and server-side data sources.

Spreadsheet, Rich Text Editor, and PDF Viewer - Accessible PDF Export

Our upcoming release will allow you to export your spreadsheet and rich text documents to tagged (accessible) PDF files. We expect to fully support PDF/A-1a, PDF/A-2a, PDF/A-3a, and PDF/UA standards. You will be able to generate accessible PDFs in code or via user interface elements.

Spreadsheet, Rich Text Editor - Custom Font Loading Engine

Our WPF Spreadsheet and Rich Text Editor controls (v21.2) will allow you to use fonts not installed on a given system. This feature allows you to avoid font substitution when you display, print, or export (to PDF) documents with non-standard fonts. You will be able to load necessary fonts from files, streams, or byte arrays. These fonts will be available to all instances of the DevExpress Spreadsheet and Rich Text Editor within a given project.

Spreadsheet - Set Print Options in Print Preview

v21.2 will add a new Settings pane to the Spreadsheet control’s Print Preview window. This pane will allow you to specify the following print-related settings:

  • Select spreadsheet content to print. You will be able to print the entire workbook or a specific portion of your document.
  • Specify the number of copies to print.
  • Customize page settings (document orientation, paper size, and page margins).
  • Define scaling options.

More Quick Action Enhancements for the new XAML Designer

  • New actions to generate Data Grid columns.
  • The Conditional Formatting Editor dialog.

Best Practices, Examples & Documentation

All help articles will be updated to reflect specifics related to .NET Core, .NET 5, and .NET 6. The majority of code examples will have a .NET version alongside a .NET Framework counterpart.

We also expect to publish best practices and examples for the following topics:

  • Dependency Injection with DevExpress controls.
  • MVVM in Reporting.
  • Performance enhancements for the Data Grid.
  • CRUD implementation in the Data Grid.

Your Feedback Counts

As always, we welcome your feedback. Please post your comments below or create a new support ticket if you've beta tested our Early Access Preview.

Data Processing Scenarios (ETL) - Your Feedback Matters

$
0
0

As you may already know, we are evaluating the importance of ETL data processing among our users and considering ways in which to improve user experiences for common ETL (extract, transform, load) processes within .NET apps. To help us finalize our future plans, please take a moment to review this post and submit your feedback to us.

Important Note: This blog post is conceptual in nature - we have yet to produce a working ETL prototype. Accordingly, all screenshots and code snippets are mere mockups.

Common ETL Scenarios

Please estimate the relevance of the following TOP 3 user stories – user stories that we selected after analyzing hundreds of user responses in our initial survey.

User Story #1: Aggregate Data from Multiple Data Sources Using a Web Service (Web App)

Scenario/Need

A Web developer creates a backend that prepares data in a format required by the client JavaScript framework. Input data is collected from multiple web services in JSON format. Once collected, data must be consolidated and grouped.

Our ETL Solution Ideas

  1. Create and deploy an ETL model in code.
    You should use our ETL API to write the model in code and pass it to EtlExecutor

Pseudo-code:

[ApiController]
[Route("api/[controller]")]
public class OrdersController : ControllerBase {
    [HttpGet]
    public IEnumerable<object> GetOrders() {

        var sqlNode1 = new SqlNode() {
            ConnectionString = "localdatabaseconnectionstring",
            Sql = "select * from employees"
        };
        var calculatedColumn = new CalculatedColumn() {
            ColumnName = "FullName",
            Expression = "[FirstName] + [SecondName]"
        };

        var jsonNode2 = new JsonNode() {
            Uri = "https://sample.com/api/orders"
        };
        var parseDate = new ParseDateNode(jsonNode2) {
            ColumnName = "Date",
            Format = "yyyy-MM-dd HH:mm"
        };
        var filterNode = new FilterNode(parseDate) {
            FilterString = "IsToday([Date])"
        };
        var joinNode = new JoinNode(calculatedColumn, filterNode) {
            SourceColumn = "id",
            TargetColumn = "employeeId"
        };
        var groupByNode = new GroupByNode(joinNode) {
            GroupBy = new string[] { "FullName" },
            SummaryList = new SummaryInfo[] {
                new SummaryInfo() { Column = "Price", Summary = "Sum", NewColumnName = "TotalSales"},
                new SummaryInfo() { Column = "Price", Summary = "Max", NewColumnName = "MaxSales"}
            }
        };
        var renameColumn = new RenameColumn(groupByNode) {
            OldName = "FullName",
            NewName = "Employee name"
        };
        var outputJsonNode = new OutputJsonNode(renameColumn) {
            Indent = false
        };
        var executor = new EtlExecutor(Mode.Debug);
        return executor.Run(outputJsonNode);
    }
}
  1. Create and deploy an ETL model via a visual editor.

You can use the ‘Add New Item’ dialog in Visual Studio to create the new ETL model (“Devexpress ETL”) and customize it with a visual editor. See “Workflow Mockup” in the Technical Design section for screenshots.

You can then attach a pre-built ETL model to the EtlExecutor class in a controller class.

Pseudo-code:

[ApiController]
[Route("api/[controller]")]
public class OrdersController : ControllerBase {
    [HttpGet]
    public IEnumerable<object> GetOrders() {
        var executor = new EtlExecutor(Mode.Debug);
        return executor.Run("./Model/orders.dxetl");

    }
}

User Story #2: Pre-process Data from External Databases/File Sources and Analyze Information via UI Components (Desktop App)

Scenario/Need

A desktop application developer implements an analytics module in a WinForms application. Source data is loaded from a SQL database and Excel files. Data must be consolidated and pre-processed before it is passed to the UI component (such as a Data Grid control).

Our ETL Solution Ideas

  1. Use the ETL API to write the model in code.

Pseudo-code:

private DataGridView dataGridView1 = new DataGridView();
...
var sqlNode1 = new SqlNode() {
    ConnectionString = "localdatabaseconnectionstring",
    Sql = "select * from employees"
};

var jsonNode2 = new JsonNode() {
    Uri = "https://sample.com/api/orders"
};
var filterNode = new FilterNode(jsonNode2) {
    FilterString = "IsToday([Date])"
};
var joinNode = new JoinNode(sqlNode1, filterNode) {
    SourceColumn = "id",
    TargetColumn = "employeeId"
};
var groupByNode = new GroupByNode(joinNode) {
    GroupBy = new string[] { "FullName" },
    SummaryList = new SummaryInfo[] {
        new SummaryInfo() { Column = "Price", Summary = "Sum", NewColumnName = "TotalSales"},
        new SummaryInfo() { Column = "Price", Summary = "Max", NewColumnName = "MaxSales"}
    }
};

dataGridView1.DataSource = new ETLDataSource(groupByNode);
  1. Create and deploy an ETL model via a visual editor.

You can use the ‘Add New Item’ dialog in Visual Studio to create the new ETL model (“Devexpress ETL”) and customize it with a visual editor. See “Workflow Mockup” in the Technical Design section for screenshots.

You can then attach a pre-built ETL model to the Grid control using the ETL Data Source from the Create a New Data Source dialog.

User Story #3: Set up a Data Warehouse with Transformation Steps in Code

Scenario/Need

A developer creates an application that collects data from multiple data sources, transforms data (join, group, etc) and sends the resulting dataset to a database or a Warehouse.

Our ETL Solution Idea

  1. Create an ETL model in code.

Pseudo-code:

var sqlNode1 = new SqlNode() {
    ConnectionString = "localdatabaseconnectionstring",
    Sql = "select * from employees"
};
var calculatedColumn = new CalculatedColumn() {
    ColumnName = "FullName",
    Expression = "[FirstName] + [SecondName]"
};

var jsonNode2 = new JsonNode() {
    Uri = "https://sample.com/api/orders"
};
var parseDate = new ParseDateNode(jsonNode2) {
    ColumnName = "Date",
    Format = "yyyy-MM-dd HH:mm"
};
var filterNode = new FilterNode(parseDate) {
    FilterString = "IsToday([Date])"
};
var joinNode = new JoinNode(calculatedColumn, filterNode) {
    SourceColumn = "id",
    TargetColumn = "employeeId"
};
var groupByNode = new GroupByNode(joinNode) {
    GroupBy = new string[] { "FullName" },
    SummaryList = new SummaryInfo[] {
        new SummaryInfo() { Column = "Price", Summary = "Sum", NewColumnName = "TotalSales"},
        new SummaryInfo() { Column = "Price", Summary = "Max", NewColumnName = "MaxSales"}
    }
};
var renameColumn = new RenameColumn(groupByNode) {
    OldName = "FullName",
    NewName = "Employee name"
};
var outputJsonNode = new OutputJsonNode(renameColumn) {
    Indent = false
};
var executor = new EtlExecutor(Mode.Debug);
var jsonString = executor.Run(outputJsonNode);

Options: Fine-tune an existing transformation function/parameter or create a custom transformation.

You can then create fully custom transformation steps:

class CustomStep: IEtlNode {
    IDataVerctors Eval(IDataVerctors dataFlow, CustomStepOptions option) {
        dataFlow.Add(option.NewColumnName, CustomTransformation(dataFlow[option.TargetColumn]));
        return dataFlow;
    }
}

You can also customize existing transformation steps:

public class CustomSummary : ICustomSummary {
    decimal accumulator = decimal.MaxValue;
    void AddValue(decimal value) {
        if(accumulator < value) {
            accumulator = value;
        }
    }
    decimal GetResult() {
        return accumulator;
    }
}
var groupByNode = new GroupByNode(joinNode) {
    GroupBy = new string[] { "FullName" },
    SummaryList = new SummaryInfo[] {
        new SummaryInfo() { Column = "Price", Summary = new CustomSummary(), NewColumnName = "TotalSales"},

    }
};
  1. Place a breakpoint near the required operation and run the application in debug mode to examine the current variable state. Optional: examine the model’s diagram and execute specific operations (steps).

  2. Access any application’s .NET entity when debugging the ETL model. To apply changes to the ETL model, rebuild your application (no in-place modifications in debug mode).

Technical Design of Our ETL Solutions (Survey)

Based on your data processing/business requirements, please tell us what you consider most relevant (you can also leave a comment if necessary):

Workflow Mockup - Create and deploy an ETL Model


  1. Use the Add New Item dialog in Visual Studio to add a new ETL model (“Devexpress ETL”).
  1. Define the ETL model via a visual editor.

· Add the first step (in this example, add a Web Service data source)

· Add more steps based on resulting data schema


  1. Write the EtlRunner code in controller / Bind a component to the data source.

Reporting — Early Access Preview (v21.2)

$
0
0

v21.2 is a couple of months away and we wanted to document some of the features we expect to ship in November.

Before we describe these features, a quick reminder: If you are an active Universal or DXperience subscriber and want to test upcoming v21.2 features before our official release, you can download our first Early Access Preview (EAP) build via the DevExpress Download Manager.

Early Access and CTP builds are provided solely for early testing purposes and are not ready for production use. This build can be installed side by side with other major versions of DevExpress products. Please backup your project and other important data before installing Early Access and CTP builds

This EAP may not include all features/products we expect to ship in our v21.2 release cycle. As its name implies, the EAP offers an early preview of what we expect to ship in two months.

Visual Studio Report Designer for .NET 5 Apps - Release Candidate

We stabilized and enhanced our market-first Visual Studio-integrated Report Designer in this development cycle and are looking forward to your feedback on our most recent update. v21.2 related enhancements include:

  • Improved startup time - at least 2x faster than v21.1.
  • Improved custom type discovery (from your assemblies) for both ObjectDataSource and EFDataSource.
  • With v21.2, the Report Designer is enabled by default for *.vsrepx files.
  • You can now open standard XtraReport class files (*.cs) with our updated Visual Studio Report Designer. We now offer a unified design time experience for both .NET Framework and .NET (.NET Core) apps.
Visual Studio Report Designer for .NET 5 Apps - Class Files

The following video demonstrates how our new .NET 5 Visual Studio Report Designer loads a report.

If you’ve yet to explore the capabilities of our Visual Studio Report Designer in .NET 5/.NET 6, refer to the following release article for additional info: Reporting - Visual Studio Integrated Report Designer for .NET Apps (CTP, v21.1).

Documentation

Report Designer Enhancements

Visual Studio Report DesignerWinFormsWPFWeb

Expressions

We extended our Report Designer (for all supported platforms) and improved its user experience when defining expression bindings:

  • A new button (with a formula-f symbol) is now displayed next to the selected control. This button allows you to invoke the Expression Editor instantly.

Report Designer - New Expression Button

  • The new Expression Editor view allows you to set up expression bindings for various report control properties directly within its dialog window. A glowing formula (f) symbol indicates that a property has an expression assigned:
Report Designer - Expression Editor - New View
  • The Properties panel within Report Designers now highlights “bindable” properties with a formula (f symbol indicates that a property is bound to data:

Report Designer - Properties Panel - Expression Indicator

We also replicated this user experience within the Visual Studio Report Designer properties panel:

Visual Studio Report Designer - Expression Indicator

New Toolbox

All Report Designers (minus our integrated Visual Studio Report Designer) now feature a new two-column toolbox that displays our entire report control set simultaneously. You can expand/collapse the toolbox when using the desktop (WinForms and WPF) version of DevExpress Reports:

Report Designer - New Toolbox

WinForms Report Viewer - DirectX Support

WinForms

Our WinForms Document Viewer control now supports DirectX rendering for both user interface elements and the report document. The benefits of DirectX rendering are numerous and include:

  • Up to 80% faster document rendering
  • Smoother scrolling experience
  • Enhanced responsiveness in multi-page mode
  • Enhanced glyph rendering quality thanks to DirectWrite

Enable the viewer's UseDirectXPaint property to switch from the default GDI+ rendering engine to DirectX. 

The following videos help demonstrate the power of DirectX rendering:

  • Rendering speed – As you can see, DirectX is far faster than GDI
  • Smoother scrolling – Like the previous example, DirectX is more efficient than GDI
  • Localization - Translation Strings CSV Import/Export

    Visual Studio Report DesignerWinFormsWPF

    You are now able to export report localization strings to a CSV file and use it to translate report elements with the help of third-party services. In addition, our Localization Editor can import translations made within a CSV file and apply it to a report.

    Report Designer - Localization Editor

    Documentation

    PDF Content - Embed PDFs into Report Pages

    Visual Studio Report DesignerWinFormsWPFWeb

    The XRPdfContent report control exposes a new GenerateOwnPages roperty – a property that manages operation mode. This control can act like a subreport when the property is disabled. With the help of a control placeholder, you can limit the area to scale and embed PDF files directly into your report. Refer to the following diagram for more information on our implementation:


    This new mode is useful when:

    • You need to embed PDF file content into a report with common headers/footers (headers/footers will be printed on PDF file pages as well).
    • You need to print specific content (pictures, bar codes, page numbers, a report watermark) over the contents of your PDF file.
    • You need to design a pre-printed form and use a PDF file as a watermark.
    • You need to create a report document with an A4 paper kind and include a PDF file with different page dimensions.

    Documentation

    If you’ve yet to explore the capabilities of the XRPdfContent report control, refer to the following article for more information: Reporting - Merge PDF Documents into Your Report (v20.1).

    Parameters - Print Display Values

    The Expression Editor now features a new GetDisplayText function. This function allows you to print selected display values for a lookup parameter:

    Documentation


    SQL and Data Federation Data Sources - Right Outer Join and Full Outer Join

    Both our SQL and Data Federation Data Source now support Right Outer and Full Outer join types:

    When you create a report in code, you can use our Reporting API to construct queries with these new join types. Refer to the following help topics for code samples:

    Web Report Designer Enhancements

    ASP.NET Web FormsASP.NET MVCASP.NET CoreBlazor Server

    Updated User Interface

    The Web Report Designer's Updated UI

    Please review the following article for information related to UI enhancements introduced in this EAP: Reporting — Updated Web Report Designer UI (Coming Soon in v21.2).

    To explore this new UI, be sure to check out the following online demo: Web Report Designer - Online Demo.

    Cross-Tab

    Our Web Report Designer ships with a new Cross-Tab report control. We’ve also included a Cross-Tab report wizard to help you create cross-tab reports with ease.

    Web Report Designer - Cross-Tab

    Documentation

    Report Design Analyzer

    The Report Design Analyzer panel (designed to help you isolate, diagnose, and address common report design/layout-related issues) has been integrated into the DevExpress Web Report Designer (v21.2).

    Web Report Designer - Report Design Analyzer

    If you’ve yet to explore the capabilities of the Report Design Analyzer, refer to the following article: Reporting — Avoid Mistakes in Report Creation with The Help of Report Design Analyzer (v21.1).

    Documentation

    Breaking Changes in v21.2

    Your Feedback Counts

    As always, we welcome your feedback. Please post your comments below or create a new support ticket if you've beta tested our Early Access Preview.

ASP.NET Web Forms and MVC - End Medium Trust support in v21.2

$
0
0

After some internal debate, we decided to end Partial/Medium Trust support across our entire ASP.NET product line (this includes DevExpress Reports and DevExpress Office File API) in our v21.2 release cycle (expected in Nov 2021). If you rely on medium trust, feel free to contact us via the DevExpress Support Center for assistance and migration strategies. While we don’t expect to reverse our decision (Microsoft has not update its implementation in quite a long time and maintenance continues to be an issue), we are more than happy to offer feedback and suggestions (for instance, we can certainly offer advice related to Docker containers.)



DevExtreme JavaScript - Early Access Preview (v21.2)

$
0
0
We are two months away from our next major update (v21.2). The purpose of this post is to preview upcoming features and give you the opportunity to test new functionality before we wrap up our current dev cycle.
Please, use the DevExpress Support Center (or links to individual GitHub discussion pages) to share Early Access Preview (EAP) related feedback with us.
To get started, simply install the ‘devextreme@21.2-next’ NPM package or use the online demo links below to explore our newest features.
Early Access and CTP builds are provided solely for early testing purposes and are not ready for production use. This build can be installed side by side with other major versions of DevExpress products. Please backup your project and other important data before installing Early Access and CTP builds.
This EAP may not include all features/products we expect to ship in our v21.2 release cycle. As its name implies, the EAP offers an early preview of what we expect to ship in two months.

Data Grid/TreeList

New Toolbar Customization API

You can now customize our 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 our DataGrid/TreeList within a React, Angular or Vue app, you can customize the toolbar declaratively without direct DOM manipulation.
We added a new toolbar property that allows you to customize toolbar items in much the same was as a standalone Toolbar. Each DataGrid/TreeList Toolbar item can be specified as an object with the same structure as a standalone Toolbar. In addition, you can 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').
The code snippets below demonstrate use of this new API:

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'
        ]
    },
    ...   
})
The following discussion page includes a link to an API demo: DataGrid and Treelist - Toolbar customization.
Note that this new ‘toolbar’ option only allows you to customize toolbar items, not the entire toolbar. If you need to customize the toolbar itself, use the ‘onToolbarPreparing’ event instead.

Improved Search Functionality

We reduced false-positive matches when users search for numbers within the DataGrid's Search Panel. Our DataGrid now matches search string with both original and formatted cell values, respecting column formatting. For instance, if your number column uses a $#.# format and a cell displays '$12,000.1', you can locate the record by using either '12000.1' or '$12,000.1'. Conversely, '12000.1m' will not match a ‘12000.1’ number cell value as it did previously. The following image describes the difference between our old and new implementation:

Improved navigateToRow API

As you know, long background operations such as data loading affect navigation (in such instances, you do not have access to a target row immediately). Our navigateToRow method now returns a Promise object. This means you can get notified when a background operation has finished.

Control New Row Position

This functionality was released as a CTP in v21.1. However, after re-examining target use cases and processing user feedback, we decided to redesign our implementation slightly. The new API will use row keys instead of row indices.
To insert a new row at a custom position, you will need to specify the 'insertBeforeKey' or 'insertAfterKey' property. Both properties accept the key for the row before/after which you wish to insert the new row. For a simple alternative to popular use cases, we will add a 'newRowPosition' property with a set of shortcut values:
  • "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.
This modified API is not available in this EAP but is set for release in our v21.2 release cycle. If you want to share your feedback on the new API, please leave comments in the following discussion page: DataGrid and TreeList - New record position.

Reworked Virtual Scrolling

In addition to the features outlined above, we dedicated a significant portion of our resources to reworking the DataGrid’s virtual scrolling engine. At this stage, we are not certain that all modifications will ship inside v21.2, but our changes will enable future capabilities that are simply impossible today. We expect to deliver a faster grid, give you additional control over scrolling (via new API members), and more.
If you rely on virtual scrolling (DataGrid/TreeList), please give our EAP a try and let us know if you find any unexpected behavior. We will do our best to address issues prior to official release.

HTML/Markdown Editor

Table Support Enhancements

The following new Table management features are now available:
  • 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)
The following Table-related features are not included in this EAP, but are expected to ship in our v21.2 release cycle:
  • 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

We added a new 'allowSoftLineBreak' configuration option. When enabled, this configuration option allows users to break text within a single block element into multiple lines (via the <br> tag using the new Shift+Enter keyboard shortcut). As you would expect, this feature allows you to break a list item (<li>) into multiple lines or add multiline cells. (Online demo)
Please visit the following GitHub discussion page to learn more about our HTML/Markdown Editor and how you can use these features in jQuery, Angular, React and Vue: HtmlEditor - Table management enhancements.

Gantt

Sorting

DevExtreme Gantt now supports sort operations. Our implementation mirrors the API of our DataGrid and TreeList. You can configure sort-related user interface elements and behaviors via the new sorting configuration option. The following properties are available:
  • 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

Our new API allows you to expand and collapse tasks programmatically:
  • 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

Previously, DevExtreme Gantt calculated its visible date range based on bound data. You can now manually specify date range via the new startDateRange and endDateRange properties.

Gantt View Customization API

We extended the API that manages resource and dependency visibility within the Gantt’s chart region:
  • 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

We added a ‘refresh’ method. As its name applies, ‘refresh’ reloads data and repaints the component.

Diagram

Touch Screen Support

We improved the Diagram component’s touch-screen support in Chromium based browsers (Google Chrome, Microsoft Edge, Firefox, Opera) and on touch screen devices such as Apple iPad and Microsoft Surface.
The following usage scenarios are now fully supported on touch screens:
  • 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 following CheckBox related enhancements are included in this EAP:
  • 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 following Popup related enhancements are included in this EAP:
  • 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 features below will be included in our official release:
  • 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

Our TreeView now offers a new scrolling option. To disable simulated scrolling use the new useNativeScrolling configuration option.

Button Group

We extended ButtonGroup selection modes with a new value - 'none'. You can now set the selectionMode property to ‘none’ and use a ButtonGroup to display a button set as a single control, without enabling active/toggle state. We now use this option internally to display our Scheduler component’s date navigation controls.

Material Theme Update

We applied changes to our product libraries to mirror some of Google’s most recent Material Design Guidelines. For instance, Google deprecated the ‘underlined’ styling mode for inputs and chose to use ‘filled’ mode by default. We preserved both modes and you can switch back to the old style when necessary.
Certain Material Theme modifications (such as element size or spacing) may affect application appearance (if you have customized themes in the past). Please make sure to update your custom CSS, or enable legacy UI variants wherever possible. We expect to publish a detailed guide once we release beta 1. Feel free to submit a support ticket via the DevExpress Support Center if you encounter theme related issues in this EAP.
Note: Editor Label Animation is not included in this EAP but will be included in our first beta.

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

Though the following features are not included in our first EAP, we expect to include them in our next preview or our first beta.

TypeScript

We’re working to improve typings based on issues listed in this discussion page and based on feedback from our customers. We appreciate your on-going support and engagement in this regard.

Native React Grid

v21.2 will include enhanced Keyboard Navigation support (improved accessibility support).

Tree Shaking

We continue to improve Tree Shaking support and have optimized internal module dependencies in this release. This enhancement will reduce bundle size or code chunk sizes in certain usage scenarios (when using the Code Splitting technique).

Feedback

If you’d like to share feedback on this release, please comment below or use the appropriate discussion page (links above) on GitHub. For technical support inquiries, feel free to submit a support ticket via the DevExpress Support Center.

Blazor UI – New DropDown component, Grid, Rich Text Edit, Reporting and Tabs enhancements (EAP v21.2)

$
0
0

Our next major product release is a couple of months away. This post details some the Blazor-related features included in our first Early Access Preview (EAP) and a summary of additional features we expect to ship in November. As always, we welcome your thoughts and feedback.

If you own an active DevExpress Universal or DXperience Subscription, and would like to learn more about our Blazor product line or are ready to explore the features described herein, point your browser to the DevExpress Download Manager and download our EAP build at your convenience. You’ll find demo source code in the DevExpress product installation folder (default path is C:\Users\Public\Documents\DevExpress Demos 21.2\Components\Blazor\). You can execute our sample solutions directly from this folder, or if you prefer, use the DevExpress Blazor Demo Center to view our demos. For more information on how to run Blazor demos locally, refer to the following help topic: Demos.

Early Access and CTP builds are provided solely for early testing purposes and are not ready for production use. This build can be installed side by side with other major versions of DevExpress products. Please backup your project and other important data before installing Early Access and CTP builds.

This EAP may not include all features/products we expect to ship in our v21.2 release cycle. As its name implies, the EAP offers an early preview of what we expect to ship in two months.

New DropDown Component

Our first Blazor EAP includes ships with an entirely new Blazor DropDown component. This new UI element allows you to display a non-modal drop-down window within a Blazor application. The DevExpress Blazor DropDown component ships with the following built-in features:

Header, Body, and Footer Customization

Use the component’s HeaderText, BodyText, and FooterText properties to customize text for the corresponding UI element. To customize window content and appearance, simply use the templates below: 

  • HeaderTextTemplate , BodyTextTemplate, FooterTextTemplate: Allows you to customize the DropDown’s content region. Predefined content alignment and paddings apply. 
  • HeaderTemplate , BodyTemplate, FooterTemplate: Allows you to customize the entire DropDown (all elements). Predefined appearance settings do not apply.

Position

Use one of the following properties to specify the DropDown’s position within your Blazor app:

  • PositionTarget property - specifies the selector of the element relative to which the DropDown component is displayed. 
  • PositionRectangle property - specifies the area relative to which the DropDown component is displayed. 

The PositionMode property defines DropDown orientation (absolute, relative, bottom, center, etc) when the component is activated.

Position Restrictions

The RestrictionMode property defines a restriction zone for the DropDown (Viewport, Page, Rectangle, Selector) inside which the DropDown appears. Use the DropDown’s RestrictionTarget (if you select the DropDownRestrictionMode.Selector option) or RestrictionRectangle (in for the DropDownRestrictionMode.Rectangle option) property to specify the restricted area. If the DropDown exceeds the boundaries of this zone, component behavior will be based on settings applied to RestrictionHandlingMode:
  • Ignore - the DropDown ignores the restriction.
  • Fit - the DropDown remains inside the restriction zone even if the DropDown's target element moves outside the zone.
  • Hide - the component is hidden on the client, but the DxDropDown.IsOpen property is equal to true.
  • Close - the DropDown closes. You can use the Closing event to prevent the close operation.

Custom Size and Resizing Capabilities

Use the component’s Width and Height properties to specify desired dropdown size. Activate the AllowResize property to allow end-users to modify dropdown size. When enabled,end-users can drag the component's border to modify both width and height.

Show and Close Actions

Call the ShowAsync and CloseAsync methods to show and close the DropDown component in code.
Demo: Navigation and Layout - DropDown

Grid

We’ve extended the capabilities of our new Blazor Grid. This EAP includes the following new features

Row Selection

Our Blazor Grid now supports both single and multiple row selection. The new SelectionMode property specifies current mode.

Selection via Mouse Clicks

Users can easily select and deselect rows via mouse clicks. To enable this capability, set the AllowSelectRowByClick option to true. To specify and access selected data items, implement two-way binding for the SelectedDataItems property.

<DxGrid Data="GridDataSource" AllowSelectRowByClick="true" 
@bind-SelectedDataItems="@SelectedDataItems"> <Columns> @*...*@ </Columns> </DxGrid>
@code {
    IEnumerable<object> GridDataSource { get; set; }
    IReadOnlyList<object> SelectedDataItems { get; set; }
    // …
} 

Selection Column

Our Blazor Grid ships with a new column type - DxGridSelectionColumn. This column can display checkboxes in multiple selection mode and radio buttons in single selection mode

<DxGrid Data="GridDataSource" ...>
    <Columns>/
        <DxGridSelectionColumn />
        @*...*@
    </Columns>
</DxGrid> 

Selection in Code

The following new methods allow you to manage Blazor Grid related selection options in code.
Add rows or data items to selection:
  • SelectRow
  • SelectRows
  • SelectDataItem
  • SelectDataItems
  • SelectAllOnPage

Remove rows or data items from selection:

  • DeselectRow
  • DeselectRows
  • DeselectDataItem
  • DeselectDataItems
  • DeselectAllOnPage

You can also call the ClearSelection method to reset all selection options.

Vertical and Horizontal Scrolling

Our Blazor Grid now displays a vertical scrollbar when the height of its content exceeds the height of the component itself.
As you would expect, a horizontal scrollbar appears when the total width of all columns exceeds the width of the component itself.

The horizontal scrollbar appears when the total width of all columns exceeds the width of the component itself.

Column Width Enhancements

v21.2 includes the following column width related enhancements:

  • When you specify a column’s Width property in pixels, the Grid renders the column with the defined width. The column’s cell content no longer affects column width. 
  • If the total width of all columns exceeds the width of the component itself, the Grid shows the scrollbar (as demonstrated in the previous section).
  • If the total width of all columns is less than the component width, the empty space remains to the right.
  • If you do not specify column widths, the Grid renders columns with equal widths.
  • If you specify widths for specific columns only, the Grid renders these columns with the defined widths and divides the remaining space between other columns equally.

We also limited the minimum column width to 50 pixels and introduced a new MinWidth option that allows you to modify this constraint.

Pager Position

You can now control the display of our Blazor Grid’s built-in data pager. Use the PagerPosition property to display the pager at the bottom, the top, or both the top and the bottom.

<DxGrid Data="GridDataSource" PagerPosition="GridPagerPosition.TopAndBottom">
    <Columns>
        @*...*@
    </Columns>
</DxGrid>

Column Text Alignment

Our Blazor Grid automatically aligns text within column data cells/footer cells based on column/bound data type. With v21.2, you can use the new TextAlignment option to modify text alignment as requirements dictate.

<DxGrid Data="GridDataSource" …>
    <Columns>
        <DxGridDataColumn FieldName="ProductName" 
TextAlignment="GridTextAlignment.Center"/> @*...*@ </Columns> </DxGrid>

Access Data Item

You can now access the processed data item within data-related event handlers (CustomSort, CustomGroup, CustomSummary, and so on) and the CellDisplayTemplate.

<DxGrid Data="GridDataSource" …>
    <Columns>
        <DxGridDataColumn FieldName="ProductName">
            <CellDisplayTemplate>
            @{
                var dataItem = @context.DataItem;
                //...
            }
            </CellDisplayTemplate>
        </DxGridDataColumn>
        @*...*@
    </Columns>
</DxGrid> 

Rich Text Editor

New UI Dialogs

We have extended the capabilities of our Blazor Rich Text Editor and introduced the following new UI dialogs:

  • Insert Table
  • Hyperlink
  • Bookmark
  • Font
  • Paragraph
  • Tabs
  • Insert Cells
  • Delete Cells
  • Split Table Cells
  • Find and Replace
  • Page Setup
  • Alert

Graphical user interface, application

Description automatically generated

New Context menu

The DevExpress Blazor Rich Text Editor now includes built-in context menu support. This menu displays different options based on the clicked element and allows users to initiate actions without using the ribbon.

New API

Our Rich Text Editor ships with a new ReadOnly option. This option allows you to place the editor in read-only mode. We have also added a Modified property. As its name implies, this property indicates whether the current document has unsaved changes. 

With the Rich Text Editor’s DocumentFormat setting, you can specify the format used to store document content (allows you to open and save documents using a format other than OpenXml).  

And finally, GotFocus, LostFocus allow you to handle corresponding events when the control receives and loses focus.

Web Report Designer Enhancements

Updated User Interface

The Web Report Designer's Updated UI

Please review the following article for information related to UI enhancements introduced in this EAP: Reporting — Updated Web Report Designer UI (Coming Soon in v21.2).

To explore this new UI, be sure to check out the following online demo: Web Report Designer - Online Demo.

Cross-Tab

Our Web Report Designer ships with a new Cross-Tab report control. We’ve also included a Cross-Tab report wizard to help you create cross-tab reports with ease. 

Web Report Designer - Cross-Tab

Report Design Analyzer

The Report Design Analyzer panel (designed to help you isolate, diagnose, and address common report design/layout-related issues) has been integrated into the DevExpress Web Report Designer (v21.2).

Web Report Designer - Report Design Analyzer

Refer to the Reporting — Early Access Preview (v21.2) post to learn more about upcoming Reporting tool features.

Tabs Scroll

In this release, we introduce a new ScrollMode property that allows you to specify how users navigate between tabs when they do not fit the container’s width. The following modes are available:

  • Auto - the scroll mode is adapted to the device type. Mobile and tablet devices use Swipe mode. Desktop devices use NavButtons mode.
  • NavButtons - the container displays a few tabs that fit the width. Users can navigate to other tabs in the following ways: use the navigation buttons, or hover the mouse pointer over a tab, hold the Shift key, and scroll the mouse wheel.
  • Swipe - the container displays a few tabs that fit the width. To navigate to other tabs, users can swipe tabs, or hover the mouse pointer over the container, hold the Shift key, and scroll the mouse wheel.
  • NoScroll - users cannot scroll tabs. The tabs that do not fit the container’s width are moved to a new line.

Coming Soon in v21.2

The features below are not included in our first EAP, but we expect to make them available in an upcoming beta (v21.2).

Grid

  • Editing within an Edit Form
  • Editing within a Popup Edit Form
  • Page Size Selector
  • Pager Customization Options

Scheduler

  • Templates for various cell types (date headers, resource headers, headers that display days of a week, etc).

Rich Text Edit

  • Localization

Data Editors

  • Custom buttons
  • Item templates for list editors

Charts

  • Side-by-side stacked and full-stacked series
  • Diameter, minimum diameter, and inner radius for Pie and Donut charts
  • • Axis tick customization support
  • Localization
  • Axis inversion and custom position

    Context Menu

    • Templates support 

    Your Feedback Counts

    Should you have questions about this EAP, feel free to post your comments below. If you are testing our EAP and have usage related questions, please submit a support ticket via the DevExpress Support Center.

     

    WinForms Dashboard - Custom item Extensions

    $
    0
    0

    In our most recent release (v21.1), we published a public API that allows you to embed any WinForms control into the DevExpress Dashboard. The primary advantage of this API and our Custom Dashboard Items, is the ability to leverage the functionality available for built-in dashboard items, including support for the following:

  • Interactivity
  • Coloring
  • Export
  • To learn more about Custom Dashboard Items, please refer to our announcement post.

    Based on previous survey results, we recently created a set of highly requested custom DevExpress Dashboard items.

  • Custom Funnel item
  • Custom Gantt item
  • Custom Sankey item
  • Custom Sunburst item
  • Custom Tree List item
  • Custom Waypoint Map item
  • Custom Gannt Item
  • Custom Web Page Item
  • These item samples are available as an example on GitHub. This example demonstrates usage/extensibility of our WinForms Dashboard controls:



    Feel free to configure/reference the source code for use within your project. Should you wish to modify our sample custom dashboard items or use them as a base for your own items, refer to the following GitHub repository: Dashboard for WinForms - Custom Item Extensions.

    You can also integrate these custom items “as-is” if you install the following NuGet package: https://www.nuget.org/packages/DevExpress.Win.Dashboard.CustomItemExtension/

    Documentation:

    See the following tutorials to create a custom item from scratch: Custom Item Tutorials.

    Note: DevExpress Dashboard ships as part of the DevExpress Universal Subscription. Should you wish to upgrade an existing subscription to DevExpress Universal, please email clientservices@devexpress.com for assistance.

    Financial Reporting — Your Feedback Matters

    $
    0
    0

    As you may know, many nations/organizations across the globe have chosen to eliminate expensive paper-based invoice management systems in favor of e-invoicing/e-billing systems. The reasons are many, but the core objective is to increase efficiency, eliminate manual processing, and produce a more touchless process.

    We are now analyzing the scope of this requirement. The purpose of this post is to collect feedback in this regard and understand how we can better assist you moving forward.

    What We Consider an E-Invoice?

    e-invoice is used primarily for B2B and B2G business segments and includes electronic payment (or invoice) information exchange between buyers and sellers. In this post, I’m contemplating invoices that are electronically issued, transmitted, delivered, processed and stored using a specific/standardized format (one that complies with an XML schema).

    Common E-Invoice Types and More

    Our early research revealed that our users have encountered or dealt with the following e-invoice/e-billing related compliance standards:

    Other industry-wide standards (not directly related to e-invoicing) also exist. These standards are used in the EDI (Electronic Data Interchange) space:

    Existing Solutions

    While generating such files might look trivial (after all, you are simply working with different XML structures) a number of open source solutions already exist. Here is a short list of open source projects for reference:

    Your Feedback Counts — Complete a Survey

    With these open-source solutions mind, we now wish to explore your specific needs/requirements and to understand where these libraries fall short. While the lack of documentation, support, and maintenance services are obvious reasons why one might choose a commercial product over an open-source solution, we want to dig a bit deeper. We want to fully understand your specific usage scenarios/use cases and determine whether we can deliver a solution that addresses your business needs. Please review this short survey and let us know your thoughts on this subject.

    FREE OFFER - .NET App Security API (Role-based Access Control)

    $
    0
    0

    Good news! As a registered DevExpress.com user, you are entitled to a free copy of .NET Role-based Access Control & User Authentication API powered by Entity Framework (EF Core) and DevExpress eXpress Persistent Objects ORM (XPO).

    This free DevExpress offer is limited to the following NuGet packages (versions 21.2.x and 22.1.x).

    • DevExpress.ExpressApp.EFCore
    • DevExpress.Persistent.BaseImpl.EFCore
    • DevExpress.ExpressApp.Security.Xpo
    • DevExpress.Persistent.BaseImpl.Xpo

      To download your free copy, please verify your contact information and click Register on the following page: https://www.devexpress.com/security-api-free. We will forward an email message with download instructions. To update your contact information, visit the DevExpress profile management webpage.

      Note: This free offer does not apply to packages or versions not explicitly listed on this webpage.

      Frequently Asked Questions

      Is the .NET App Security API free for commercial use?

      Absolutely. .NET App Security API (Role-based Access Control) is available free-of-charge. To download your copy, visit: https://www.devexpress.com/security-api-free.

      When you register for a free DevExpress product, you can use your registered product for as long as your needs dictate. Should an update be made available free-of-charge, you will be notified via email or this website. Updates that are issued free-of-charge can also be used indefinitely. Please refer to the DevExpress End User License Agreement for detailed licensing information.

      Is technical support included with the free .NET App Security API?

      No, this free .NET App Security API does not include technical support from DevExpress. Technical support is only available if you own the DevExpress Universal Subscription.

      How can I report bugs or share suggestions on .NET App Security API development?

      If you encounter a bug, please submit a bug report via our online support system: https://www.devexpress.com/ask. For suggestions to our development team, please complete our survey.

      Is the source code included in this free .NET App Security API?

      No. Component source code is not included in this offer.

      Does the use of this API in non-XAF apps require me to reference all of XAF, its UI and associated dependencies?

      No, absolutely not - you do not need to use XAF’s UI or reference XAF associated dependencies. The NuGet packages mentioned above contain non-visual cross-platform .NET Standard 2.0+ assemblies - compatible with .NET Core/.NET 5+ apps.

      How can I install all required dependencies?

      The fastest way to install all required dependencies is to use the following DevExpress NuGet packages:

      • EF Core: DevExpress.ExpressApp.EFCore and DevExpress.Persistent.BaseImpl.EFCore
      • XPO: DevExpress.ExpressApp.Security.Xpo and DevExpress.Persistent.BaseImpl.Xpo

      You can also download and run our unified installers for .NET Framework and .NET Core. The installer will copy all required assemblies to "c:\Program Files (x86)\DevExpress XX.X" and register local NuGet package sources. Note: *.BaseImpl.* assemblies are required only if you use built-in PermissionPolicyXXX classes.

      Where can I find technical information and an API reference?

      The best place to start is our Security API Technical FAQ. To learn how to use the DevExpress .NET Role-based Access Control & User Authentication API in your application, explore our GitHub examplesonline documentation, or tutorial videos (you can also search our extensive support database).

      Legacy SharePoint Integration Information Is No Longer Available on DevExpress.com

      $
      0
      0

      We deprecated our legacy SharePoint integration demos and related help documents for our v21.2 release. These resources no longer reflect our SharePoint strategy and SharePoint development best practices.

      SharePoint Support: Legacy Strategy

      The DevExpress ASP.NET Subscription introduced SharePoint support in 2008. Over the intervening years, we maintained and upgraded our controls to work with SharePoint 2013 and 2016. Regardless of SharePoint version, we offered two ways to integrate DevExpress control into a SharePoint portal.

      • You could write code and integrate any DevExpress ASP.NET Control within a SharePoint page.
      • You could use a codeless method to enhance a SharePoint portal: replace all list and memo editors with DevExpress counterparts.
      SharePoint Support: ASP.NET Web Forms Controls and Web Parts

      The second method focuses on list and memo editors for a reason. These UI elements had limited capabilities for older versions of SharePoint. Users often wanted to replace all default widgets with advanced versions. Our integrated installer allowed you to do that. You could integrate DevExpress Grid View and Html Editor into all your SharePoint Portal pages without code.

      SharePoint Support: Current Strategy

      SharePoint 2019 and SharePoint Online changed our strategy in the following ways:

      • SharePoint's integration mechanism changed. We decided that the best way to adjust is to focus on a more modern technology. You can now integrate any DevExtreme JavaScript Widget into SharePoint portal pages. We no longer support ASP.NET Web Forms Control integration.
      • We found that the functionality of standard list and memo widgets now satisfies most users. We no longer support the integration feature that replaced standard widgets with DevExpress counterparts across all pages in a SharePoint portal.
      SharePoint Support: JavaScript Widgets

      Please review the following resources for up-to-date information on our JavaScript widgets and integration strategies for SharePoint portals.

      If you have questions on this change or require further assistance, please submit a ticket via the DevExpress Support Center. We will be happy to follow-up.

      NuGet Stability and Authentication Enhancements, Portable PDB Support for Windows and Linux, .NET Core Desktop Product Installer Is Deprecated (v21.2)

      $
      0
      0

      NuGet Enhancements

      Enhanced Stability

      Unfortunately, we experienced a few temporary NuGet outages earlier this year. We apologize for any inconvenience in this regard. The good news is that we’ve rebuilt our internal nuget.devexpress.com infrastructure and load balancers from scratch, rewrote critical .NET code, improved telemetry and migrated to Amazon for storage. We believe that all underlying issues have been addressed (at least our monitoring has not detected serious issues in the last 6 months), but are now looking for your feedback.

      If you happen to encounter issues with nuget.devexpress.com, please feel free to email me personally at dennis@devexpress.com, and I will be happy to look into it for you with our web site team. 

      Authentication with Personal Access Tokens 

      We now support NuGet authentication via a token or an authorization key - especially helpful for GitHub Dependabot, GitHub Actions, Azure DevOps. If you use an authorization key, use https://nuget.devexpress.com/api as the package source. Here is an example with login and password authentication: nuget sources add -name DevExpress -source https://nuget.devexpress.com/api -username DevExpress -password {TOKEN}

      For more information, please review the following help topics: NuGet CLI | .Net CLI | Azure DevOps | NuGet Package Manager.

      Plans for NuGet Hot-Fixes

      In addition to Portable PDB, our Installation & NuGet survey in April helped us validate a few more hypotheses, among them the need for NuGet hot-fixes. While we cannot make promises today, we expect to offer NuGet hot-fixes by the end of 2021 or in early 2022.
      We intent to publish hot-fixes through nuget.devexpress.com 4-5 times per month (along with our intermediate builds via installers). This should save time and assist those awaiting hot-fixes within their CI/CD pipelines. Needless to say, it will be much faster to edit a package version (two bytes) in *.props files than to download and run our Unified Component Installer.

      Installer Enhancements

      Our Redundant .NET Core Desktop Product Installer Will Be Removed in v21.2

      As you may already know, the DevExpress Unified Component Installer with .NET Core support for WinForms and WPF (learn more) ended our need to ship a separate/standalone .NET Core Desktop Product Installer. With our v21.2 release, this standalone .NET Core Desktop Product Installer will be removed from our distribution and no longer available via the DevExpress Download Manager and Download Trial pages.

      If you need to install our products for .NET Core, please use our Unified Component Installer instead. It includes everything needed for the .NET Framework, .NET Core, ASP.NET Core and JavaScript development. Our Unified Component Installer also offers a more intuitive installation experience and improved design-time experience for .NET Core Desktop users (includes our Template Gallery, DevExpress Menu, etc).

      Portable PDB Support for Windows and Linux Debugging

      .NET Core introduced a new symbol file (PDB) format - portable PDBs. Unlike traditional PDBs (for Windows), portable PDBs can be created and read across all supported platforms. Based on user feedback in our recent survey, we have added Portable PDB Symbols to our v21.2 distribution (official release in November). 

      Improved Installer Experience for Blazor, Reporting, and .NET App Security API

      With v21.2, our Unified Component Installer will offer a few more options to help you navigate our expanding product line.

      • Reporting. As you may already know, our individual platform subscriptions (WinForms, WPF, Blazor/ASP.NET) include a license to DevExpress Reports. Our installer’s new UI better reflects this fact. As an owner of a platform subscription, you can now save a bit of hard disk space and opt to install only the products appropriate for your UI platform. You can also install trial versions of non-licensed platforms/products.
      • Office File API. Additionally, our platform subscriptions include the DevExpress Office File API (Basic Edition). The Basic Edition of our Office File API supports standard Word document processing, PDF export and printing capabilities (refer to our website for more information in this regard). Note: the Office File API (Complete Edition) includes advanced functionality such as Spreadsheet document processing, APIs for Barcode, ZIP and Digital Signature generation, and much more. If you would like to leverage these advanced features, you must purchase a license to the Office File API or our Universal Subscription. If you require assistance in this regard, please email clientservices@devexpress.com.
      • .NET App Security API. Finally, we encourage you to check out the capabilities of our .NET Role-based Access Control & User Authentication API powered by Entity Framework (EF Core) and DevExpress eXpress Persistent Objects ORM (XPO). To register your free copy, simply visit https://www.devexpress.com/security-api-free. For more information on what is included, customer tesitominals and frequently asked questions, please refer to our official announcement.

      FREE .NET MAUI Data Editors, Template Gallery and More – Early Access Preview Build Available Now (v21.2)

      $
      0
      0

      As you may already know, Microsoft recently updated its release schedule for .NET MAUI (expected Q2, 2022 – previously set for release in November 2021– learn more). Microsoft’s decision to delay .NET MAUI will not affect our release schedule – we will continue to issue updates on a monthly basis.

      This post describes features/capabilities we’ve introduced for .NET MAUI Preview 8. Before you download our Early Access Preview (EAP) build, two quick reminders:

      • Our Xamarin.Forms and .NET MAUI components are available free-of-charge. If you have yet to download your free copy, please visit https://www.devexpress.com/xamarin/ to reserve your license today.
      • If you are not familiar with Microsoft’s .NET Multi-Platform App UI (MAUI) platform or how Microsoft has positioned MAUI (the evolution of Xamarin.Forms), please review Carl Franklin’s interview with Jonathan D, a developer on Microsoft’s MAUI team and Carl’s interview with James M, a well-known Xamarin-MAUI community influencer. Both videos are available on the DevExpress YouTube Channel.

      Prerequisites: How to Test DevExpress Controls for .NET MAUI Preview 8

      If you’re ready to explore the capabilities of our .NET MAUI UI controls (Data Grid, Charts, Collection View, Data Editors, and Navigation components for mobile development), please review the following: Visual Studio 2022 and .NET MAUI Prerequisites Guide.  

      Early Access and CTP builds are provided solely for early testing purposes and are not ready for production use. This EAP may not include all MAUI features/products we expect to ship in our v21.2 release cycle. As its name implies, the EAP offers an early preview of what we expect to ship in 3-4 months.

      What's New for .NET MAUI Preview 8

      .NET MAUI Data Editors for iOS and Android

      Our .NET MAUI Data Editors Library includes the following UI controls:

      • TextEdit
      • PasswordEdit
      • MultilineEdit
      • ComboBoxEdit
      • AutoCompleteEdit
      • NumericEdit
      • DateEdit / TimeEdit
      • CheckEdit
      • SimpleButton

      Documentation


      .NET MAUI Data Grid

      Our Data Grid for .NET MAUI Preview 8 supports iOS (Android support was introduced in .NET MAUI Preview 5). It now ships with built-in data editor support and includes the following predefined column types: 

      • Text
      • Date / Time
      • Numeric (Number)
      • Boolean (Switch)
      • ComboBox
      • AutoComplete
      • Picker (List)
      • Image and Custom Column Templates (these column types were introduced in .NET MAUI Preview 5)

      .NET MAUI/Xamarin.Forms Template Gallery (Sneak Peak)

      Oh, and before I forget...we've got some good news for those considering our free .NET MAUI or Xamarin.Forms UI controls for future use. We expect to release our Template Gallery shortly. Like other DevExpress application template wizards, our .NET MAUI/Xamarin.Forms Template Gallery was designed to simplify initial app setup.

        


      We expect to ship our .NET MAUI Template Gallery within the next thirty days. Once our VSIX is published in the Visual Studio Marketplace, we'll make an official announcement on this blog. Please leave a comment below if you’d like to test this functionality prior to release. 

      Viewing all 2401 articles
      Browse latest View live