Day: December 4, 2013

Introduction

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.

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:

was created with this markup:

<dx:RibbonTab Name="Data" Text="Data">
    <groups>
        <dx:RibbonGroup Name="Common" Text="Common">
            <Items>
                <dx:SPDataSortAscendingRibbonCommand>
                </dx:SPDataSortAscendingRibbonCommand>
                <dx:SPDataSortDescendingRibbonCommand>
                </dx:SPDataSortDescendingRibbonCommand>
            </Items>
        </dx:RibbonGroup>
    </groups>
</dx:RibbonTab>

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.

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.

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

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">
</dx:ASPxTokenBox>
<asp:XmlDataSource ID="AddressBookXml" runat="server" DataFile="~/App_Data/Contacts.xml" XPath="//Contacts/*" />

Summary

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.