This week, DevExpress is sponsoring the DWX DeveloperWeek Nuremberg, Germany. John and I will be there with our cool “I’d rather be coding” T-Shirts and other giveaways.
I will do a session as well on Generics and abstract classes in C#.
On our daily raffles you could win one of the DevExpress backpacks or even a Platform Subscription of choice!
Make sure to visit our booth to find out what’s new in our v19.1 release and grab a T-Shirt.
Here’s a quick post on our upcoming development plans for Blazor. We expect to publish blog posts on each of these Blazor components in the next couple of months.
If you’re targeting Blazor for an upcoming project and would like to participate in our beta (August, 2019), please send an email to support@devexpress.com.
Products we expect to ship by Sept, 2019:
New features we expect to add to our existing Blazor product line:
Data Grid
Combo Box
Should you have any questions, please feel free to comment below.
Thanks to great feedback from users such as yourself, we’ve extended the capabilities of our JavaScript Chart and Gauge widgets with the following new features (v19.1).
legend.customizeItems callback to change the order, text, and visibility of legend items.
Legend Title - A legend title can now be specified and configured using the legend.title option. You can customize the title's appearance and its position. You can also add a subtitle as needed. This new option includes the same capabilities as the widget's root title option.
Legend in BarGauge - Our BarGauge widget can now display a legend.
In v19.1, we added the wordWrap and textOverflow options to enable word-wrap within the Title and Chart axis, PieChart, Funnel, and TreeMap labels.
These options are similar to CSS word-wrap and text-overflow properties. Refer to the following two help topics for more information: wordWrap and textOverflow.
As you know, DevExtreme supports multiple web development frameworks. All enhancements described herein are available for:Angular, Vue, React, jQuery, Knockout, ASP.NET MVC and .NET Core.
To learn more about all JavaScript related features introduced in our v19.1 release, please watch our "New in v19.1 - DevExtreme HTML / JS Controls" webinar.
Test-drive the public release now. Use the npm package:
npm install --save devextreme@19.1
We’d love to hear from you – please tell us what you think about these enhancements below.
Q: Where can I see a list of the other demo's
A: All our demos are available from Demo Center. To launch it, click the "Demo Center 19.1" shortcut in Windows Start Menu. You can learn more about the Demo Applications here https://documentation.devexpress.com/WindowsForms/14962/What-s-Installed/Demo-Applications
https://www.devexpress.com/Subscriptions/New-2019-1.xml#xtracharts
In our most recent update (v19.1), we added client HTML printing support to our ASP.NET Rich Text Editor (this support is available to WebForms, MVC, Core, and Bootstrap versions of the control library).
In previous versions, our Rich Text Editor shipped with server-side printing support (for purposes of this blog post, I’ll refer to our old implementation as server-side printing). When printing was initiated on the server, our RichEdit Document Server generated a PDF document on the server using a server-side document model. Once prepared, the browser downloaded the document for subsequent printing.
The primary disadvantage of server-side printing is that the server-side document model does not have exact document layout information from the client-side. As a result, the PDF file’s layout differs from the one displayed within the browser. For example, if you print the following text block in our Rich Text Editor:
you’ll obtain a slightly different result in the PDF file:
Though these differences may seem inconsequential, they are essential for some of our customers. Our new client-side printing engine resolves these minor discrepancies so that end-users can print what they see on-screen.
Client-side HTML printing doesn’t initiate any server requests. Our Rich Text Editor opens a new browser tab, renders document layout (HTML markup) within this tab and activates the default print dialog of the web browser.
Please note that server-side printing is enabled by default. To switch your apps to client-side printing, set the PrintMode property to ClientHtml:
ASPxRichEdit1.Settings.Printing.PrintMode = PrintMode.ClientHtml;
Once you start using our client-side printing option, the same text block that was slightly altered when sent to PDF (server-side printing), is now identical to that displayed within the browser:
See Print Out a Document for more information on this new client-side printing option.
We want to hear your thoughts. Please tell us what you think of this new capability and how you expect to use it in an upcoming project. Are you currently happy with our server-side print implementation? Do you expect to you use this new client-side print option?
As we mentioned in a previous blog post, we've added quite a number of legend/label related enhancements to our JavaScript Charts & Gauge visualization library.
In this post, I will highlight another new BarGauge and Funnel chart related feature – improved label overlap support.
In both our BarGauge and Funnel Charts, labels can overlap when chart values are close to one another. With our most recent update (v19.1), we’ve added a resolveLabelOverlapping option so you can better control the manner in which individual labels overlap.
In the Funnel, the resolveLabelOverlapping property accepts the following options:
In the Bar Gauge, the resolveLabelOverlapping property accepts the following options:
As you know, DevExtreme supports multiple web development frameworks. All enhancements described herein are available for: Angular, Vue, React, jQuery, Knockout, ASP.NET MVC and .NET Core.
Test-drive the public release now. Use the npm package:
npm install --save devextreme@19.1
We’d love to hear from you – please tell us what you think about these enhancements below.
Performance is always on our minds. For controls like the PivotGrid – a product that deals with thousands and even millions of unique values – we try to balance the way in which data is managed by the control and the amount of data sent across the wire.
For example, the PivotGrid supports OLAP Cubes (to efficiently handle data on the server), but the XML sent to the client can be quite complex and large. This might result in slower performance and - in edge cases - it may even crash the PivotGrid.
With Remote Data Paging support (available in v19.1), we now allow you to fine-tune the data transfer process. Remote Data Paging allows the PivotGrid to request data on demand from the OLAP Cube. This results in smaller chunks of data being sent across the wire. Though it does create more server requests, on the whole, we believe it offers better overall performance.
At present, Remote Data Paging only works when connecting to OLAB Cubes that use 'virtual' scrolling mode. As you can see below, you also need to set the dataSource.paginate option to true.
dataSource: {
store: store,
paginate: true,
fields: [/* fields */]
},
scrolling: {
mode: 'virtual' // <- needs to be set to virtual !
} While this feature offers significant performance benefits, limitations do exist:
One of the more time-consuming PivotGrid related implementations (when you create it manually) is use of inter-dependent comboxes for data filtering. Though our PivotGrid ships with a robust filtering engine, we decided to add a "Cascading Filtering" option to the control in our v19.1 release cycle.
Cascade filters allow you to restrict the values displayed within a combo box based on values specified in a ‘master’ combo box (by setting the headerFilter.showRelevantValues to true).
As you know, DevExtreme supports multiple web development frameworks. All enhancements described herein are available for:Angular, Vue, React, jQuery,Knockout, ASP.NET MVC and .NET Core.
Test-drive the public release, use the npm package:
npm install --save devextreme@19.1
As always, we’d love to hear from you – please tell us what you think about these enhancements below.
It takes several steps to include DevExtreme in a React application project. Of course we optimized the process as much as possible, so it’s not really complicated – but it can be time-consuming and it requires attention to detail. To make things easier, we created the DevExtreme React Application Template and extended the DevExtreme CLI to generate and modify your projects.
The template implements a responsive application with a navigation menu and several sample views. A choice of layouts is available:
side-nav-outer-toolbar shows a top-level toolbar across the entire page width. A Drawer component is located underneath that toolbar.side-nav-inner-toolbar shows the Drawer at full page height. Technically, the toolbar is wrapped in the Drawer, so they show side by side.single-card layout shows a single adaptive card element on its own.By default, the template applies one of side-nav-outer-toolbar and side-nav-inner-toolbar to all pages viewed by an authenticated user, while single-card is used to show a login form if the user is not authenticated. The layouts map to React components, so you can change this later as required.
To allow application components to adapt to screen size changes, we created a utility called media-query. Several default breakpoints are configured in that file, and you can see how the App and toolbar components use the information to change their appearances and layouts when screen sizes change.
The navigation menu shown in the Drawer is based on the DevExtreme TreeView component. We use react-router-dom to implement routing in the template.
The application template uses two DevExtreme themes, a base theme and an additional theme. The additional theme is used by default to render the navigation menu. For the base theme, the default is material.orange.light, while the additional theme is material.orange.dark. It is possible to switch to different themes by editing the metadata files in the themes folder and running npm run build-themes to regenerate the .css files and .scss variables.
You can also use the DevExtreme Theme Builder for more complex theme changes.
Of course it would be possible to download a copy of the template application from its GitHub repository and start working from there. However, our command line interface makes this easier, and it offers a few useful options. Install devextreme-cli like this:
> npm install -g devextreme-cli
The command devextreme is then available. It has built-in help documentation that shows if you run it without parameters.
To create a new React app using DevExtreme, use a command like this:
> devextreme new react-app my-app-name --layout side-nav-outer-toolbar [--empty]
If a layout is not given on the command line, you will be prompted for it. The brackets around --empty denote this as an optional parameter. If you provide it, the resulting application will not contain any sample views.
Alternatively, if you already have a React project, you can install the dependencies devextreme and devextreme-react as well as the required stylesheet references using this command:
> devextreme add devextreme-react
There is also a command available to add a view to an application based on the template. The new view is automatically added to the navigation menu and the routing configuration.
> devextreme add view my-view-name [--icon]
Please feel free to leave comments below, if you have any thoughts on our implementation. There is also a GitHub issue dedicated to this feature set, and it would be great if you could submit a quick response to this poll to help us analyze how we’re doing.
It takes several steps to include DevExtreme in a React or Vue application project. Of course we optimized the process as much as possible, so it’s not really complicated – but it can be time-consuming and it requires attention to detail. To make things easier, we created two templates for DevExtreme React Applications and DevExtreme Vue Applications. We also extended the DevExtreme CLI to generate and modify your projects.
The templates implement responsive applications with navigation menus and sample views. A choice of layouts is available:
side-nav-outer-toolbar shows a top-level toolbar across the entire page width. A Drawer component is located underneath that toolbar.side-nav-inner-toolbar shows the Drawer at full page height. Technically, the toolbar is wrapped in the Drawer, so they show side by side.single-card layout shows a single adaptive card element on its own.By default, the templates apply one of side-nav-outer-toolbar and side-nav-inner-toolbar to all pages viewed by an authenticated user, while single-card is used to show a login form if the user is not authenticated. The layouts map to React and Vue components, so you can change this later as required.
To allow application components to adapt to screen size changes, we created a utility called media-query (React, Vue). Several default breakpoints are configured in that file, and the App and toolbar components use the information to change their appearances and layouts when screen sizes change.
The navigation menu shown in the Drawer is based on the DevExtreme TreeView component. We use react-router-dom and vue-router to implement routing in the templates.
The application templates each use two DevExtreme themes, a base theme and an additional theme. The additional theme is used by default to render the navigation menu. For the base theme, the default is material.orange.light, while the additional theme is material.orange.dark. It is possible to switch to different themes by editing the metadata files in the themes folder and running npm run build-themes to regenerate the .css files and .scss variables.
You can also use the DevExtreme Theme Builder for more complex theme changes.
Of course it would be possible to download a copy of the template application from its GitHub repository (React, Vue) and start working from there. However, our command line interface makes this easier, and it offers a few useful options. Install devextreme-cli like this:
> npm install -g devextreme-cli
The command devextreme is then available. It has built-in help documentation that shows if you run it without parameters.
To create a new DevExtreme app for React or Vue, use a command line similar to these:
# For React
> devextreme new react-app my-app-name --layout side-nav-outer-toolbar [--empty]
# For Vue
> devextreme new vue-app my-app-name --layout side-nav-outer-toolbar [--empty]
If a layout is not specified on the command line, you will be prompted for it. The brackets around --empty denote this as an optional parameter. If you provide it, the resulting application will not contain any sample views.
Alternatively, if you already have a React or Vue project, you can install the required DevExtreme dependencies and stylesheet references using these commands:
# For React - add devextreme and devextreme-react
> devextreme add devextreme-react
# For Vue - add devextreme and devextreme-vue
> devextreme add devextreme-vue
There is also a command available to add a view to an application based on either of the templates. The new view is automatically added to the navigation menu and the routing configuration.
# This command works for React and Vue templates
> devextreme add view my-view-name [--icon]
Please feel free to leave comments below, if you have any thoughts on our implementations. There are also GitHub issues (React, Vue) dedicated to this feature set, and it would be great if you could submit a quick response to this poll (React, Vue) to help us analyze how we’re doing.
A few years ago, we took over maintenance and guidance for the ASP.NET AJAX Control Toolkit project. Please refer to this blog post for more information on the project and why we stepped in to assist.
As part of our ongoing commitment to the project, we’ve released an update (ASP.NET AJAX Control Toolkit v19.1.0) to address the following issues.
AjaxFileUpload (#483)AutoCompleteExtender: the TextChanged event is not fired in Edge (#458)Rating: The raise_mouseOver method has an invalid argument name (#461)AsyncFileUpload changes the frame target to _top (#466)HtmlEditorExtender unconditionally removes tags with data URLs (#467)IsLocalizationEnabled() within a PageAsyncTask (#486)To update the ASP.NET AJAX Control Toolkit, please download our most recent installer using the link below.
Or, if you prefer, use Nuget:
ASP.NET AJAX Control Toolkit Nuget package
As always, we welcome your feedback. Please share your thoughts on this update via GitHub.
We’d like to thank you for installing the DevExpress Edition of the AJAX Control Toolkit and look forward to your feedback as you begin leveraging its capabilities.
If you require additional UI controls for your ASP.NET WebForms application, we invite you to download and try a free 30-day evaluation of our ASP.NET Subscription. With over 100 UI controls, the DevExpress ASP.NET Subscription helps you build your best, and deliver elegant line-of-business applications in the shortest possible time. For a complete list of products and features in our ASP.NET Subscription, please refer to the following webpage.
Preview 11 of the DevExpress UI for Blazor is now available and it includes a new TreeView component and enhanced features for the ComboBox component.
If you’re targeting Blazor and need to use a TreeView in your project, take a look at the following demo for more information on our new Blazor TreeView UI control.
This new components presents hierarchical data within a tree structure. Parent nodes can be collapsed or expanded – and individual nodes can be selected as necessary. The component ships with three API events to manage component behavior.
Preview 11 ships with several enhancements to our Blazor ComboBox.
The component allows end-users to enter custom text into the text box when the value does not match a drop-down item. To enable this feature, set the AllowUserInput property to true.
To learn more, see to Combo Box - Allow Input online demo.
Our Blazor ComboBox supports two filter modes and now allows end-users to locate combobox items more quickly. Assign “Contains” or “StartsWith” to the FilteringMode property to enable the desired filter mode.
To learn more, see the Combo Box - Incremental Filtering demo.
To help improve the end-user experience, Preview 11 includes built-in Keyboard Support. At present, the following shortcuts are supported:
As our Blazor component library grows, so does our online demo collection. We used our new TreeView to simplify navigation within the demo and updated the appearance of the demo with the ‘Pulse’ Bootstrap theme.
We want to hear from you. If you’re currently using Blazor, or expect to do so in the near future, please share your thoughts with us below.
As you probably know, DevExtreme’s Data Editors library includes a comprehensive suite of field editors (calendar drop down, combo box, etc). If you’ve used DevExtreme in the past, you also know that these UI controls can be used as cell editors within complex “container” components like our JavaScript DataGrid and PivotGrid.
The purpose of this post is to detail the new custom button feature for our text-based JavaScript data edit widgets (available in v19.1+). Though countless usage examples exist, perhaps the best illustration for the virtues of this new feature is the “Show Password” button displayed within password editors (when pressed, the Show Password button reveals the value entered inside the password text box.
Our new implementation allows you to create both simple multi-button text editors (like Show Password), or to use button arrays and control positioning within the editor. As you can see in the images below, our JavaScript text editors allow you to create intuitive text entry fields – be it a currency converter or an advanced Date Edit dropdown.
The code example below demonstrates the ease with which you can reproduce the Advanced DateBox pictured above:
var millisecondsInDay = 24 * 60 * 60 * 1000;
var dateEditor = $("#advanced-datebox").dxDateBox({
value: new Date().getTime(),
stylingMode: "outlined",
buttons: [{
name: "today",
location: "before",
options: {
text: "Today",
onClick: function() {
dateEditor.option("value", new Date().getTime());
}
}
}, {
name: "prevDate",
location: "before",
options: {
icon: "spinprev",
stylingMode: "text",
onClick: function() {
var currentDate = dateEditor.option("value");
dateEditor.option("value", currentDate - millisecondsInDay);
}
}
}, {
name: "nextDate",
location: "after",
options: {
icon: "spinnext",
stylingMode: "text",
onClick: function() {
var currentDate = dateEditor.option("value");
dateEditor.option("value", currentDate + millisecondsInDay);
}
}
}, "dropDown"]
}).dxDateBox("instance");First, please note that role of the control’s location option. It determines where to place the button and offers the following values:
Second, the icon option allows you to quickly associate an icon from the DevExtreme Icon Library or to use a custom image as described in our documentation.
Finally, you can specify default actions for the control as needed. Default actions include:
If you need to access one of these custom buttons in code, you can do so by calling the new getButton(name) method. For example, if you would like to hide the Today button in the example above, you would use the following code:
dateBoxInstance.getButton("today").option("visible", false); As you know, DevExtreme supports multiple web development frameworks. All enhancements described herein are available for:Angular, Vue, React, jQuery,Knockout,ASP.NET MVC and .NET Core.
Test-drive the public release now. Use the npm package:
npm install --save devextreme@19.1
Once you’ve had the opportunity to evaluate our JavaScript Data Editors Library and its new custom button feature, please share your feedback/opinion below.
We’ve extended the capabilities of our ASP.NET Bootstrap Scheduler control in our most recent release (v19.1) with the following mobile-specific features:
We redesigned the control’s Date Navigator UI. We removed the 'Today' button and made the date item clickable. Once clicked, a calendar UI element appears on-screen (used for date selection). By making this change, we saved space and moved the 'previous date' and 'next date' buttons closer to one another.
Bootstrap Date Navigator in v18.2:
Bootstrap Date Navigator in v19.1:
Our Bootstrap Date Navigator can now display appointment marks within individual date items.
As you can see, this feature makes it easier to find free or busy days within one’s schedule.
We upgraded View Selector adaptivity. The following animation demonstrates the difference between our new release and its predecessor.
The Bootstrap Scheduler includes built-in Floating Action buttons. These buttons already support key scheduler-related actions (such as adding, editing or deleting appointments).
You can customize the Floating Action button and introduce custom actions as needed. In this demo, we replaced our predefined user actions with custom actions.
As always, we’d love to hear your feedback. Please tell us how you’re using our ASP.NET Scheduler on mobile devices? How likely are you to use these features in your next Bootstrap application?
Last year, we published a post about using React with the Report and Dashboard Server. We have now created an updated sample that includes React components for Report Viewer and Dashboard Control.
The Report and Dashboard Server (short R&D Server from now on) is a powerful turnkey solution. The sample shows how its frontend components can be integrated in a React app — similar approaches can be used for other client platforms, so R&D Server functionality is available to all JavaScript-based solutions.
Here is the demo application. It is configured to use guest access to our demo server. You can run the embedded app below by clicking the Preview button, or use Open in Editor to see a bigger window. Once the app runs, select a report or dashboard document from the list in the top-left corner and a viewer opens to show that document. In the sandbox IDE, you can also see all the code files in the project.
The components written for the sample do not cover the complete feature set of our HTML/JS widgets. However, they have been designed for “real” use cases, and the following sections outline some important technical points and design considerations.
Please note that the components only view documents from the R&D Server, they don’t utilize any of the designer features of the underlying widgets. The R&D Server already implements a web interface for design purposes and it seems unlikely that most applications would replicate this functionality.
Before any documents on an R&D Server can be accessed, an authentication token must be obtained. The component ReportServerProvider does this job in the demo application, and it automatically refreshes the token when it times out. Using a React Context, the current token is provided to those components that need it. For the demo, the Guest account is configured statically.
<ReportServerProvider serviceBaseUrl="https://reportserver.devexpress.com" username="Guest" password="">
Both viewer components ReportServerReport and ReportServerDashboard include code that applies a newly refreshed token to a component instance without a content refresh. This is important to make sure that the end user is not disrupted in their work with the viewer component when a token expires.
Both viewer components can switch documents without reinitializing. This results in a smooth user experience when a viewer is already visible and a new document of equal type is selected. The dashboard viewer uses the loadDashboard and unloadDashboard API methods, while the report viewer binds to a Knockout observable.
The demo implements a switch component called ReportServerDocumentViewer. This component encapsulates the other two, providing a very small interface with only two props:
<ReportServerDocumentViewer document={{ id: 10, documentType: 'Report' }} />The Dashboard Control requires Globalize and CLDR to be available in the application. Details about this configuration are available in the documentation. The approach described on that page uses react-app-rewired to integrate the dependencies into a project created using create-react-app, without ejecting it. Please note that this is the recommended approach.
For the demo, the project has been ejected because the sandbox environment can’t run projects configured with react-app-rewired.
Please feel free to comment below if you have any questions or comments on this sample implementation. Alternatively, please create a Support Center ticket if you need to discuss your specific requirements in detail.
To specify how a document is exported to Excel, our reporting tools provide the property XlsxExportOptions.ExportMode. Here are the three possible values of that property:
| Name | Description |
|---|---|
| SingleFile | The document is exported to a single file. In this mode, page headers and footers are added to the resulting XLSX file just once, at the beginning and the end of the document. |
| DifferentFiles | The document is exported to multiple files, one report page per file. |
| SingleFilePageByPage | The document is exported to a single file, but an individual sheet is created for each page. |
As you can see, if the report document is split into parts during the export process, this always happens along page boundaries. If you wanted to split the report into individual files or sheets per group instead of page, the only solution in the past was to use the Spreadsheet Document API from the Office File API product suite as described in the article How to export reports to different sheets in an XLSX file by using Spreadsheet Document Server.
In v19.1.4 we made this possible without any additional components. Read on to find out the details.
The name of this property might sound old-fashioned, but it can be used to solve the problem described above. In v19.1.4 we fixed an issue for this feature, so that page breaks are now recognized correctly when RollPaper is true.
Here is a report with one group level:
The following image shows the same report with a group footer band inserted. The height of the band is zero and its PageBreak property is set to AfterBand:
The property XtraReport.RollPaper has now been enabled. In the Preview tab you see a document with several pages of different lengths. Each page represents one group.
When this report is exported to Excel using the export mode SingleFilePageByPage, each report group occupies its own sheet in the resulting file:
We are interested in your thoughts about the suggested solution described in this post. For the future, we will consider a special export mode SingleFileGroupPerPage. Using this mode, the preview could show “normal” page sizes, while the export would still create the same result you see above. Please submit your responses to this short survey to let us know your priorities:
Our most recent release (v19.1) includes a new ASP.NET Core File Manager control. Though the component is currently available as a Community Tech Preview (CTP), our customers tell us they’ve already put the control to use in real applications.
In this post, I’ll demonstrate how you can enable preview thumbnails for image files within the ASP.NET Core File Manager control.
Image thumbnails are important UI elements within all modern file explorers (be it Explorer on PCs or Finder on Macs).
At present, our File Manager displays default thumbnails for all files. We will support preview thumbnails in a future release. If you’re already using the File Manager in your web app, you can introduce image previews via our Thumbnail Generator service. Simply add it to your project to enable image previews.
The ThumbnailGeneratorService.cs file contains the code needed to generate custom thumbnails. We use the System.Drawing.Common library to create icons based on your image files.
Add the ThumbnailGeneratorService.cs file to your ASP.NET Core Web Application without any modifications.
Register the service in the Startup.cs file:
services
.AddSingleton<IActionContextAccessor, ActionContextAccessor>()
.AddSingleton<IThumbnailGeneratorService, ThumbnailGeneratorService>()public IActionResult FileSystem(FileSystemCommand command, string arguments) {
var config = new FileSystemConfiguration {
FileSystemProvider = new DefaultFileProvider(rootPath,
ThumbnailGenerator.AssignThumbnailUrl),
// ...
};
var processor = new FileSystemCommandProcessor(config);
var result = processor.Execute(command, arguments);
return Ok(result.GetClientCommandResult());
}$(function(){
$("#fileManagerContainer").dxFileManager({
// ...
customizeThumbnail: function (fileManagerItem) {
return fileManagerItem.dataItem ? fileManagerItem.dataItem.thumbnailUrl : null;
}
});
});You should now see image thumbnails within the DevExpress File Manager control.
If you encounter the "System.TypeInitializationException: The type initializer for 'Gdip' threw an exception. ---> System.DllNotFoundException: Unable to load DLL 'libgdiplus': The specified module could not be found" exception, please install GDI+.
For MacOS systems, call the following command into terminal to install GDI+:
brew install mono-libgdiplus
We'd love to hear your feedback.
There are a number of prerequisites for creating your Blazor project, the main one being the use of Visual Studio 2019 Preview. For full instructions on how to set up your project please head over to our Blazor GitHub page.