Great news for web developers: with v18.2, our Dashboards are first-class citizens of your world, taking full advantage of modules and packages and providing definitions for those of you who prefer TypeScript.

One very common request is to use DevExpress Dashboards in applications created by Angular CLI. We solved this problem by publishing an npm package. Of course you can install this package in any project, using the usual npm or yarn commands. We have run successful tests with several frameworks, including Knockout and Vue.

npm install devexpress-dashboard
... or ...
yarn add devexpress-dashboard

Using Angular

For the Angular use case, a detailed guide is available here. The main step is to create an Angular component for the dashboard, which is made easy by the new package. Here’s a partial code snippet to give you an idea:

import { Component, AfterViewInit, ElementRef } from '@angular/core';
import {
  DashboardControl,
  ResourceManager,
  DashboardPanelExtension } from 'devexpress-dashboard';

...

export class DashboardComponent implements OnInit, AfterViewInit {
  ngAfterViewInit(): void {
    ResourceManager.embedBundledResources();
    var dashboardControl = new DashboardControl(
      this.element.nativeElement.querySelector(".dashboard-container"),  {
        endpoint: "https://demos.devexpress.com/services/dashboard/api",
        workingMode: "Designer"
      });

    dashboardControl.render();
  }

  constructor(private element: ElementRef) { }
}

Note that we consider delivering a standard component in the future. However, we are looking to analyze different projects now that the modular structure is available, to make sure we supply the required set of options and support all important use cases. Please feel free to get in touch and let us know about your scenarios!

TypeScript

The new package contains all the *.d.ts files required for TypeScript, and you can benefit from code completion in your development environment as a result! Of course we fully support .NET Core, so you can even use Macs or Linux machines to create application systems for Dashboards, including frontends and backends.

Join the Webinar

Sign up for the upcoming “New in v18.2 - Dashboards, Reporting & Data Analytics” webinar where:

• you’ll see all the new features/tools/components in v18.2
• you can ask questions and interact with our devs

Click here to register now.

We Would Like To Hear From You!

We try to focus our development efforts in those areas that matter most to you, our customers. Developers have lots of choices these days, which is a good thing - but it also makes our job harder. We would appreciate it very much if you could take the time to submit your responses to the survey below, so we can do an even better job in the future.

Many business applications require users to enter and edit formatted text, commonly in HTML or Markdown format. In our v18.2 release, we provide a CTP version of our own editor solution that integrates perfectly with your DevExtreme-based application.

To create this editor widget, we took advantage of the Open Source project Quill. This solution is performant, well-tested and highly flexible, so it didn’t seem a good idea to reinvent the wheel. We extended the Quill editor with our own modules, formats, themes and other elements.

You can use the editor on all platforms supported by DevExtreme, including Angular, Vue, React, jQuery and ASP.NET MVC and ASP.NET Core.

v18.2 Feature Set

In the CTP release, we support the following features:

• HTML and Markdown as storage formats
• Text formatting
  • Bold, italic, underlined
  • Font, size, colors (HTML only)
• Block formats
  • Headers
  • Lists, ordered and unordered
  • Text alignment (HTML only)
  • Code blocks
  • Quotes
• Inserting images as links or base64 (base64 also supports drag&drop uploads!)
• Mail-merge or templating placeholders (%username% or similar, syntax can be customized)
• Copy&paste for rich content with automatic removal of unsupported formatting
• Adaptive toolbar and dialogs to work with links, images and color formats
• Custom format support

Custom Formats

You can define your own formats using a very flexible API. To give you an impression, here’s an implementation of a custom format that replaces the standard format bold.

const CustomBold = new ClassAttributor('bold', 'custom-bold', {
  scope: INLINE
});

CustomBold.add = function(node, value) {
  if (this.canAdd(node, value)) {
    node.classList.add(`${this.keyName}`);
  }
  return value;
};

editor.registerModules({ 'formats/bold': CustomBold });

The editor is restrictive in terms of the formats it allows in the edited text. This is done on purpose to promote consistency, and it means that the flexible custom format support we supply is important so you can adapt the editor to your use cases.

Future Plans

We decided to make the editor available for v18.2 as a CTP release in order to gather feedback from you that will enable us to meet your needs in the best possible way. At the same time we have several ideas that we intend to implement for v19.1 and later – no promises about the exact timeline at this point! Here’s what we have in mind:

• Table support
• User mentions using @username syntax
• A pop-up toolbar for inline formatting
• Advanced support for images and other embeddable media, resizing, drag&drop, copy&paste

There are also two main scenarios that will not be covered by this widget:

• Layout editing - this editor is designed to support textual content with a linear flow only
• Full HTML persistence support - the editor works with a subset of HTML defined by built-in and custom formats, and it drops all unknown elements

Try It Now

The public beta of our v18.2 release is available now. Please install it using the pre-release npm package:

npm install --save devextreme@18.2-unstable

Please Let Us Know What You Think

We are interested in your thoughts, even more than usual since this is a CTP release. Please feel free to comment below or to get back to us in the Support Center or on GitHub.

We welcome all comments about our plans, the current implementation or your specific use cases!

Join the Webinar

To see all our new v18.2 features demonstrated, including the HTML and Markdown Editor, please join us in our upcoming webinar New in v18.2 - JavaScript: jQuery, Angular, React, and Vue. You can ask questions during the webinar as well!

Please follow this link to sign up

To help you better manage build processes for your XAF projects and employ CI/CD tools approved within your Enterprise (such as Azure Pipelines), DevExpress Nuget now includes packages based on XAF assemblies. 

As you may already know, we opted for both large metapackages (for instance, DevExpress.ExpressApp.Core.All, DevExpress.ExpressApp.Win.All, etc.) and small individual packages for each XAF module or assembly. For more information, please refer to this knowledge base article.

For testing purposes, we've successfully configured Nuget packages in an XAF demo and built it with Azure Pipelines:

Interesting Support Center tickets

• We demonstrated how to edit multiple objects at once via a non-persistent object DetailView (S132098);
• Early v18.1.6 hot fixes and v18.2.2 (Beta) cause NullReferenceException if you open WinForms LookupEdit in a new item row (T683079);
• With v18.2, WebPropertyEditor.NullText works not only for lookup editors (T685229);
• We discussed how to preserve DetailView layouts (with DetailViewLayoutAttribute) if you use inheritance (T682243);
• We provided debugging tips to detect unexpected ListView record modifications (T679629);
• We described how to duplicate a nested ListView and display its data in a chart instead of a grid with no coding at all (T682599);
• We described how to open separate web browser tabs with another web site from a popup window (T683405);
• We updated a support article on how to troubleshoot the "Reentrancy or cross thread operation detected" error (T419520);
• We elaborated on the Web session timeout and ways to customize it (T683237);
• A short FAQ on XPO async/await method support is now available (T683644).

• Find more interesting customer questions and product enhancements for your favorite products in the DevExpress Support Center (expand the "Frameworks (XAF & XPO)" group on the right).

Your feedback counts!

Please take a moment to answer the following question – your response will help us better understand whether this solution addresses your business needs.

If you are a DevExpress WinForms user, you have very likely worked with our Data Grid before – it’s a staple of the product line. We are adding a few features in the v18.2 release, and our post in September already described Scrollbar Annotations and a few others. Now it’s time to look at the new Find Panel functionality!

Before v18.2, the Find Panel in the Data Grid only supported one behavior: it filtered grid data using the string entered by the user, and it hid all rows that didn’t match the criterion.

For v18.2, we assigned this behavior – which remains the default – the name Filter Behavior. However, using the property OptionsFind.Behavior you can now also switch to a new mode called Search. In this mode, the Data Grid highlights matching rows but leaves other data visible at the same time. This means that the search feature resembles the way searching works in a web browser, or a document based application like Word or even Visual Studio.

As you can see in the screenshot, the buttons displayed next to the search string editor are Previous and Next in this mode. Using the keyboard, Enter and F3 activate the Next button, and Ctrl-Enter, Shift-Enter and Shift-F3 go to the Previous occurrence, providing an intuitive experience for most users.

The search string editor shows the number of rows that match the criterion, and the new Scrollbar Annotations are used in this mode to show the yellow highlights in the scrollbar that are also visible in the screenshot.

If you would like this mode to be the default for all Data Grid Find Panels in your application, you can set a static property like this:

WindowsFormsSettings.FindPanelBehavior = FindPanelBehavior.Search;

Finally, please note that the new Search mode is not supported for Server Mode data sources.

Please Let Us Know What You Think!

Your feedback is always welcome! What do you think about the new Search mode? Would you like to see this mode supported in other controls, like the Tree List or the Vertical Grid? Do you think the mode should become the default in the future?

Check out these mobile and performance enhancements that we've added to the DevExpress ASP.NET Scheduler for ASP.NET WebForms and MVC.

Note: Several of the changes below talk about the Scheduler's visual elements. If you're not familiar with these elements then please take a look at this excellent image from documentation.

Mobile-Friendly View Navigator

We've improved the design of the Scheduler's View Visible Interval and View Navigator elements.

Specifically, we removed the 'Today' button and the calendar's icon from the default layout. This provides a more compact layout for smaller screen resolutions:

This updated design allows us to display more 'View Selector' buttons when in the adaptive/mobile mode. Compare it to the previous version:

The updated design is more compact and mobile-friendly. However, if you prefer the previous design, then we've implemented those options into the Scheduler.

Date Navigator Integration

One of the most important and useful design changes is the integration of 'Date Navigator' control inside the View Visible Interval element. Before, when you clicked on the View Visible Interval element, the Scheduler would show a popup calendar.

We've replaced this popup calendar with the versatile DevExpress ASP.NET Date Navigator control. With this control, you can easily see and navigate to your appointments:

New Mobile Appointment Tooltip

We're also introducing an informative new Tooltip. Now, when an end-user taps an appointment, the new tooltip will appear at the bottom:

This tooltip is especially useful on mobile devices.

Note: You can switch Tooltip modes by setting the OptionsToolTips.AppointmentToolTipMode property.

Performance Improvements

The DevExpress ASP.NET Scheduler's performance has been steadily improving in the past few releases. So, I'm happy to report that we've made some big improvements in this release as well.

Take a look at the performance improvements when compared to the previous release (x represents 'times faster'):

• Google Chrome - 1.1x to 2.6x
• Microsoft Edge - 1.25x to 2.8x

These improvements reduce the time needed to process callback requests, which improves both the time required to render ASPxScheduler on the client and the overall response time for end-user operations.

What are your thoughts on the DevExpress ASP.NET Scheduler's improvements? Drop me a line below, thanks!

We've added the powerful grouping feature to our ASP.NET WebForms and MVC CardView control.

The DevExpress ASP.NET Card View (ASPxCardView) now allows you to group cards by one or multiple columns:

We've taken some of the best grouping features from our popular ASP.NET GridView control and ported them to the CardView control:

• GroupBy dropdown
• Multiple group columns
• Expand/collapse group row
• Set group interval

What are your thoughts on the DevExpress ASP.NET CardView's new grouping improvements? Drop me a line below, thanks!

Since we announced the Gantt control back in July, we frequently received questions about its current status, whether it will be released in v18.2, and which features the CTP will include. In this blog post I will describe the upcoming features and peek into our plans for 2019.

Main Concept

As described in the announcement blog post, the Gantt control is a data-bound control that displays tasks from its ItemsSource in both a tree list and a Gantt area.

We evaluated several approaches and decided to make the Gantt control a TreeListControl descendant. This has the following advantages:

1. The Gantt control uses the existing engine of the TreeListControl to handle its data. It benefits from performance optimizations we’ve made in recent years and supports both self-referential and hierarchical sources.
2. The Gantt control supports all existing TreeListControl features, from data operations like filtering and sorting to cell editors and appearance settings.
3. Those of you who have worked with the GridControl or the TreeListControl before can configure the Gantt control using a familiar API.

Data Binding

The Gantt control displays a collection of objects assigned to its ItemsSource property. To position these objects in the Gantt area, you need to map their properties to at least two out of the three basic task settings StartDate, FinishDate, and Duration - if you don't map all three, the remaining one will be calculated automatically.

<dxgn:GanttView StartDateMapping="Start" DurationMapping="Duration" />

Other task settings – including Name, Progress, Predecessor links, Baseline dates and duration - can also be linked to your data using mappings.

The DevExpress MVVM Library now also provides the GanttTask class that you can use in your ViewModel. When the Gantt control works with the GanttTaskclass or a descendant, you don't need to specify mappings.

Column Configuration

For every mapping you specify, you can also define a column to display in the tree list area.

<dxgn:GanttColumn BindTo="StartDate" /><dxgn:GanttColumn BindTo="Duration" />

The BindTo property links a column to a specific task setting and allows the Gantt control to automatically configure column options (preferred width, cell editors, etc.)

Columns that are not linked to task settings and display custom data can be defined in the same manner as for the Data Grid or Tree List:

<dxgn:GanttColumn FieldName="Status" Width="45"/>

Task Types

The Gantt control can display three types of items: Tasks, Summary Tasks, and Milestones. The item type is determined automatically: a task with no duration is a Milestone, and a task with children is a Summary Task. Tasks and Summary Tasks can display their progress states in the Gantt area.

Predecessors

You can describe relations between tasks using separate data objects. Your data objects need to link tasks to their predecessors and can also specify a dependency type.

Predecessor links can either be defined as a separate collection (PredecessorLinksSource) or a property in a task object (PredecessorLinksPath). In both cases, mappings allow you to connect properties in your data object to link settings.

<dxgn:GanttView.PredecessorLinkMappings><dxgn:GanttPredecessorLinkMappings PredecessorTask="PredecessorId" LinkType="Type" /></dxgn:GanttView.PredecessorLinkMappings>

Just like for GanttTasks, the DevExpress MVVM Library includes the GanttPredecessorLink class that you can use in your ViewModel instead of specifying mappings.

Baseline Support

If your data objects store information about their originally planned dates and duration, you can display this information in the Gantt area.

Baseline dates and duration can be linked to task settings using mappings.

Dynamic Zoom Levels

End-users can change the zoom factor in the Gantt area. When zooming with the mouse, the Gantt control scrolls to retain focus on the mouse pointer position.

In code, the zoom level is defined by a TimeSpan value that equates to a single pixel.

Timescale

The Timescale automatically adapts to the current zoom level. You can define how many rows the Timescale displays using the TimescaleRulerCount property. By handling the RequestTimescaleRulers event, you can also specify ruler units, their formatting, and other options. For example, the code below shows the Month and Day rulers when one day takes up from 15 to 100 pixels.

private void GanttView_RequestTimescaleRulers(object sender, RequestTimescaleRulersEventArgs e) {
    if (e.Zoom < TimeSpan.FromDays(1d / 15) && e.Zoom > TimeSpan.FromDays(1d / 100))
        e.TimescaleRulers = new List<TimescaleRuler> { new TimescaleRuler(TimescaleUnit.Month), new TimescaleRuler(TimescaleUnit.Day) };
}

Working Time and Holidays

The Gantt control provides a flexible set of rules that allow you to specify non-working days and define working time for each day. These rules describe to which days a custom schedule should apply and resemble the Recurrence Rule in the iCalendar format.

For example, this rule configures the workday to end one hour earlier every Friday:

<dxgn:GanttView.WorkingTimeRules><dxgn:WorkingTimeRule WorkingTime="8:00-12:00,13:00-16:00" Recurrence="{dxgn:Weekly DayOfWeek=Friday}" /></dxgn:GanttView.WorkingTimeRules>

And this rule specifies that Thanksgiving (the fourth Thursday in November) is a holiday:

<dxgn:GanttView.WorkdayRules><dxgn:WorkdayRule IsWorkday="False" Recurrence="{dxgn:YearlyByDayOfWeek Month=11, DayOfWeek=Thursday, Week=4}" /></dxgn:GanttView.WorkdayRules>

Of course you can also pass a list of holidays from your ViewModel to the Gantt control:

<dxgn:GanttView.WorkdayRules><dxgn:WorkdayRule IsWorkday="False"><dxgn:SpecificDays Days="{Binding Holidays}" /></dxgn:WorkdayRule></dxgn:GanttView.WorkdayRules>

By default, the Gantt control highlights all non-working days and non-working time in the Gantt area. There is an option to turn this highlighting off or remove non-working days and time from the Gantt surface.

Appearance Customization

We know how important it is to customize the appearance of tasks in the Gantt control. Colors and additional elements can help your users visually group similar activities, recognize different resources, and understand task states.

You can use styles to customize task appearance in the Gantt control. Styles support a wide range of customization scenarios from simple background customization to your own task template. Here are a few examples.

This style colors all unfinished tasks that are behind schedule:

<dxgn:GanttView.TaskStyle><Style TargetType="dxgn:GanttTaskControl"><Style.Triggers><DataTrigger Binding="{DXBinding 'Row.Finish lt $sys:DateTime.Now and Row.Progress lt 100'}" Value="True"><Setter Property="Background" Value="LightCoral" /><Setter Property="ProgressBackground" Value="DarkRed" /></DataTrigger></Style.Triggers></Style></dxgn:GanttView.TaskStyle>

And this style changes the appearance of all tasks:

<dxgn:GanttView.TaskStyle><Style TargetType="dxgn:GanttTaskControl"><Setter Property="BorderThickness" Value="1" /><Setter Property="BorderBrush" Value="Black" /><Setter Property="CornerRadius" Value="3" /></Style></dxgn:GanttView.TaskStyle>

Apart from customizing styles, you can also define what is displayed in a task’s content area:

<dxgn:GanttView.TaskContentTemplate><DataTemplate><TextBlock Text="{Binding Row.Progress, StringFormat=#0\\%}" /></DataTemplate></dxgn:GanttView.TaskContentTemplate>

What's Next?

With the presentation part complete, we want to focus on editing in the next release cycle. Currently you can edit tasks in the Tree List area, and your changes are reflected in the Gantt area. However, we want to introduce automatic calculations within the same task (e.g., recalculating Duration when the FinishDate property is modified) and other dependent tasks (e.g., shifting a task when its preceding task is delayed). We also want to implement editing directly in the Gantt area (dragging tasks, changing their progress, making connections).

Please Tell Us Your Thoughts

As always, your feedback is vital. We are looking forward to hearing your thoughts on the new Gantt control and we will adjust and refine our plans depending on what we hear from you. Did you find the features you were looking for in this blog post? Is there anything else that you would like to see implemented? Let us know in the comments below or contact us at wpfteam@devexpress.com.

A final note: In comments on our previous blog post, many of you were asking about a Gantt control for WinForms. The WinForms team is currently discussing its plans, and the Gantt control has not yet been confirmed. Feel free to drop them an email at winformsteam@devexpress.com to share your opinion.  

Reports are almost always bound to data – the more flexible our Reporting solution is when it comes to supported data sources, the more use cases we can cover. For v18.2 we added two new data source types that you can choose in the Data Source Wizard of the Report Designer.

The JSON Data Source and the XPO Data Source are new in this release. Like other data source types, they are handled directly by the Reporting system. The Wizard creates components to represent the data sources and accommodate some settings, and these components are persisted and restored together with the layout and design information of a report. The names of the new components are JsonDataSource and XPObjectSource.

JSON Data in Reports

JSON is a simple text-based format that is directly compatible with JavaScript (hence the name JavaScript Object Notation - JSON), but in other languages you need to deserialize objects from JSON format to native types. The JsonDataSource does this job for you, but of course it needs to know where the data comes from. The first page of the Wizard allows you to specify a Web Service Endpoint URI, a filename or even a string with JSON content:

For the next step, the Wizard analyzes the JSON data and shows the structure in a hierarchy. You can choose all nodes or a subset of them to define which parts of the JSON will be used as data for the report.

It is possible to change the type of the JsonDataSource as well as the schema. Once the component comes up in the Field List tool window, right-click it and choose the items Edit… and Edit Schema… from the context menu to make changes.

Note that we use the Open Source library Newtonsoft.Json for our implementation. This library is the de-facto standard for JSON in .NET. The wizard detects whether your project already references it and suggests to install the required NuGet package if necessary.

JSON Data Access from Code

If you would like to set up access to JSON data from code, use the specific types depending on the source of your data. For instance, to access data from a web service:

using DevExpress.DataAccess.Json;

...

var dataSource = new JsonDataSource();
ds.JsonSource = new UriJsonSource(new Uri("https://..."));

XtraReport report = ...;
report.DataSource = dataSource;

As a side note, the JsonDataSource is not limited to Reporting. Continuing from the sample code above, you can also use it for a Data Grid, for instance:

...
dataSource.Fill();
myDataGrid.DataSource = dataSource;

A Limitation

In this initial implementation of the JsonDataSource, we do not support token-based authentication. We are interested in your feedback – do you require this authentication support?

Access to XPO Data

eXpress Persistent Objects (XPO) is our own ORM product. You can find more information about it here if you’re curious. To work with XPO data in your own project you need to add persistent types, for instance using the XPO Data Model Wizard or a project item template.

If you select the XPO Data Source type in the Report Data Source Wizard, the next page will show the XPO persistent types that have been found in your project. (Note that you may need to build your solution in case the list doesn’t show all the types you expected!)

Once you have selected the XPO persistent type for your report, the further process is similar to the one described in our tutorial Bind a Report to a Database. You need to specify connection settings and then start to design your report.

The XPObjectSource component created by the Data Source Wizard is a standard XPO binding component. It has several properties you may want to configure, for example for server-side filtering of the queried data.

A cool XPO feature is the support for server-side calculated properties. You can add new properties in the editor for the Properties collection on the XPObjectSource and define PropertyExpressions for them.

Your Feedback is Valuable!

We would like to hear what you think about these new features. Of course you can leave comments below or get back to us in the Support Center, but we would very much appreciate your responses to this quick survey:

We've added the highly-requested Masked Input feature to the DevExtreme DateBox. While the DevExtreme TextBox does provide several masking options, it was inconvenient when you needed to work with date/time fields.

The new Masked input feature for the DevExtreme DateBox will improve the user experience of your apps and save you time. We've built several powerful options into the component too:

• LDML pattern support
• Built-in localization patterns
• Arrows keys and mouse support

Check out this short animation that shows the enhanced masking features of the DevExtreme DateBox:

Let’s take a deeper look at each of these features.

Note: This feature is available in DevExtreme for Angular, Vue, React, jQuery, and ASP.NET MVC and ASP.NET Core.

Setting

To enable the new feature, set the useMaskBehavior property to true.

LDML pattern support

You can now use LDML patterns with the DevExtreme DateBox Masked Input feature. What is LDML?

"The Unicode Locale Data Markup Language (LDML) ... provides a common format for systems to interchange locale data so that they can get the same results in the services provided by internationalization libraries." -Unicode.org

Several LDML patterns are now available with the DevExtreme DateBox. We've also added these enhancements:

• Escape Character support - We're introducing support for the escape character as the part of the LDML-based format. This feature allows the customer to use non-editable characters before, after, and in the middle of the date. For example, you can use the format: dd 'of' MMMM and display "15 of September". Then you can navigate between the "15" and "September" and skip the "of" portion.

• Year Autocomplete - The DateBox can autocomplete the year portion for you automatically when you type a two-digit year in the four-digit format. For example, if you use the yyyy mask, and start typing "20" then you will get "2020". If you continue typing and enter two more digits, say "15", then you will get "2015" as the year value.

• Detect month by number - When you have a month in text format, for example, "MMM" (September), you can press a digit "4" and change it to "April".

• Detect month by symbol - You can type the first few characters of the month name to select the month. For example, "A" selects "April", "J" selects "January" but "Jul" selects "July".

Note: Not all LDML patterns are supported, please see our documentation for more info.

Built-in localization patterns

The LDML pattern is great for complex formats, however, it's cumbersome for simpler formats.

Therefore, we've developed a set of the most used/common date formats. And you can refer to them using human-readable constants!

For example, you can use shortdate instead of MM/dd/yyyy or shortdateshorttime instead of MM/dd/yyyy HH:mm a. Take a look at the full list of formats in our documentation.

Arrows Keys and Mouse support

The DateBox also supports editing date parts using arrows keys or the mouse wheel:

• Increase or decrease the date parts using the mouse wheel or the up/down arrows keys. Plus, if the date is invalid, then the date will be automatically corrected. For example, when the date is "31 of March" and the user decreases the month to February, then the date will be corrected to "28 of February".

• The input caret will be automatically moved to the next date part date when the previous one has been entered completely.

Test It Now (and provide feedback)

Test-drive the public beta now. Use the npm pre-release package:

npm install --save devextreme@18.2-unstable

Then let us know your experience with the DevExtreme DateBox.

Note: After the final v18.2 release, please remove the -unstable suffix

Join the Webinar

Sign up for the upcoming "New in v18.2 - DevExtreme HTML / JS Controls" webinar where:

• you'll see all the new features/tools/components in v18.2 and
• you can ask questions and interact with our devs

Register today: https://attendee.gotowebinar.com/register/1534319392881688322

Your Feedback Counts

We’d like to hear from you about your development plans and needs. Feel free to leave comments below, open Support Center tickets for detailed discussions or take part in conversations in our GitHub repository.

The venerable DevExpress ASP.NET GridView control provides several great adaptive and responsive features. With this release, we've extended the layout customization capabilities of the DevExpress ASP.NET GridView in Fixed Table Layout mode. This brings you the following benefits:

• Improved adaptivity in Fixed Table Mode
• Better use of a column's free space
• New column width settings

Take a look at this animation to see the difference from the previous release:

Min/Max Column Width

Typically, the GridView's responsive logic will hide columns that cannot fit on the screen. However, in the GIF above, we can see several enhancements:

• the command and data columns are displayed even when the GridView's width is reduced and
• when the width is enlarged, the GridView does not increase the numerical columns either

These layout customization adjustments are possible because we've added new column settings:

• MaxWidth - The maximum width setting can be used to set up a column layout for large screen sizes like desktop web browsers. When the GridView is wide, you can limit the maximum width of certain columns

• MinWidth - The minimum width setting is useful for responsive design. As mentioned above, the GridView's responsive logic may hide columns during resizing. To help prevent column hiding during this process then please use the MinWidth property to set custom "minimum" widths. Use the AllowHideDataCellsByColumnMinWidth property to specify whether the grid should hide a column if its width is less than the MinWidth value.

What are your thoughts on the DevExpress ASP.NET GridView's improvements? Drop me a line below, thanks!

In v18.2, we've extended our spreadsheet control with pivot table support and a couple of other useful capabilities. Let's take a look.

Pivot Tables

The DevExpress ASP.NET spreadsheet control can now embed pivot tables within worksheets. As you would expect, numerous layout customization options give you total control over its user experience.

New Ribbon Command

There is a new Insert PivotTable ribbon command on the Insert tab that allows an end-user to quickly create a pivot table:

New Tabs

The built-in ribbon now has two additional context tabs – 'Analyze' and 'Design' for manipulating the pivot tables. The tabs are available when a PivotTable is selected:

New Dialog

A new Field List dialog allows an end-user to modify the PivotTable structure: choose rows, columns, filters and values from the list of available source table fields:

When the layout of the PivotTable is changed using the Field List dialog, the modifications are immediately applied to the document. This is fine in most cases, however, if the PivotTable has a lot of fields then it's better to delay the updates until the end-user has finished making their changes. Use the 'Defer Layout Update' check box on the dialog when you have many fields.

Formula Editing UI Enhancements

We've improved formula editing with this release. Previously, if an end-user wanted to insert a formula that references cells on another sheet, then they could only do so by typing their text into the cell or formula bar.

Now, we've extended the graphical interface for formula editing so the end-user can select and edit the formula cell ranges located on different sheets:

New Behavior Settings

In the last release, we introduced Behavior Settings that restrict some end-user operations: opening/saving documents, copy/paste functionality, etc.

With this release, we're extending these settings and have added several options for restricting the document's rows/columns/worksheets. Check out the full list of settings in the spreadsheet's online documentation.

What are your thoughts on the DevExpress ASP.NET Spreadsheet's improvements? Drop me a line below, thanks!

A new DevExtreme component has been added to the latest release: ButtonGroup. It consists of a set of toggle buttons and has both single and multi-select modes. Let's take a look.

Note: This feature is available in DevExtreme for Angular, Vue, React, jQuery, and ASP.NET MVC and ASP.NET Core.

ButtonGroup

The new ButtonGroup is a simple but useful component which displays a set of buttons that allows an end-user to select one or several of them.

Easy customization

Configuration is easy and powerful:

$("#button-group").dxButtonGroup({
   items: [{
      icon: "alignleft",
      alignment: "left"
   }, {
      icon: "alignright",
      alignment: "right"
   }], 
   keyExpr: "alignment"
});

Selection Modes

ButtonGroup supports two selection modes – single and multiple. Set the selectionMode property to one of these options:

$("#button-group").dxButtonGroup({
   // …
   selectionMode: "single" | "multiple"
});

Appearance

ButtonGroup supports three new button styling modes:

Use the stylingMode property to select one of these:

$("#button-group").dxButtonGroup({
   // …
   stylingMode: 'text' | 'outlined' | 'contained'
});

Documentation

Take a look at the DevExtreme ButtonGroup documentation to learn more.

Test It Now (and provide feedback)

Test-drive the public beta now. Use the npm pre-release package:

npm install --save devextreme@18.2-unstable

Then let us know your experience with the DevExtreme ButtonGroup.

Note: After the final v18.2 release, please remove the -unstable suffix

Join the Webinar

Sign up for the upcoming "New in v18.2 - DevExtreme HTML / JS Controls" webinar where:

• you'll see all the new features/tools/components in v18.2 and
• you can ask questions and interact with our devs

Register today: https://attendee.gotowebinar.com/register/1534319392881688322

Your Feedback Counts

We’d like to hear from you about your development plans and needs. Feel free to leave comments below, open Support Center tickets for detailed discussions or take part in conversations in our GitHub repository.

A lot of Angular developers are already familiar with the Angular CLI (Command Line Interface). Besides creating, running and testing an Angular project, it also enables you to generate different parts of your application including scaffolding .

This all works very nice and efficient if you know all the command-line options to accomplish certain tasks.

Since DevExpress loves Visual Studio, in our v18.2 release we have included a really cool Scaffolding tool for Angular projects which are developed in Visual Studio.  The scaffolding tool is able to generate an Angular component which includes a DevExtreme widget. The cool thing here is that it is also configured to use the selected action methods on an ASP.NET WebAPI Controller.

Requirements

First make sure you have the following installed:

ASP.NET Core MVC:

• Visual Studio 2017 and later
• .NET Core SDK 2.1
• ASP.NET Core application with Angular
• Entity Framework Core Data Model

The DevExtreme Scaffolder is automatically installed for all compatible Visual Studio versions by the DevExtreme installer.

How does it work?

Once all prerequisites are installed, create a new project by going to File / New project to create a new ASP.NET Core Web Application with the standard Angular Project template.

Don’t forget to add the Entity Framework Core Data Model to the project!

Once the project wizard has completed its work, you can can start using the scaffolding wizard by right-clicking any folder in the Solution Explorer and select Add / New Scaffolded item.. in the context menu.

In the Add Scaffold dialog, select Angular Component with a DevExtreme UI Widget and click Add.

The DevExtreme Wizard popups up which allows you to enter an Angular component name.

On the second tab you can select the DevExtreme Widget you want to use:

The real fun begins on the Data Binding tab:

Here you can directly specify the Entity Framework Data Context class together with the Model and the Controller (server-side). For all of you interested in the scaffolding process, you can read more about it here.

Once you’ve also configured the specific properties and other configuration options on the Settings tab, you can click the Add button which initiates the magic.

The component will be created in the ~/ClientApp/src/app/[ComponentName] folder and the component will be registered in the app.module.ts file as well. If there are any required NPM packages needed, they will also be automatically installed into the project.

The last thing that happens is the creation or modification of the ASP.NET Core controller with the appropriate action method(s) to provide the desired CRUD operations.

Try it?

Our v18.2 public beta is already available for our customers so login at our web-site and head to the My Downloads section from where you can download and install DevExtreme v18.2.

What do you think?

I invite all of you to test this new time-saving Scaffolding Wizard and let me know what you think of it. Also questions and suggestions are more than welcome by replying to this post.

Join the Webinar

Sign up for the upcoming "New in v18.2 - DevExtreme HTML / JS Controls" webinar where:

• you'll see all the new features/tools/components in v18.2 and
• you can ask questions and interact with our devs

Register today: https://attendee.gotowebinar.com/register/1534319392881688322

Our development team spent the last six months stabilizing our ASP.NET Core Reporting tools, and with our v18.2 release this product is no longer in CTP state. I’ll highlight some of the key features included in this release.

Embedded Visual Studio Report Designer

In our previous (CTP) release of ASP.NET Core Reporting, the designer for report definition files (*.repx) could be brought up from Visual Studio, but it was implemented separately, as a modal window. This was slightly inconvenient compared to the designer for the full .NET Framework, because users were unable to switch quickly between report design and other editor windows, and there were technical issues with report control event handling.

Starting with v18.2, the designer for ASP.NET Core Reporting is embedded in Visual Studio just like you’re used to if you have used our Reporting tools before. We have finished our integration work, so you will see very few differences! You open the designer with a double-click on a report project item and all the designer panels come up as usual.

Event Handling

If you look closely, you can see the event icon in the Properties panel shown in the screenshot above. In Solution Explorer you might notice that the ASP.NET Core Report Designer shows a .repx report definition file as the top-level item, which now has two child items underneath:

The two sub-items are created once the .repx is opened in the designer within an ASP.NET Core project. The .Designer.cs file contains code generated automatically by the visual designer. When you add your own code to the .cs file you have full access to report controls and structural elements, with support for Intellisense. Event handler code is added in this file, whether you hook up a handler from code or create one by double-clicking an event in the Properties window.

Some care is required for those use cases where report definitions (*.repx) are stored externally, perhaps in databases. When such .repx files are loaded, internal mechanisms try to find the associated types in your application, i.e. those declared in the .cs and .Designer.cs files. You need to make sure that these are built into your application assembly – as long as they can be found correctly, event handlers provided in code will be connected to the report design loaded from an external .repx.

Please note that external scripting remains unsupported by ASP.NET Core Reporting, mainly due to technical deficiencies of the platform.

One Item Template for all .NET Flavors

Based on feedback we received from you, we now have just one Report item template in Visual Studio. This template automatically adds either the .NET Core file combination of .repx parent element with .cs and .Designer.cs sub-items, or the “full .NET” combo of .cs parent with a .Designer.cs sub-item – depending on your project type.

Updated Demo Center

The Reporting tools demo center now includes an ASP.NET Core Reporting item, so you can see how our demo reports work on the .NET Core platform:

We plan to publish these demos online in a little while, for the final v18.2 release.

Angular-specific Document Viewer and Report Designer components

This piece of news is only partially related to ASP.NET Core Reporting, but still very exciting! Many of you use Angular-based front-ends for your ASP.NET Core apps. With our v18.2 release, new Angular-based Report Designer and Document Viewer components are available. An npm package has been published, so it’s easier than ever to integrate our Reporting tools in your web app. We will publish a separate blog post about this soon!

A Word About Limitations

We have found a solution to one limitation of the CTP release. As a result, these issues with our ObjectDataSource component have been fixed:

• Schema is retained correctly when a report designer is re-opened
• Data source schema can be obtained from assemblies built against .NET Core
• Reports bound to this data source type can be previewed in Visual Studio

The following limitations are in place for our v18.2 release of ASP.NET Core Reporting:

• The Entity Framework data source is hidden from the Data Source Wizard for .NET Core projects because it is unable to discover DbContext class descendants in this case. (It is available for projects that target .NET Standard.)
• We don’t supply a report control capable of rendering RTF/HTML/DOC/DOCX content
• Linux-based environments can’t generate 3D Charts which rely on OpenGL functionality
• Mac-based environments don’t recalculate font heights correctly while zooming in and out of a report shown in the HTML5 Document Viewer. This is an issue of the libgdiplus library.
• The Web Report Designer and HTML5 Document Viewer components don’t support localization via Satellite Resources Assemblies due to an issue in the .NET Core runtime environment: ResourceManager doesn’t take the SatelliteContractVersion attribute into account

Join Our Webinar

To see all our v18.2 features live, including ASP.NET Core Reporting, please join our upcoming webinar New in v18.2 - Dashboards, Reporting & Data Analytics. Questions are welcome during the webinar!

Please follow this link to sign up

Please Let Us Know Your Thoughts

We are looking for your feedback to determine our priorities and allocate resources for the next release cycle. Please feel free to leave comments below or get in touch via the Support Center. It would be great if you could also submit your responses to this short survey:

Good news, your requests for .NET Core support from our office controls have been addressed with the latest release. You can now use the powerful DevExpress ASP.NET Spreadsheet and Rich Text Editor controls with the ASP.NET Core framework v2.1 (or above).

That's right, you can now run DevExpress Office Controls within both Windows, MacOS, and Linux based environments. In this post, I'll dive into the features, limitations, future plans, and how you can start using DevExpress Office controls in your .NET Core applications.

CTP

This functionality is available as a CTP (community technology preview) in the v18.2 release. We've not finished porting all of the major features of these controls to .NET Core but, rest assured, we're working hard on it.

ASP.NET Core Rich Text Editor

Our new Rich Text Editor control is a client-side control wrapped for the ASP.NET Core framework. Therefore, all document operations (including importing and exporting the document's model to file) are performed on the client.

The control doesn't maintain the document's state on the server either. This means that the control does not need to synchronize with the server when the document is opened.

Main Features

This version might be a CTP but it's packed full of features including:

• Content Formatting Features: Character Formatting, Paragraph Formatting, Lists, Tables, Images, Floating Objects
• Content Layout Customization: Document Sections, Multi-column Layouts, Section Breaks, Headers and Footers
• Supported Formats: DOCX, TXT
• Automation Features: Fields Support
• Autocorrect
• Simple View (Web Layout)

Limitations

Since this is a CTP we still have a few features to work on before the final release. Therefore, this version does not support:

• Mail Merge
• SpellChecker
• Document protection
• RTF support
• Printing
• Export to PDF

ASP.NET Core Spreadsheet

While the new Spreadsheet control is a client-side control, it also has a server portion. The client-side UI remains light and fast because the server portion helps with heavy tasks. For example, if you have a large excel file then you don't want to process that on the client-side and ruin your end-users' experience.

The client-side UI is developed with our excellent DevExtreme library (same as the Rich Text Editor).

Features

We've included the following features in this release:

• XLSX, XLSM, XLS, CSV, TXT document formats are supported
• Formulas
• Charts
• Images
• Freeze Panes
• Comments
• Sorting
• Mail Merge
• Document Generation

Limitations

This v18.2 CTP version of the Spreadsheet for ASP.NET Core does not support:

• Dialog UI (no dialogs are currently supported)
• Formula Bar UI
• Context Menu UI
• Formula Autocompleting UI
• Reading/View modes
• Worksheet protection API
• Printing
• Export to PDF
• Global Custom Functions
• Custom In-place Editor API

Future Plans

These controls are in CTP though we'll be working hard to bring you the final release versions in 2019.

Our long-term vision is to provide a completely consistent set of features regardless of the platform (ASP.NET or ASP.NET Core), so we'd love to hear your feedback about the .NET Core Rich Text Editor and Spreadsheet support.

Please leave a comment below, thanks.

Work on our desktop End User Report Designer components has been an ongoing task in 2018. In v18.2, we introduce a new Properties panel for the WinForms platform. This fits in very well with our previous appearance updates!

Microsoft Office Inspiration

A little while ago, our WinForms product team released the new Office View for the PropertyGrid control. We based our work on this new view and we decided to go with four tabs to categorize our properties:

1. Appearance – What report controls look like
2. Behavior – How controls behave during report generation
3. Data – Everything about data binding and format strings
4. Miscellaneous – All other properties.

In addition, there is a Favorites tab.

We applied lots of customizations to the standard editors. For instance, our numeric editor uses two editing styles at once: spin edit and trackbar. We implemented specific property editors for almost all properties on the Appearance tab to make them as user-friendly as possible.

Here’s what the Properties panel looks like when an XRLabel is selected:

We modified the way the search functionality in the Properties panel works. The search editor is visible to to the right of the property tabs at all times, and searching works across all tabs at once.

Blend Inspiration

After we first implemented our Expression Bindings, we found that the approach we used to integrate them in the old-style Properties panel was not as intuitive as we’d hoped.

For our new panel, we decided to follow Microsoft Blend and Visual Studio: a small square symbol is shown next to each property editor. By clicking on the square, you can define bindings and reset property values. The square is colored when a non-default value has been set, and for Expression Bindings we show a special icon (the f stands for formula) and change the frame color of the editor. Here’s an image to illustrate all this:

When you click the square (or the formula icon when an expression is already defined), the Expression Editor comes up:

In Case of Trouble…

We took care to leave the old Properties panel implementation intact, in case you should need it for some unforeseen technical reason, or because you don’t like what we did with the new panel. In case you find yourself reverting to the old-style panel, please create a Support Center ticket and tell us about your reasons so we can fix the problem!

If you added a Report Designer component to your form, you can select the PropertyGridDockPanel (it has the name propertyGridDockPanel1 by default) and set the property UseOfficeInspiredView to false.

If you invoke the Report Designer from code, you can use a snippet like this to deactivate the new-style Properties panel:

// You probably have code like this:
var designTool = new ReportDesignTool(new XtraReport());
var propertyGrid = (PropertyGridDockPanel)
  designtool.DesignRibbonForm.DesignDockManager[DesignDockPanelType.PropertyGrid];

// This is the important bit to deactivate the new-style panel
propertyGrid.UseOfficeInspiredView = false;

designTool.ShowRibbonDesigner();

What About the Visual Studio Properties Panel?

At this time, the new-style panel is only available in the End User Report Designer. Within Visual Studio, the Binding Expressions tab integrates in the same way it previously did in the End User Designer, using an extra button:

We have had numerous support questions about this old-style integration, so it appears the button is not as obvious as we’d hoped. Do you have thoughts on this? Should we consider making the new-style panel available in the Visual Studio-embedded designer?

We Would Like to Hear From You

What do you think about the new Properties panel? We would love to hear any thoughts or ideas you have!

We've extended the DevExtreme DataGrid's API so you can control the appearance of exported data more effectively.

A new export.customizeExcelCell configuration option allows you to modify the formatting of Excel cells: background color, fill pattern, font, value, number format, and alignment:

So, if at runtime you've customized the cells in the DataGrid as shown:

Then, when you export that grid to Excel, you can maintain the same appearance:

Note: This feature is available in DevExtreme for Angular, Vue, React, jQuery, and ASP.NET MVC and ASP.NET Core.

Customize Excel Cell

Here are some examples of what you can now do with the customization of exported cells:

Alignment and Word wrap

Adjust the cell alignment with options like right, bottom, etc. You can also set the wrapTextEnabled option for word wrap:

$("#dataGrid").dxDataGrid({
    // …
    export: {
        enabled: true,
        customizeExcelCell: e => {
            if(e.gridCell.rowType === "data") {
                e.horizontalAlignment = "right";
                e.verticalAlignment = "bottom";
                e.wrapTextEnabled = true;
            }
        }
    }
});

Background

Adjust the background, for example, the #FFBB00 background color value will make cell’s background yellow:

$("#dataGrid").dxDataGrid({
    // …
    export: {
        enabled: true,
        customizeExcelCell: e => {
            e.backgroundColor = "#FFBB00";
        }
    }
})

Font

Adjust the font, for example, setting the font colot to #AAAAAA will make the text gray:

$("#dataGrid").dxDataGrid({
    // …
    export: {
        enabled: true,
        customizeExcelCell: e => {
            e.font.color = "#AAAAAA";
        }
    }
})

Number Format

Adjust the number format. By setting the format to "$#,##0.00", the value 4321 will be displayed as $4,321.00:

$("#dataGrid").dxDataGrid({
    // …
    export: {
        enabled: true,
        customizeExcelCell: e => {
            e.numberFormat = "$#,##0.00";
        }
    }
})

Value

Directly set the value:

$("#dataGrid").dxDataGrid({
    // …
    export: {
        enabled: true,
        customizeExcelCell: e => {
            if(e.gridCell.column.dataField === "count") {
                e.value = 42;
            }
        }
    }
})

Conditional Behavior

You can also add conditional behavior depending on the DataGrid cell's context. For example, in the code below, we'll change font to bold for the 'Employee' cell if the 'SaleAmount' is greater than 15000:

$("#dataGrid").dxDataGrid({
    // …
    export: {
        enabled: true,
        customizeExcelCell: e => {
            if(e.gridCell.rowType === "data" &&
                e.gridCell.data.SaleAmount > 15000 &&
                e.gridCell.column.dataField === "Employee") {
                    e.font.bold = true;
            }
        }
    }
}

Limitations

There are a few limitations with this new cell customization feature. These include:

• The DevExtreme DataGrid's export.customizeExcelCell does not provide as many options as the XLSX format or Microsoft Excel’s own Format Cells dialog box. Please take a look at the documentation for a list of currently supported options. If you are interested in additional options then please let us know.
• The PivotGrid doesn’t support the export.customizeExcelCell option yet. However, we plan to add it in a future release.
• The TreeList control does not support the ‘Export to Excel’ feature yet.
• The 'custom header/footer' functionality is not included yet but we're working on bringing it to you in a future release.

Help drive the priority of the above features by answering the one question survey below please.

Test It Now (and provide feedback)

Test-drive the public beta now. Use the npm pre-release package:

npm install --save devextreme@18.2-unstable

Then let us know your experience with the DataGrid's Excel export feature.

Note: After the final v18.2 release, please remove the -unstable suffix

Join the Webinar

Sign up for the upcoming "New in v18.2 - DevExtreme HTML / JS Controls" webinar where:

• you'll see all the new features/tools/components in v18.2 and
• you can ask questions and interact with our devs

Register today: https://attendee.gotowebinar.com/register/1534319392881688322

Your Feedback Counts

We’d like to hear from you about your development plans and needs. Feel free to leave comments below, open Support Center tickets for detailed discussions or take part in conversations in our GitHub repository.

For some quick feedback, please submit your responses to this short survey:

For our v18.2 release we have implemented several customer suggestions for our WinForms and WPF Diagram Control. One focus was to improve our support for presentation scenarios. Here are some of the most exciting news:

Diagram Viewer

Many of you want to use the Diagram Control for presentation purposes only, and to prevent end-users from making unwanted changes. Before v18.2 this could only be achieved using events and item properties, which was a time-consuming process.

In v18.2, turning the Diagram Designer into a Diagram Viewer is as easy as flipping a switch. We have added a set of properties that allow you to disable modification operations for the user selectively, and by setting IsReadOnly (that’s DiagramControl.IsReadOnly in WPF and DiagramControl.OptionsProtection.IsReadOnly in WinForms) you disable all such operations at once. Ribbon and context menu elements associated with the restricted user actions are automatically hidden.

Here are the details about the new properties for WinForms, and here is the equivalent documentation for WPF.

Pan and Zoom Panel

The Pan and Zoom panel works as a minimap that helps users navigate large and complex diagrams. The panel can be resized and placed anywhere on screen. It is interactive so users can drag or resize the box that indicates the visible region of the diagram to fine-tune it, or draw a rectangle for the region they want to zoom into.

End-users can invoke the panel from the Ribbon. If you don’t want to add a Ribbon to your Diagram, you can integrate your own Pan and Zoom panel using the standalone PanAndZoomControl.

WinForms documentation for the Pan and Zoom Panel is here, and this is the WPF equivalent.

Splitting the RightAngle Connector

The most popular request we received from you was a seemingly small item that turned out to have a big effect. Multiple right-angle connectors that originate from the same point were overlapping so it was occasionally not obvious which shapes were connected. This issue fit in with our “presentation” focus since it influences how easily diagrams can be understood.

To resolve the problem, we added options that allow you to split connectors and specify the minimum distance between them to avoid overlapping lines.

Please Let Us Know Your Thoughts

All the features described in this post go back to your feedback! We are always interested to hear more – what do you think about the changes we made? Do you have additional scenarios in mind where we need to improve our Diagram Control?

It's not every day that I'm impressed by a button control but the new DevExpress ASP.NET Floating Action Button has me intrigued.

The new button control hovers over another control to provide a quick way to access common actions. It can be used to replace context menus, toolbars, etc. This is especially helpful for mobile/touch devices.

It was inspired by Material Design that is used in popular apps like Google Calendar.

GridView

Take a look at how the Floating Action Button can be used in the Grid View control:

Setup

Add the Floating Action Button to any page of your ASP.NET application and assign it to a container. Below, we set the button's ContainerElementID to the DIV element that contains the ASPxGridView:

<div id="someContainer"><dx:ASPxGridView ID="GridView" runat="server"><%--......................--%></dx:ASPxGridView></div><dx:ASPxFloatingActionButton ID="FloatingActionButton" runat="server" ContainerElementID="someContainer"><%--......................--%><Items><dx:FABAction ActionName="NewRow" /><%--......................--%></Items></dx:ASPxFloatingActionButton>

Context Specific

You can define the context of which actions are displayed when the button is clicked.

So, after declaring the control, be sure to set the custom actions for when an end-user clicks the Floating Action Button.

Scheduler

While it's available as a stand-alone control, we decided that this functionality was especially useful for the Scheduler control. Therefore, we integrated the new Floating Action Button into the Scheduler control directly.

You can create, edit, and delete appointments using predefined actions. You can also assign any custom context and specify any custom actions too.

What are your thoughts on the new DevExpress ASP.NET Floating Action Button? Drop me a line below, thanks!

Two very useful new File Uploader features are coming your way in v18.2: Chunk Uploading and Client-Side Validation.

As usual, these features are available to you on all platforms supported by DevExtreme, including Angular, Vue, React, jQuery and ASP.NET MVC and ASP.NET Core.

Chunk Uploading

When users upload large files, it is not safe to do so in a single request. For instance,the server might go down during the process and lose data kept in memory. Of course large files uploaded in single requests can also cause resource issues on a server.

In v18.2 we implemented support for chunk uploading. You activate it by setting the chunkSize option like this:

$('#file-uploader').dxFileUploader({
  chunkSize: 200000,
  uploadUrl: '...'
});

As a result, your server will receive multiple requests to the uploadUrl, including details about the file and the chunk index (see the chunkSize documentation). The format is multipart/form-data, with the new chunk-specific information passed as an extra part in JSON format.

Client-Side Validation

You can now configure the File Uploader with a maximum file size and a set of allowed file extensions:

$('#file-uploader-images').dxFileUploader({
  maxFileSize: 4000000,
  allowedFileExtensions: ['.jpg', '.jpeg', '.gif', '.png']
});

These validations are executed on the client, which means that the user receives instant feedback and unnecessary traffic to the server may be prevented. Note that this is not a mechanism to prevent abuse – you still need to perform server-side validation of uploaded data!

Your Thoughts Count

If you have any thoughts or concerns about the new features, please get back to us by leaving a comment below or by opening a Support Center ticket or a GitHub issue. We appreciate your feedback!