The Dew Review- DevExpress ASP.NET 2013.2


DevExpress has just launched a new release of their .NET components. The new release, 2013.2 (aka 13.2), has a ton of new features and enhancements across the entire suite. I have spent the last several weeks getting to know the latest incarnation of their ASP.NET line of controls. A couple of years back when I was working at Oracle, I used their ASP.NET controls. While much of the API feels familiar in the new product, the controls have a clearer, modern looks (with theming support, of course), and they also feel faster and more responsive than I remember.

WebForms and MVC Controls

The ASP.NET product includes controls for both WebForms and MVC. They now have nearly 100 WebForms controls and over 50 for ASP.NET MVC. While modern web developers tend to gravitate toward MVC, there are still many organizations that embrace WebForms for its rapid UI development support and the richness of server-side controls.

What’s New

Of the new controls, most seem to be available to both WebForms and MVC. Many of the new MVC controls are client-side versions of existing, popular WebForms controls. One significant addition that is WebForms-only is the new ASP.NET Spreadsheet control. A new theme, called Moderno, is available in 13.2. It looks a little like their Metropolis Blue theme with less flatness and a little more rounded around the edges.

There are so many new and updated controls in this release. I didn’t have time to explore them all. Let’s take a closer look at a few of the ones I have been experimenting with.

Spreadsheet & Ribbon Controls

These controls are definitely the biggest and most impressive piece of the 13.2 release. Here’s a screenshot of the two controls together from the included ‘Formulas’ sample.

devexpress aspnet 1

A completely custom ribbon control can be created with a series of RibbonTab, RibbonGroup and RibbonCommand items in the HTML markup or dynamically in the code behind. This Data tab:

devexpress aspnet 2

was created with this markup:

<dx:RibbonTab Name="Data" Text="Data">
        <dx:RibbonGroup Name="Common" Text="Common">

Pretty straightforward, I think.

The RibbonTabs and all of their children are created within the spreadsheet control, and each type of RibbonCommand control knows how to act upon the selected cells in the spreadsheet. So, right out of the box, developers get a ton of Excel functionality in their applications, no extra coding is necessary.

Here is a high-level listing of the features of the Spreadsheet control.

  • Automatically Generated UI
  • Automated Formula Calculation Engine
  • Built-in Spreadsheet Functions
  • Cell References and Formatting
  • Cell and Cell Ranges
  • Rows and Columns
  • Charting, Pictures
  • Worksheet Management

Having this kind of functionality in a web application is pretty amazing.

Batch Editing in Grid

Now in both WebForms and MVC, you can support batch editing in the ASP.NET Grid control. Change the Mode property to Batch and updates on the client side will be sent to the server when the user clicks Save. As changes are being made in the control, edits are shown in green.

devexpress aspnet 3

No more round-trips as each record needs to be updated on the server. Just a little data binding and a few SQL commands and you are ready to go.

Token Box

The last new control I want to write about is the Token Box. The Token Box is a new editor control that can auto-complete multiple values from a list. This is something you commonly see online for adding tags or filters to a search. Here is the Token Box sample with a few list item values selected.

devexpress aspnet 4

If I remove one and then start searching for a new value, I get a filtered list in a dropdown list.

devexpress aspnet 5

You can set the filtering mode to either a Starts With or a Contains style of filtering. You can also specify whether custom tokens not available in the list can be entered by the user.  The control in the sample is bound to an xml file with bindings set for Text (name) and Value (email address).

<dx:ASPxTokenBox ID="ASPxTokenBox1" runat="server" Width="100%" DataSourceID="AddressBookXml" TextField="Name" ValueField="Email">
<asp:XmlDataSource ID="AddressBookXml" runat="server" DataFile="~/App_Data/Contacts.xml" XPath="//Contacts/*" />


These are a few of the highlights of the new ASP.NET release from DevExpress, but it really just scratches the surface. Go check it out for yourself. There is a free 30 day trial available for all of DevExpress’ .NET products with full support available during the trial period.

Happy coding!


Disclosure of Material Connection: I received one or more of the products or services mentioned above for free in the hope that I would mention it on my blog. Regardless, I only recommend products or services I use personally and believe my readers will enjoy. I am disclosing this in accordance with the Federal Trade Commission’s 16 CFR, Part 255: “Guides Concerning the Use of Endorsements and Testimonials in Advertising.

The Dew Review – DevExpress WPF Subscription – 2013.1 Release


I have been using the latest release (2013.1) of DevExpress’ WPF Subscription over the last several weeks on my new Ultrabook, and I have had a great time exploring the expansive collection of tools and controls included in the suite. I have only used a fraction of the available controls available in this release, but I have been very impressed with everything I have been able to test drive so far.

What’s New

DevExpress has been building WPF controls for a long time now, but I cannot remember the last release with so much new stuff included. Here’s a quick rundown of the new features in 2013.1:

  • Getting Started Tutorial (New – Online)
  • Data Grid (Enhanced)
  • Chart Control Wizard (New)
  • Map Control (Enhanced)
  • Property Grid (New)
  • Row Multi-Select in Grid Lookup Control (New)
  • Range Control Integration in Scheduler Control (New)
  • Design-Time Extensions (SmartTags in the Designer) (New)
  • Scaffolding Wizards (New)
  • WPF Data Source Wizard (New)
  • Instant Layout Assistant (VS2012 Only) (New)
  • Icon Library w/VS Integrated Image Picker (New)
  • Windows UI Style Controls (New)
  • Touch Enabled Theme (New)
  • Window Visual Effects (New)
  • Touch-Friendly Date Picker Control (New)
  • Touch-Friendly Range Control (New)
  • Visual Studio Template Gallery

Quite a list, eh?

I will focus this article on a few of the coolest (in my opinion) features: the Template Gallery, the Windows UI Style Controls, and the Touch-Enabled Theme.

Template Gallery

DevExpress now integrates their own Template Gallery into Visual Studio. Under the DevExpress menu, you will find an ‘All Platforms’ submenu containing ‘New Project’ and ‘New Item’ menu items.


Selecting either of these launches the Template Gallery. The project templates are divided into WPF Common, WPF Business Solutions, and WPF Windows UI Solutions.


The Business Solutions are project templates that create Word and Outlook applications with main windows that are modeled after Microsoft Word and Outlook, each very functional. Here is a screen shot of the Word style application running with no extra code added:


There is a full ribbon control filled with controls that manipulate the rich text editor. Everything I tried works as expected.

The ‘New Item’ Template Gallery window provides the following list of item templates to select:

  • WPF Common
    • DXWindow
    • DXRibbonWindow
    • DXSplashScreen
    • UserControl
  • WPF Views for MVVM
    • Tabbed MDI View
    • Business Object View
    • Collection View
  • WPF View Models for MVVM
    • Blank View Model
    • Business Object View Model
    • Collection View Model
  • WPF Data Models for MVVM
    • Entity Framework Data Model

Each of the item templates has its own wizard to assist in binding to existing or new data sources. MVVM out-of-the-box… nice. Hopefully, we will have the same kinds of choices built into Visual Studio’s New Item dialog soon.

Windows UI Style Controls

Selecting the Tile Application project from the DevExpress Template Gallery will create a WPF project that looks like a Windows UI Style app. Run the project for the first time and here is what you will see:


It is a full-screen WPF desktop application with no close button or other window chrome. If you didn’t alt-tab back to Visual Studio and see the application’s icon in the Windows Desktop taskbar, it would be hard to tell the difference. The Windows 8 look-and-feel is provided by the DevExpress TileLayoutControl and groups of TileControls.

This is an MVVM application with two views (in addition to MainWindow.xaml), two view models and a sample data source used as the model.


Touch-Enabled Theme

A new theme called TouchlineDark was added to support touch screen PCs and tablets. By changing the dx:ThemeManager.ThemeName to TouchlineDark in MainWindow.xaml from the previous section, the whole app switches to the new theme.


By default, DevExpress WPF controls styled with this theme will be larger and more touch-friendly, as can many of the standard WPF controls from Microsoft. Here’s a shot of the DevExpress WPF Data Grid using TouchlineDark I found in the online documentation.



As you can see, the WPF Subscription from DevExpress has everything a developer could ask for to create great-looking line-of-business (LOB) or Windows UI Style applications in as little time as possible. With advanced support for MVVM, data binding, theming and simple but powerful controls, the suite will be an integral part of my developer toolbelt for my next WPF project.

Happy coding!


Disclosure of Material Connection: I received one or more of the products or services mentioned above for free in the hope that I would mention it on my blog. Regardless, I only recommend products or services I use personally and believe my readers will enjoy. I am disclosing this in accordance with the Federal Trade Commission’s 16 CFR, Part 255: “Guides Concerning the Use of Endorsements and Testimonials in Advertising.


The Dew Review – DXTREME: Cross-Platform Application Dev Tools by DevExpress

DevExpress has released a new set of cross-platform tools that enable developers to create rich web applications targeting mobile and desktop browsers. DXTREME is the name of the new package that aims to make developers more productive in these scenarios.

Just how easy is it to jump in and build a simple application? I have had little experience developing for platforms other than Windows and Windows Phone, and I have been wanting to find a way to target iOS and Android. So, when I was asked to take a look at DXTREME, I jumped at the opportunity.

Installation and Getting Started

Installation was quick and painless, as is the case with all DevExpress tools (see my review of their WPF suite). After installing, a new DevExpress template category is added in Visual Studio 2012’s New Project dialog. In there, select the  DXTREME 12.2 Application Project template to get started.


The default project contains quite a few files. App.html is the default page and acts as the container for all of your views. Index.html is the default view loaded by App.html. Each of these html files has a corresponding .js and .css file. The navigation bar for DXTREME apps has its files located under layoutsNavbar. The default navigation buttons are Home and About (which loads the included About.html file). The datadb.js file performs data retrieval for the app.


Data Retrieval

I am a big fan of the ASP.NET Web API, and I wanted to see how easily I could get a DXTREME application to work with a Web API data source. I downloaded the Contact Manager Web API sample and running in IIS Express on port 8081. Getting the data in my app was as simple as adding this code to db.js.

 1: $(function() {
 2:     ContactSample.db = new{
 3:         url: "http://localhost:8081/api/",
 4:         sources: {
 5:             contacts: {
 6:                 read: "Contacts.json"
 7:             }
 8:         }
 9:     });
 10: });

The included DevExpress JavaScript libraries have functions to retrieve data from different types of data sources. The next step is to make the contact data available by calling the data function from the ViewModel (index.js).

 1: ContactSample.index = function(params) {
 3:     var viewModel = {
 4:         contacts: {
 5:             store: ContactSample.db.contacts
 6:         }
 7:     };
 9:     return viewModel;
 10: };

The View

DXTREME uses knockout.js for binding data in views to the ViewModels. So, the last thing to do to get the main page up and running is adding a few lines of code to index.html.

 1: <div data-role="view" data-name="index" data-title="Home">
 2:     <div data-target-placeholder="content" >
 3:         <h2 style="padding: 4px">My Contacts</h2>
 4:         <p style="padding: 2px">Contact name, email and twitter handle.</p>
 5:         <div data-bind="dxList: { dataSource: contacts }">
 6:             <div data-dx-role="template" data-dx-name="item">
 7:                 <div data-bind="uri: 'ContactDetail/{ContactId}'">
 8:                     <div data-bind="text: Name"></div>
 9:                 </div>
 10:             </div>
 11:         </div>
 12:     </div>
 13: </div>

Now when we run the app, we get a list of contacts from the Web API service in our app. The page can be viewed in simulators for iPad, iPhone, Android or Android tablets. There are also options to view the simulators in portrait or landscape mode. This is what our page looks like in the iPhone simulator.


Navigation is also very easy to accomplish in DXTREME. I added a second page to display contact details for a selected contact name with very little effort.


You can download the entire project here.

The Path Forward

As a next step in your DXTREME learning experience, I recommend downloading a trial version here, and then head over to the DXTREME Learning Center. There is a simple app walkthrough with code and a simulator as well as detailed documentation around more advanced controls, data access, routing and navigation.

I enjoyed building with DXTREME and plan to use it on a couple of personal projects in the near future. I recommend giving the tools a try for yourself.


Disclosure of Material Connection: I received one or more of the products or services mentioned above for free in the hope that I would mention it on my blog. Regardless, I only recommend products or services I use personally and believe my readers will enjoy. I am disclosing this in accordance with the Federal Trade Commission’s 16 CFR, Part 255: “Guides Concerning the Use of Endorsements and Testimonials in Advertising.