The DevExpress "Office Applications (Mobile friendly)" demo showcases many of our ASP.NET controls: RichEdit, Spreadsheet, FileManager, and more. It's inspired by the feature-rich functionality of Office 365 online, however, our demo allows any ASP.NET developer to build similar features and host it locally.

The "Office Applications" is a big demo with lots of great features. Unfortunately, it's not a great learning tool. So we've created a smaller version of this demo that teaches you how to build the core parts, step-by-step, with detailed explanation.

Responsive Sample App

To encourage folks to download, test, fork, comment, question, etc., we've put the "DevExpress / aspnet-documentmanagement-bestpractices" sample on GitHub:

https://github.com/DevExpress/aspnet-documentmanagement-bestpractices

This sample application demonstrates 'best practices' when using the DevExpress ASP.NET File Manager, Panel, Spreadsheet, and Rich Text Editor. These controls are used to implement a responsive web application for managing office documents and media files (*.docx, *.xlsx, *.jpg, etc.).

Online Demo

Click or scan the QR code below to open the online example and experience the demo on your desktop or your mobile device.

In the repository, you'll find a full Visual Studio ASP.NET solution and several guides:

• Step 1: Populating the File Manager with files using a database as a file storage
• Step 2: Implementing custom filtering and applying security settings for the File Manager
• Step 3: Building a responsive layout for the file explorer using DevExpress controls and CSS styles
• Step 4: Reading and viewing office documents using Rich Text Editor and Spreadsheet controls

Download this repository and run it on your machine (details below). This sample app requires DevExpress ASP.NET controls (v18.1 or higher). Download the latest installer from the DevExpress website.

Application description

The application's main screen includes three main layout elements:

• Header with text and two navigation buttons
• Left-side collapsible menu
• File explorer

The file explorer, represented by the ASPxFileManager, displays the application's file system. End-users can manage files and folders: create, delete, copy, rename, or replace them.

The left-side menu allows end-users to display files only with specific extensions or files that were modified recently. End-users can collapse/expand the menu by clicking the hamburger button. If a browser window's width is less than 960px, the menu is collapsed when the application is started; otherwise, it is expanded.

End-users can view and edit office documents (xlsx, xls, csv, docx, doc, rtf, and txt files) by clicking the corresponding item in the file explorer. The documents are opened in view mode:

This mode is optimized for viewing documents, specifically for mobile devices:

• Pages render faster than in edit mode
• Improved readability for different devices, due to the adaptive layout
• Easy navigation through documents on mobile devices using the browser's built-in page search

End-users can to return to the file explorer or edit the document using the navigation buttons. When an end-user clicks the pen button then the document is opened in edit mode. Office documents are then either loaded in the ASPxRichEdit or ASPxSpreadsheet controls depending on their format (docx, xlsx, etc.).

End-users can edit and save documents in this mode. The back button returns users to the read-only view.

How to launch the project on a local machine

The following steps are required to create a database that stores files contained in the AppData/Files folder. These files in the new database are then used to display in the file explorer. Refer to the Populating the File Manager with files using a database as a file storage topic to see this feature's description.

Follow the instructions below to launch the project on your machine:

1. Run the CreateDatabase.aspx page in your browser.
2. Click the Create and populate Database button.
3. Wait until the button's text is changed to Database created.
4. Now run the Default.aspx page and experience the sample application.

What are you thoughts on this new well-documented ASP.NET sample app? Drop me a line below. Thanks!

Since taking over the ASP.NET AJAX Control Toolkit, we at DevExpress have been committed to keeping this library stable, modern, and useful. So I'm happy to announce the availability of v18.1.1 today.

This release brings several bug fixes and an enhancement. There is also a notable community contribution that will help those of you who are using an older version and want to upgrade to the latest release. Let's take a look.

Update Your Version

Please upgrade your ASP.NET AJAX Control Toolkit version to the latest release. You can download our useful installer here:

Download

Or use Nuget:

ASP.NET AJAX Control Toolkit Nuget package

Then give us your feedback on GitHub.

Notable Community Contribution

From the DevExpress team that works on the toolkit, I'd like say thank you to developer tdjastrzebski. This dev has provided the ASP.NET AJAX Control Toolkit community with an updated AjaxControlToolkit.ScriptUserControl.

When we released the first version of the ASP.NET AJAX Control Toolkit (DevExpress edition) back in March 2015, we made several fixes and updates. One of those fixes involved removing the AjaxControlToolkit.ScriptUserControl because it was unused code and we could not validate how it worked properly. So the best decision, and correct one, was to remove it so that the release would be stable and we could provide other enhancements too.

Unfortunately, there was an issue for users who wanted upgrade their Toolkit install. Essentially, if you used the AjaxControlToolkit.ScriptUserControl then upgrading to v15.1+ meant that you would need to update your old code. There are some old ASP.NET Toolkit-based projects that still depend on this class.

Therefore, we're thankful that tdjastrzebski has developed the new version of the AjaxControlToolkit.ScriptUserControl that is compatible with the latest release of our ASP.NET AJAX Control Toolkit.

If you've been hesitant to upgrade to the latest version then please take a look at AjaxControlToolkit.ScriptUserControl and upgrade to the latest version of the ASP.NET AJAX Control Toolkit.

Features and Improvements:

Gravatar

• Item 445 - Add support for https image url on gravatar control

Bug Fixes in v18.1.1

AjaxFileUpload

• Item 435 - AjaxFileUpload custom localization does not work
• Item 437 - AjaxFileUpload does not allow files without extensions
• Item 454 - AjaxFileUpload invalid characters in file path

AutoCompleteExtender

• Item 450 - AutoComplete: TextBox.TextChanged not firing on Safari/Chrome for MAC, IPAD

HtmlEditorExtender

• Item 452 - ColorPicker HtmlEditorExtender some colors are wrong

PieChart

• Item 404 - Single series in pie chart not displaying

Try DevExpress ASP.NET

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 using it.

When we took over the fabulous ASP.NET AJAX Control Toolkit, our goal was to reach those web developers who want to use great web user interface controls for their web projects and DevExpress ASP.NET provides that and much more.

Try the free DevExpress 30 day trial.

We've ported four major ASP.NET controls to our excellent Bootstrap line of controls:

1. Spreadsheet
2. Rich Edit
3. File Manager
4. Ribbon

These additions mean that our Bootstrap control set is close to being as comprehensive as the classic DevExpress ASP.NET control suite.

Features

These new controls for Bootstrap contain nearly all the same great features as the classic controls.

Spreadsheet

The Spreadsheet is an Excel-inspired extension that allows you to introduce spreadsheet functionality to your ASP.NET Bootstrap web applications with ease. It provides a rich UI and an extensive API to create, manage, and convert spreadsheet files.

Features:

• Images
• Formulas
• Charting
• Comments
• Worksheet Protection
• Worksheet Printing
• Worksheet Display Area
• Worksheet Freeze Panes
• Sorting and AutoFilter
• Data Validation
• Mail Merging
• Custom Data Merging
• External Ribbon
• Context Menu Customization

Rich Text Edit

The Rich Text Editor is a Word-inspired extension that allows you to introduce rich text editing functionality to your ASP.NET Bootstrap web applications with ease. Using the control's rich UI and comprehensive API, your app can create, manage, and convert rich text documents.

Features:

• Paragraph Formatting
• Styles
• Text with Images
• Bullets and Numbering
• Hyperlinks and Bookmarks
• Tables
• Floating Objects
• Document Protection
• Document Restrictions
• Export of PDF
• Sections
• Headers and Footers
• Table of Contents
• Spell Checking
• Auto Correction
• Fields
• Document Variables
• Mail Merging via Document Server
• External Ribbon
• Context Menu Customization

File Manager

FileManager represents an Explorer-like extension providing your end-users with the capability to manage files and folders. This extension allows end-users to easily upload and select files, and even change the folder structure (by renaming, moving and deleting files or folders).

Features:

• File System Providers
• View Modes
• Access Control
• Customization
• Adaptivity

Ribbon

A Ribbon control provides your ASP.NET Bootstrap web applications with ribbon functionality, i.e., a set of toolbars placed on several tabs:

Features:

• Data Binding
• Keyboard Support
• Quick Access Toolbar
• Adaptivity
• Templates
• Client-Side Events
• Client-Side Functionality

Take a look at this classic post to see some benefits of a Ribbon control.

Which of these controls have you been waiting to use in your Bootstrap websites?

The Batch Edit feature of the DevExpress ASP.NET GridView is a fantastic time-saving feature.

Essentially, Batch Edit mode allows you to modify a batch of grid data on the client-side and to send it to the server in a single request. In this mode, the GridView maintains all user changes on the client side until the user saves or discards them.

Unfortunately, the Batch Edit mode was limited because it would only work for the page you were currently on. It did not allow you to page, sort, group, or perform any callback-based operation until you accepted or canceled those original changes.

Good news, we've solved this callback-based limitation. We're also introducing a new Batch Edit preview dialog.

Preview Batch Changes

Let's start with the new feature: Inserted, edited, and deleted edits can now be previewed and modified before data is saved in the Batch Edit mode. Take a look:

Batch Callback Support

As mentioned earlier, our ASP.NET GridView now supports callbacks in batch edit mode. Therefore, the control will not lose unsaved changes when the end-user filters, pages, groups or sorts data. Batch Edit mode now works across the entire GridView.

Drop me a line below with your thoughts on these DevExpress ASP.NET GridView features.

The DevExpress ASP.NET WebForms, MVC, and Bootstrap List Editors now support Database Server Mode. That means the DevExpress ASP.NET ComboBox, ListBox, and TokenBox controls can now easily bind to large data sources without the need for custom data binding.

Before the v18.2 release, we'd recommend that customers use the custom data binding approach. This involved implementing the ItemsRequestedByFilterCondition and ItemRequestedByValue events for the ComboBox control. While this approach gives full control over the data retrieval process, it also involves writing lots of code. Also, the ListBox and TokenBox controls didn't even support custom binding.

So, I'm happy to say that built-in Server Mode support is now available for the DevExpress ASP.NET List Editors. Therefore, if you bind the ComboBox, ListBox, or TokenBox controls using a server-mode enabled data source, then the control will only load the necessary items regardless of how big the data source is. I recommend reading the Server Mode section below to learn more.

Take a look at this animation to see how your end-users can benefit from this fast and powerful enhancement. In the GIF below, the DevExpress ASP.NET ComboBox is bound to a data source with 20,000 records! And with the server mode feature, you can bind to one million records or more:

How to use in ASP.NET and Bootstrap

Bind the List control to an EntityServerModeDataSource, LinqServerModeDataSource, or XpoDataSource control. Then set the EnableCallbackMode property to true.

How to use in ASP.NET MVC

Use the BindToEF and BindToLINQ methods to bind the List control to and Entity/Linq table. Then enable callbacks by setting the CallbackRouteValues property.

Full Control

However, if you have a scenario that requires full control of the data retrieval process then we recommend that you use these events

• ItemsRequestedByFilterCondition
• ItemRequestedByValue

Take a look at these ASP.NET and MVC demos to see code examples of how to use these events.

The next section gives a short explanation and benefits of the Server Mode feature. Please feel free to skip this section if you're familiar with this excellent feature.

Server Mode

When building websites, binding to large amounts of server-side data can slow down the UI. For example, data binding a standard combo box control to one million records from your SQL Server will only lead to frustrated end-users who complain about slow or unresponsive web views.

There is a good solution to binding your controls to large amounts of data on the web: make your database server do the hard work instead of your web server. Your database is better suited to handle these large expensive data-intensive operations like paging, grouping, sorting, etc. Offloading the task to your database also has the benefits of faster page loads, concurrency, and more.

While we call it Server Mode, conceptually, it's similar to 'record paging' or 'server-side paging'. However, we at DevExpress have provided 'large database support' for many years and in many of our controls.

I recommend reading this help topic to learn more about 'Server Mode'.

Have you been looking forward to the DevExpress ASP.NET Combo Box or Token Box getting the Server Mode feature? Drop me a line below. Thanks!

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!

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!

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.

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!

Great news - our upcoming release will include a highly requested feature for both our ASP.NET DateEdit and Calendar Controls: a new mode that allow your end-users to select only the month and year portion of the date. Check this animation to see it in action:

Scenarios

There are many scenarios like "credit card expiration dates" that require an end-user to select only the month and year. The new month-year picker mode helps with these types of scenarios.

You can also use it to filter other controls like the GridView:

How to Use

To set up picker mode, use the new PickerType property. This property allows you to set one of these values: ['NotSet','Days','Months','Years','Decades'] (NotSet is the default value.)

Data Annotation Support

You can also set the PickerType property using Data Annotation attributes. Usually Data Annotation attributes are available with our ASP.NET MVC controls but now you can use them with the ASP.NET WebForms Editor controls too:

[DatePickerType(DatePickerType.Months)]
public DateTime FilterDate { get; set; }

Let's take a look at the different PickerType values:

Days View

If PickerType is set to Days then the control will display the "Days" view and you can select a specific day, for example "11/22/2018":

Months View

With the Months setting, you can restrict the control to select months only:

The Months is the minimal available view. This means that an end-user can select only the specific month, for example, "Dec 2018". You cannot select the day in this view, however, because this control will bind to a variable of the DateTime type, it will set the day value to 1, the first day of the month.

Years View

The Years value let's you restrict the date selection to years only:

Initial & Max View

We've also added two new properties that let you set the initial and maximum view of navigation between months, years, and decades:

• ASPxDateEdit.CalendarProperties.FastNavProperties.InitialView
• ASPxDateEdit.CalendarProperties.FastNavProperties.MaxView

I'd like to thank all the customers who provided us their usage scenarios for the new feature. What are your thoughts on the new month-year picker feature? Drop me a line below, thanks!

Adaptivity remains one of the most important features of a modern website. Which is why you'll appreciate the latest features that we've added to the ComboBox, DateEdit, and DropDownEdit controls:

• Scroll Picker
• Modal Drop Down

These features will enhance the usability on small screen (mobile) devices. Of course, both the DevExpress ASP.NET WebForms and MVC versions of the controls get these new features. Let's take a look.

Scroll Picker

We added a new mobile-friendly way to select dates with the DevExpress ASP.NET DateEdit control:

Enable

To enable this feature, set the DateEdit's PickerDisplayMode property to Auto, Calendar, or ScrollPicker. The default is Auto.

If the DateEdit is in modal mode, then the ScrollPicker is automatically selected. Otherwise, the standard Calendar is selected.

Demo - Scroll Picker - WebForms and MVC

Rest assured that the scroll picker mode works to help select the time section too.

Modal drop down

On smaller device screens, a popup can be difficult to see, so it's better to use a modal popup to gain the end user's attention.

Therefore, we've added a new modal drop-down mode to several of the ASP.NET Editors:

The animation above shows how much more effective it is to show the drop down as a modal popup in the middle of the screen for small screen devices. This allows end-users to easily select the necessary values from the controls with the drop-down.

This feature is available with the following controls:

• ComboBox
• DateEdit
• DropDownEdit

Settings

Set the SettingsAdaptivity.Mode property to OnWindowInnerWidth to enable this feature. Then, the control will switch to modal mode when the browser's width is less than the SwitchToModalAtWindowInnerWidth property value. Use the following settings to customize drop-down editors in adaptivity mode:

• DropDownEditBaseAdaptivitySettings (DateEdit and ComboBox)
• DropDownEditAdaptivitySettings (DropdownEdit)

Demo - Modal DropDowns - WebForms and MVC

More Editor Features

Check out some of the other great new features of the DevExpress ASP.NET Editors for ASP.NET WebForms and MVC in our latest release:

• ASP.NET, MVC, and Bootstrap - ComboBox, ListBox, and TokenBox - Database Server Mode (v18.2)
• ASP.NET and MVC Editors - Floating Action Button (v18.2)
• ASP.NET and MVC DateEdit & Calendar - Month-Year Picker (v18.2)

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

If you've used our ASP.NET MVC GridView then you've likely experienced the integrated Filter Control. Unfortunately, due to various priorities, a stand-alone version was only available for the ASP.NET WebForms suite of controls.

Good news, the long-awaited DevExpress ASP.NET Filter Control is now available as a stand-alone ASP.NET MVC extension! The Filter Control allows your end-users to build filter criteria of any complexity and apply the filter to any data component or data model.

As a stand-alone control, you can use to filter other DevExpress MVC controls and also position the Filter Control anywhere on your MVC views.

Here's the stand-alone DevExpress MVC Filter Control with the DevExpress MVC GridView in action:

Helpful links:

• Demo
• Documentation

What are your thoughts on the new DevExpress ASP.NET MVC Stand-Alone Filter Control? Drop me a line below, thanks!

The powerful DevExpress ASP.NET Spreadsheet control is now available for our ASP.NET Bootstrap set of controls.

Preview

This control is available as a preview version in the v18.2 release. However, it supports nearly all major features, including the new Pivot Tables.

It's a preview version because we're working to improve the new Spreadsheet's performance, Touch UI and Mobile experience, and add several minor dialogs. In fact, we'll likely release these features in a future v18.2 minor release.

Let's take a look at some of the advantages of this new Spreadsheet control.

Appearance

Like other DevExpress ASP.NET Bootstrap controls, the new Spreadsheet control will work with nearly any Bootstrap theme. The control's appearance is set through the Bootstrap.css file so it will look great in all Bootstrap-based apps.

The new Spreadsheet control also supports the excellent new DevExpress Bootstrap themes:

Adaptive

The Spreadsheet also makes use of a new adaptive ribbon control that adjusts its items based on the screen size:

Features

Even though this is a preview version, the Spreadsheet control is packed with the following major features:

• Charting
• Formulas
• Comments
• Protection
• Images
• Printing
• Worksheet Display Area
• Freeze Panes
• Sorting and AutoFilter
• Data Validation
• Mail Merging
• Extensive UI options: dialogs, context menu, ribbon;
• Client-side and Server-side API

Feedback

Take a look at the online demo and documentation:

• Demo
• Documentation

Then test the new DevExpress Bootstrap Spreadsheet control in your Bootstrap web apps and give us your feedback.

We've added an improvement to the DevExpress ASP.NET Bootstrap controls that will boost the performance of page rendering. Let's take a look.

Deferred Client Object Initialization

When a control is first loaded, it also needs to load its client-side scripts. This can either be done by using:

• a script resource reference tag (eg <script id="dxis\_%id%" type="text/javascript" \>) or
• an inline JavaScript snippet (a startup script block)

In either scenario, the browser will pause as it loads and executes the script. In fact, if it's an external JavaScript file then you'll need a few more milliseconds to fetch the script from disk, cache, or remote server.

These types of script blocks affect your page rendering performance. So, we've added a couple of ways that help you deal with script loading and, subsequently, improve the overall performance.

Async

With the latest release, the script resource references are rendered as script blocks with the useful async attribute:

<script id="dxis\_%id%" type="text/javascript" async\>

The Async attribute allows the script resources to load asynchronously, therefore in parallel to page loading. This helps your page rendering times because the page will continue to display/render the content for the end-user without waiting for the scripts to finish loading.

Delayed

However, startup scripts will not use the Async attribute because they can be completely delayed until the end of the of the page. Therefore, startup scripts are treated as delayed initialize blocks and executed after all related script resources are loaded.

We've added the new allowClientObjectDeferredInitialization option for this specific purpose.

Performance

Let's take a look at how the new improvements perform in Google Chrome. For the tests below, we use the DevExpress ASP.NET Bootstrap Navigation Demo demo page.

First, let's take a look at the performance without the improvements:

allowClientObjectDeferredInitialization = false

Google Chrome Lighthouse audit (desktop, performance test, no throttling)

Google Chrome Network stats

Now, let's take a look at with the new improvements:

allowClientObjectDeferredInitialization = true

Google Chrome Lighthouse audit (desktop, performance test, no throttling)

Google Chrome Network stats

The network statistics tab shows that the page does not wait for script resource to finish loading (the blue vertical line indicates the DOMContentLoaded event raise timestamp, the red one - window load event raise timestamp).

Take a look at the specific lines with the option disabled and enabled:

allowClientObjectDeferredInitialization = false

allowClientObjectDeferredInitialization = true

The new script loading option speeds up page load times and therefore, allows your end-users to start interacting with the page sooner.

Async & Client-side API

Good news, our client-side static API is still available for developers even if the deferred client object initialization is enabled.

You can use global events to track the control's initialization:

<script type="text/javascript"\>
    function onButtonInit(s, e) {
            console.log(s.GetMainElement().id, "from control init");
        }</script><dx:BootstrapButtonID="BootstrapButton1"runat="server"AutoPostBack="false"Text="Button"ClientInstanceName="btn1"\><ClientSideEventsInit="onButtonInit"/\></dx:BootstrapButton\><scripttype="text/javascript"\>
    ASPxClientControl.GetControlCollection().ControlsInitialized.AddHandler(function(s, e) {
        console.log(btn1.GetMainElement().id, "from global init handler");
        });</script\>

The attached handler will be executed after all other scripts are loaded and executed, and the controls are initialized.

Warning

Please note, there may be JavaScript errors when accessing or modifying our controls from a script loaded afterward or in the jQuery $.ready() function.

To avoid this problem, please use the ASPxClientControlCollection.ControlsInitialized event to initialize all the required client-side scripts. This event is raised after all our controls are fully initialized and it's also the generally recommended way that you load your custom scripts. Take a look at the How to ensure that controls are initialized on the client side example to see how to use this event.

Old Style

By default, the new allowClientObjectDeferredInitialization will be set to true. However, if for some reason you'd prefer to use the old approach, then set allowClientObjectDeferredInitialization to false:

<configuration\>
  ...<devExpress\>
        ...<bootstrap allowClientObjectDeferredInitialization="false" /\>
        ...</devExpress\></configuration\>

Also, please make sure that the bootstrap section is defined in the web.config:

<configuration\><configSections\><sectionGroupname="devExpress"\>
        ...<sectionname="bootstrap" type="DevExpress.Web.Bootstrap.BootstrapConfigurationSection, DevExpress.Web.Bootstrap.v18.2, Version=18.2.3.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" requirePermission="false"/\></sectionGroup\></configSections\>
  ...</configuration\>

What are your thoughts on the new performance improvements of the DevExpress ASP.NET Bootstrap controls? Drop me a line below.

As a web developer these days, it's difficult to plan for the many different screen sizes that your website can be viewed on. That's why a site that's optimized and responsive makes for a more pleasant end-user experience.

To help you meet the needs of a modern website, we've created a new responsive ASP.NET web application project template. As you know, a project application template helps you to get started quickly by giving you a fully working, if content-free, application.

Our new template provides several great features including:

• Ready-made web application with DevExpress ASP.NET controls
• Responsive design
• Visual Studio integration
• Easy-to-use wizard UI
• Adaptive features of DevExpress ASP.NET Controls
• DevExpress themed (CSS rules) for standard text content

It also looks great on various screens sizes whether desktop, tablet, or mobile:

Let's take a deeper look into the new project template's design, layout elements, and pages.

Mobile-First

When we sat down to design the new project template, we mainly focused on providing responsive features. So after researching support tickets and customer feedback, we found that most customers are working on complex desktop-oriented applications development. However, traffic from mobile devices is increasing daily. That is why we decided to use the "mobile first" approach for this template:

The mobile-first approach is exactly as it sounds: designing for the smallest screen and working your way up. It is one of the best strategies to create either a responsive or adaptive design. -UXPin

With a responsive layout and DevExpress ASP.NET controls' adaptive features, our new template provides full functionality for desktop and mobile browsers. This helps you to develop complex business web applications for nearly any screen size.

Check out the online demo:

Scan this QR Code above to experience the demo in your mobile browser.

Appearance/Theme

By default, our new template uses the DevExpress ASP.NET Office365 theme, however, you can choose a different base color and font. To make it even easier, we've also prepared a set of predefined base colors and a list of several font-families to use with our template. Set your own base color and font using the wizard:

Layout Elements

Now, let's discuss the four main layout elements. The template's home page leverages several DevExpress ASP.NET controls to help build these base UI elements:

• Navigation Bar
• Sidebars
• Adaptive Toolbar
• Sticky Footer

This setup allows our template to provide for adaptive layouts. Later, we'll look into the four main pages: GridView, Scheduler, Article, and SignIn/Register.

Let's start with the layout elements:

Navigation Bar

A navigation bar (navbar) is a fixed-height toolbar at the top of a page. This template uses a "sticky" navbar - this element "sticks" to the top of the page and does not move when end users scroll the page.

The navigation bar contains:

• A hamburger button - collapses/expands a left sidebar
• An image with the company's logo and title. Only the logo is displayed on mobile devices
• A responsive menu that transforms into a button on devices with narrow screens. When this button is clicked, menu items are displayed in a popup window
• A Sign In button that displays a popup window when clicked. The window displays the Sign In/Register buttons or the user's profile
• An additional hamburger button that, when clicked, collapses/expands the right sidebar (shown only for the GridView page)

The main menu also collapses on small screens to provide for a better end-user experience.

Sidebars - Collapsible Panels

A sidebar is a collapsible panel that displays additional UI elements on the page's left or right side. In this template, the sidebars are automatically collapsed. End users can click the hamburger button to invoke a sidebar on a mobile device:

The Home, GridView, Scheduler, and Article pages include a left sidebar. The GridView page also includes a right sidebar.

Sticky Top Toolbar

The GridView and Scheduler pages include a toolbar under the navbar. Use this toolbar as a container for UI elements that should be attached to the top of the page.

The toolbar provides two adaptive modes:

• the menu hides items' text and displays only icons
• the menu hides its items, one-by-one, to the popup menu. This popup menu is hidden under the ellipse button when the browser width is changed

Sticky Footer

A fixed-height footer is pinned to the bottom of either the browser window or the content pages when it’s height is greater than the window.

Adaptive Page Layout - Content

For the content, we had a key decision to make. You see there are two general concepts of embedding content inside an adaptive page layout:

1. Scrolling only a part of the page - the main content area can fit the special content area without overall page scrolling. When the browser window resizes, the content size is updated to fit the new area size. You can see this demonstrated for the Scheduler page in "Desktop" screen resolution:

2. Scrolling the whole page (with sticky elements) - the main content is still scrolled in the special content area. However, this is a more universal approach and can be used for several controls or text blocks placed one after another. For example, you can place a FormLayout, text blocks, grids, etc. When the special content area's height exceeds the screen height, then the page will display a vertical scroll bar (instead of only the special content area):

These days, the second approach is widely used in many 'real-world' (aka production) applications. Therefore, we decided to use this approach with our new responsive template too. Except, of course, for scenarios like the Scheduler page, where it makes sense to use the first approach.

Readability

To improve readability, we used special margins for the content. The size of these margins will adapt based on the screen size and provide for a better reading experience.

We designed a set of CSS rules for control block elements (HTML div elements: <div class="text-content" ...> and <div class="control-area-block">) that can be used for text or content placement.

For example, here are the divs wrapping the FormLayout control:

<asp:Content ID="Content5" ContentPlaceHolderID="PageContent" runat="server"><div class="text-content" runat="server" id="TextContent"><h1 class="title">Multiple Controls</h1><h2>Some Control</h2><div class="control-area-block"><dx:ASPxFormLayout runat="server" ID="ASPxFormLayout" Width="100%" ClientInstanceName="FormLayout">
            ...</dx:ASPxFormLayout></div><h2>Some Text</h2>
            ...</div></asp:Content>

Content Pages

There are four pages in this demo. Two of these use our powerful controls: the GridView and Scheduler pages positioned inside an adaptive layout.

GridView

The GridView page layout includes the following features:

• A collapsible search panel expanding under the toolbar. You can place custom filtering UI elements here:

• A left sidebar that incorporates a filtering interface
• Vertical and horizontal touch scrolling
• Data pagination and the control’s built-in pager
• An edit form implemented as an adaptive modal window

Scheduler

The Scheduler page’s layout includes the following features:

• A top fixed toolbar that stores filtering and exporting UI
• A built-in adaptive toolbar that allows end-users to switch dates and views
• A floating action button that provides fast access to event management

• A left sidebar that incorporates a calendar (implemented using the DateNavigator) and the resource filtering interface (implemented using the ListBox)

Article

The Article page demonstrates an adaptive reader for formatted texts. The page's layout is built using CSS styles and adapted for the browser's window size: margins and images are reduced for small screens. CSS styles applied to the Article page are stored in a separate file (Content.css) so that you can reuse them in other projects. This CSS file (Content.css) has a set of CSS rules that can be used to format your custom text content to a similar style used by our controls.

Learn more here: Article Page Demo

Printing CSS

Our CSS styles also contain settings to help improve printing by hiding unnecessary UI elements:

Login/Register Forms

We designed two forms to support authentication inside the template application. We used the FormLayout control for these forms to support adaptivity.

These forms can be extended to meet your requirements. They also support custom authentication logic that can be implemented in code-behind:

Authorized users can access their profiles by clicking on their photo in the top right corner:

If a user's photo is unavailable, the profile icon displays a user's initials:

Feedback

With this new template, we focused on combining adaptive layouts into a web application, yet still providing your end users with the functionality of a desktop app. We'd love to hear your feedback on the new template. Drop me a line below, thanks.

Though DevExpress offers more than 110 WebForms controls and more than 65 MVC extensions, we know we can always offer more... Since we cannot implement everything simultaneously, we need your feedback to shape product direction and plans in 2019.

Please take a moment and select one of the following products – what would you like to see us deliver in 2019 (feel free to leave a comment with specific usage-scenarios... the more you share, the better we can understand your business needs now and into the future):

Please Note: We will detail plans for existing ASP.NET WebForms and MVC components in a separate blog post.

Possible New ASP.NET Products

What would you like to see us deliver in 2019?

We're making plans for 2019 and we'd love to get your feedback. Help us determine the features you'd like to see for the DevExpress ASP.NET Scheduler and Office Controls.

Please take a moment and select a few of the following product features – what would you like to see us deliver in 2019 (feel free to leave a comment with specific usage-scenarios... the more you share, the better we can understand your business needs now and into the future):

Possible New 2019 Features

What would you like to see us deliver in 2019?

We're making plans for 2019 and we'd love to get your feedback. Help us determine the features you'd like to see for the DevExpress ASP.NET Data Grid, TreeList, CardView, and Vertical Grid controls.

Please take a moment and select a few of the following product features – what would you like to see us deliver in 2019 (feel free to leave a comment with specific usage-scenarios... the more you share, the better we can understand your business needs now and into the future):

Possible New 2019 Features

What would you like to see us deliver in 2019?