The DevExpress ASP.NET File Manager control is getting three new features that help you deliver a great file management experience for your end-users in the current v14.2 release:

• Custom Columns
• Custom Toolbar and Buttons
• Context Menu

Custom Columns

protected void FileManager_DetailsViewCustomColumnDisplayText(object source, FileManagerDetailsViewCustomColumnDisplayTextEventArgs e) {
   long fileLenghtInKiloBytes = e.File.Length / 1024;
   e.DisplayText = string.Format("File path: '{0}', File size: {1} KB", e.File.RelativeName, fileLenghtInKiloBytes);
}

Custom Toolbar and Buttons

ASP.NET & MVC

A few months ago we presented a webinar on what went into building the ASP.NET DX Hotels demo that starting shipping in the v14.1 DevExpress ASP.NET Subscription. The feedback was overwhelming, you wanted to see exactly how to put together the stunning screens and functionality. Well it is with much excitement that we are announcing just that...  Building DX Hotels. In this two part back to back presentation you will learn how to start from a blank Visual Studio project and implement the search functionality via a user control, build the core screens, use CSS and client side tricks to achieve the rich intuitive interface and build and embed reports.  Scheduled for February 3 & 4, 10am EST, click here to register and reserve your spot.

With the v14.2 release, you can now create a menu that behaves like the one at devexpress.com:

This slick new feature of the DevExpress ASP.NET Menu control is called 'full-width submenu'. And yes, the feature was inspired by the devexpress.com main menu.

Benefits

A full-width menu can be very useful and provides benefits like:

1. A large popover (overlay) menu that spans the whole browser width. Great way to get the user's attention.
2. The full-width spans to different browser sizes.
3. It's great for menus that have many options.

ASP.NET & MVC

The new full-width submenu feature of the DevExpress ASP.NET Menu control is available for both ASP.NET WebForms and MVC.

Semantic Markup

Another great feature of the DevExpress ASP.NET Menu is that uses semantic lightweight markup! I described in an earlier post about our menu control providing semantic markup. And the great thing is that you don't even need to use the 'RenderMode' property anymore.

The DevExpress ASP.NET Menu control provides semantic markup by default.

Try Online Demo

DEMO - ASP.NET Menu - Full-width Submenu

One of the aspects of my role here at DevExpress is to share all the cool tools, and TestCafe certainly fits that description.  Since its inception TestCafe has taken a unique fresh approach to functional testing web sites and web based applications. When v14.2 was released a number of major enhancements joined the list of world class features that sets TestCafe apart from other products.

Ray has been blogging recently about some of the items included but we thought "wouldn't it be cool to show people in real time?". So that's what I'm going to do....  Join me on Tuesday Jan 20th as I demonstrate the new features in v14.2 and show how easy it is to extend the power of TestCafe through extensions that allow testing of custom controls and 3rd party libraries. Click here for all the details and registration.

In the next major release of DevExpress (v15.1), we are going to drop support for Internet Explorer 7 (IE7).

Here's why...

Legacy browsers like IE7 are a headache for web developers to support. This includes control and framework developers like DevExpress. The older browsers prevent us from moving forward.

We have a lot of code that supports IE7 and IE7 only, be that code HTML, CSS, JavaScript, or C#. Dropping support for IE7 means that we no longer have to carry that code forward and we no longer have to provide support for that browser version in the new controls and features we will be releasing this year.

And there are other reasons to drop IE7 now...

Less than 1% Usage

Worldwide usage of IE7 is less than 1%.

For less than 1 in 100 browsers, providing support is no longer cost-effective, whether that is DevExpress maintaining support for its range of older and newer controls, or you as developer of a web application.

How long will Microsoft support IE7?

ZDNet reports that Microsoft is about to drastically limit which IE versions it will support in its operating systems. In essence, only the latest browser version for a given OS version:

Starting January 12, 2016, Microsoft is changing its list of supported Windows configurations. Effective that date, the company said in an announcement today, “only the most recent version of Internet Explorer available for a supported operating system will receive technical support and security updates.” - Ed Bott, ZDNet

Feedback

I would love to hear your feedback on this decision. How will this affect you?

Are you still supporting IE7? If you still have to for the indefinite future, you can use v14.2 of our ASP.NET controls, but my advice is to move forward. Once IE security updates are no longer available, your risk window will start to expand.

Leave me a comment below or email me directly: mharry@devexpress.com

Thanks!

When we started designing and building DataExplorer our goal was to create a tool that will allow .NET developers to build companion iOS apps for their existing applications, while reusing the same data exposed via an OData web service. This is a very big and complex task and obviously we haven't yet implemented everything we envisioned.

After a few successful releases under our belt, it's now planning time for the future of DataExplorer. There are many great enhancements we know we can address -- anything from data editing to more sophisticated form layouts -- but we'd love to hear about the features that you need from DataExplorer and would like us to consider. Please take a very short survey (or leave your comments below) and let us know.

Your opinion is very important for us - at the end of the day we really want to build a product that our customers love and that makes their lives easier!

Now that we, DevExpress, have started to maintain the ASP.NET AJAX Control Toolkit and are almost ready to release the first version under our stewardship, the question about support needs to be addressed.

Open Source

The ASP.NET AJAX Control Toolkit is and will remain Open Source Software (OSS). It will not become a DevExpress product, and so we will not provide support through our usual support channels. After all, those channels are for customers who have paid for their product subscriptions and the support is provided as part of that.

Instead, like all OSS, support for the AJAX Control Toolkit will be a community-driven effort. We'd like to encourage you to get involved with the project and provide feedback, pull requests, possible fixes, etc.

Report Issues

Naturally, we accept that not everyone will be able to debug and analyze and fix bugs, so there must be a way for interested developers to report issues. To do so, please register or sign-in to CodePlex and create an issue ticket using this link:

ASP.NET AJAX Control Toolkit - Issues

Features/Fixes/Improvements

This list of issues will also become the major source of suggestions that our team will use to help improve the ASP.NET AJAX Control Toolkit. For suggestions, we will be updating the status of such items on this list. Not only that, but the CodePlex issues site provides some nice features such as tracking, voting, and so on.

We hope that, as users of the AJAX Control Toolkit, you will participate in this community-driven effort to help drive the Toolkit forward. Thanks!

All the features described in this post are available in both the free and non-free versions of the DevExpress MVVM framework (included in the DevExpress WPF component suite).

There are often situations where you need to represent an enumeration as an IEnumerable for use as a data source. A common solution in those cases is to convert the enumeration to an IEnumerable by calling a Enum.GetValues() method in a property of your ViewModel or implementing a custom IValueConverter descendant use in the binding expression for the control’s ItemsSource property.

To avoid implementing more properties for your ViewModel or writing any extra code, we introduced a special behavior: EnumItemsSourceBehavior that generates items based on a specified enumeration type and assigns them to any control supporting the ItemsSource property.

Imagine, you have the following enumeration.

   1:publicenum UserRole {

   2:     [Image("pack://application:,,,/Images/Admin.png"), 

   3:      Display(Name = "Admin", Description = "High level of access")]

   4:     Administrator,

   5:     [Image("pack://application:,,,/Images/Moderator.png"), 

   6:      Display(Name = "Moderator", Description = "Average level of access")]

   7:     Moderator,

   8:     [Image("pack://application:,,,/Images/User.png"), 

   9:      Display(Name = "User", Description = "Low level of access")]

  10:     User

  11: }

Where Image is an attribute that allows assigning an image to a corresponding member of the enumeration and Display is a standard Display attribute that provides a general-purpose attribute that lets you specify localizable strings for types and members of entity partial classes.

Alternatively, you can assign these parameters (each enum value’s image and display information for Name and Description) using the DevExpress Fluent API. The DevExpress Fluent API is especially convenient if you aren’t able to modify the exist enum. Below you will find sample code illustrating how to accomplish this task with the Fluent API and MetadataLocator:

   1:privatevoid OnAppStartup_UpdateThemeName(object sender, StartupEventArgs e) {

   2:     DevExpress.Xpf.Core.ApplicationThemeHelper.UpdateApplicationThemeName();

   3:     MetadataLocator.Default = MetadataLocator.Create().AddMetadata<Metadata>();

   4: }

   1:publicclass Metadata {

   2:publicstaticvoid BuildMetadata(EnumMetadataBuilder<UserRole> builder) {

   3:         builder

   4:             .Member(UserRole.Administrator)

   5:                 .DisplayName("Admin")

   6:                 .Description("High level of access")

   7:                 .ImageUri("pack://application:,,,/Images/Admin.png")

   8:             .EndMember()

   9:             .Member(UserRole.Moderator)

  10:                 .DisplayName("Moderator")

  11:                 .Description("Average level of access")

  12:                 .ImageUri("pack://application:,,,/Images/Moderator.png")

  13:             .EndMember()

  14:             .Member(UserRole.User)

  15:                 .DisplayName("User")

  16:                 .Description("Low level of access")

  17:                 .ImageUri("pack://application:,,,/Images/User.png")

  18:             .EndMember();

  19:     }

  20: }

And using the Fluent API and EnumMetadataType attribute:

   1:publicclass EnumWithDisplayNameMetadata : IEnumMetadataProvider<UserRole> {

   2:publicstaticvoid BuildMetadata(EnumMetadataBuilder<UserRole> builder) {

   3:         builder

   4:             .Member(UserRole.Administrator)

   5:                 .DisplayName("Admin")

   6:                 .Description("High level of access")

   7:                 .ImageUri("pack://application:,,,/Images/Admin.png")

   8:             .EndMember()

   9:             .Member(UserRole.Moderator)

  10:                 .DisplayName("Moderator")

  11:                 .Description("Average level of access")

  12:                 .ImageUri("pack://application:,,,/Images/Moderator.png")

  13:             .EndMember()

  14:             .Member(UserRole.User)

  15:                 .DisplayName("User")

  16:                 .Description("Low level of access")

  17:                 .ImageUri("pack://application:,,,/Images/User.png")

  18:             .EndMember();

  19:     }

  20:  

  21:void IEnumMetadataProvider<UserRole>.BuildMetadata(EnumMetadataBuilder<UserRole> builder) {

  22:         builder

  23:             .Member(UserRole.Administrator)

  24:                 .DisplayName("Admin")

  25:                 .Description("High level of access")

  26:                 .ImageUri("pack://application:,,,/Images/Admin.png")

  27:             .EndMember()

  28:             .Member(UserRole.Moderator)

  29:                 .DisplayName("Moderator")

  30:                 .Description("Average level of access")

  31:                 .ImageUri("pack://application:,,,/Images/Moderator.png")

  32:             .EndMember()

  33:             .Member(UserRole.User)

  34:                 .DisplayName("User")

  35:                 .Description("Low level of access")

  36:                 .ImageUri("pack://application:,,,/Images/User.png")

  37:             .EndMember();

  38:     }

  39: }

   1: [EnumMetadataType(typeof(EnumWithDisplayNameMetadata))]

   2:publicenum UserRole {

   3:     Administrator,

   4:     Moderator,

   5:     User

   6: }

To learn more about the DevExpress Fluent API see the DevExpress MVVM Framework. Using DataAnnotation attributes and DevExpress Fluent API post on our blog.

To assign the EnumItemsSourceBehavior to a ComboBoxEdit at design time, perform the following steps:

1. Open the ComboBoxEdit Smart Tag panel using the Smart Tag glyph at the top right corner of the control

2. Open the MVVM tab, click the EnumItemsSourceBehavior item in the «Add Behavior» menu and specify the EnumItemsSourceBehavior’s properties in order, starting from the EnumType property.

3. Build and run the app to notice the changes to the combobox items at runtime.

4. You can further customize the editor’s ItemTemplate for the required aesthetic. For example,

The XAML for the above is the following:

   1:<dxe:ComboBoxEdit

   2:Name="comboBoxEdit"

   3:EditValue="{Binding SelectedRole, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}"

   4:IsTextEditable="False"

   5:ApplyItemTemplateToSelectedItem="True"

   6:Margin="10">

   7:<dxmvvm:Interaction.Behaviors>

   8:<dxmvvm:EnumItemsSourceBehaviorEnumType="{x:Type common:UserRole}"SortMode="DisplayName"/>

   9:</dxmvvm:Interaction.Behaviors>

  10:<dxe:ComboBoxEdit.ItemTemplate>

  11:<DataTemplate>

  12:<Grid>

  13:<Grid.RowDefinitions>

  14:<RowDefinition/>

  15:<RowDefinition/>

  16:</Grid.RowDefinitions>

  17:<TextBlockText="{Binding Name}"/>

  18:<TextBlockText="{Binding Description}"Grid.Row="1"FontSize="9"/>

  19:</Grid>

  20:</DataTemplate>

  21:</dxe:ComboBoxEdit.ItemTemplate>

  22:</dxe:ComboBoxEdit>

To represent the enumeration’s element as an item, EnumItemsSourceBehavior uses the EnumMemberInfo class with the following structure:

   1:publicclass EnumMemberInfo {    

   2:     ...

   3:publicstring Name { get; private set; }

   4:publicbool ShowName { get; private set; }

   5:publicobject Id { get; private set; }

   6:publicstring Description { get; private set; }

   7:public ImageSource Image { get; private set; }

   8:publicbool ShowImage { get; private set; }

   9:     ...

  10: }

Therefore, the control’s items list and the selected value of the control are of EnumMemberInfo type. For example, the ComboBoxEdit in the above example contains an EnumMemberInfo value in its SelectedItem.

EnumItemsSourceBehavior members

• ItemTemplate - gets or sets a template that defines the presentation of items contained within the list (this property is defined for any descendants of the standard ItemsControl (ListBox, ListView, etc). If you use DevExpress editors, you’ll need to override the ItemTemplate property)
• EnumType - gets or sets the type of the specified enumeration
• UseNumericEnumValue - gets or sets whether an enumeration element can be identified by numeric value
• SplitNames - gets or sets whether an enumeration element’s name can be split
• NameConverter - gets or sets a converter used to provide the item’s display value.
• SortMode - gets or sets how the control’s items will be sorted.

A corresponding example that illustrates how to use the EnumItemsSourceBehavior class in action is available here.

A tooltip hint displayed on form editors can help you deliver useful information to your end-users. You can now provide a tooltip with the DevExpress ASP.NET Spin Edit and Date Edit controls when displaying range values.

The new feature is part of the v14.2 release. DevExpress ASP.NET Spin Edit and Date Edit controls now display a tooltip hint when an end-user tries to input a value that doesn't fall into a valid range into the editor:

Why?

The DevExpress ASP.NET Spin Edit and Date Edit controls provided a way to restrict an end-user (based on your editor settings). For example, you could set min and max values for the Spin Edit, and an end-user could not enter a value outside this range.

However, an end-user did not get any visual indication. So if they entered a value outside the range then they had no indication from the editor about what went wrong and why the value they entered was reset.

So, in the latest release (v14.2), the DevExpress ASP.NET Spin Edit and Date Edit controls display a tooltip hint with an indication that the value being input is incorrect.

This feature improves the usability for end-users working with your websites that use DevExpress ASP.NET Date Edit and Spin Edit controls.

How to enable

Good news, you do not need to set any property/event/method to turn this feature on. We enable it automatically when the Spin Edit or Date Edit control has configured range settings.

Spin Edit:

ASPxSpinEdit.MinValue

ASPxSpinEdit.MaxValue

Date Edit:

ASPxDateEdit.MinDate

ASPxDateEdit.MaxDate

This is not a validation!

Please do not confuse this feature with client-side validation.

Client-side validation is usually performed when an editor loses focus: for example, when you click the Submit button.

The main difference between client-side validation and this tooltip is that the tooltip does not wait till an end-user has already finished editing a value in the editor. Instead, the tooltip is displayed at the exact moment when you are trying to input an invalid value. If the value falls within the range then we hide the tooltip. However, if you did not corrected an out-of-range value before the editor lost focus, then the editor will also hide the tooltip and just restore a previously entered valid value.

ASP.NET and MVC

This functionality of the DevExpress ASP.NET Spin Edit and Date Edit controls is available for both ASP.NET WebForms and MVC.

Test drive the online demos to see this functionality in action here:

• Date Range Picker
• MVC: Date Edit in Date Range mode

We would love to hear your feedback about this new usuability improvement of the DevExpress ASP.NET Spin Edit and Date Edit controls. Drop us a line below, thanks!

This series shows how to setup a real world application using the MVC framework together with the DevExpress MVC extensions and Xpress Persistent Objects (XPO) as data layer.

I will take the WebForms based XPressMe Blog Tool and show how to create an MVC version.

Part 1

Check out part 1 where I will give a quick tour on the WebForms version to see what needs to be build. Next I will create the MVC project using the DevExpress Template Gallery, and I will move over the assets like images, JavaScript and CSS and setup the _Layout.cshtml file which resembles the WebForms MasterPage.

I will also explain and prepare a flexible reusable architecture which incorporates the DTO pattern into the MVC project to let our Xpress Persistent Objects (XPO) data layer work efficiently with the MVC framework.

I will end with a working homepage showing the navigation using the Menu extension and the blog posts using the DataView extension which were previously entered in the WebForms version of the XPressMe application.

Part 2

Part 2 will continue by setting up the PopupControl as well as the FormLayout extensions for inserting and editing a blog post. I will also explain some technical changes we need to make because of the different architectures of WebForms and MVC. At the end of this screencast, you will see the MVC version of the XPressMe Blog tool which allows you to insert and edit posts.

The XPressMe Blog tool

The XPressMe Blog tool is a small responsive real world application I have built in 3 earlier webinars. They cover things like setting up a data model using Xpress Persistent Objects (XPO) and its modeling tool, setting up responsive CSS with the Skeleton CSS framework and media queries, and using the DevExpress ASP.NET controls in a responsive layout. Furthermore I am showing some JavaScript tricks demonstrating the rich client-side API of the DevExpress ASP.NET controls.

You can watch these videos on our YouTube channel at:

• Creating an ASP.NET Blog Engine - Part 1
• Creating an ASP.NET Blog Engine – Part 2
• Creating an ASP.NET Blog Engine – Part 3

All the source code available on GitHub

If you want to test-drive the code yourself, it is all available on my GitHub account at https://github.com/donwibier/XPressMe where you can get the repo or just get a zip file with the source.

Let me know if you have built anything cool in your version of XPressMe or if you have questions about it.

Two new features of the DevExpress ASP.NET HTML Editor control now help your end-users with pasting and inserting media content. The features are part of the v14.2 release:

• Media Content Inserting
• Clipboard Pasting Processing

Media Content Inserting

The DevExpress ASP.NET HTML Editor allows you to insert different types of media content using its built-in toolbar buttons, dialogs, and media file selectors. The following media types are supported:

• Video
• Audio
• Flash
• YouTube video

To enable these features, activate the corresponding Enabled options in the editor's SettingsFlashSelector, SettingsVideoSelector, and SettingsAudioSelector settings.

Clipboard Pasting Processing

The DevExpress ASP.NET HTML Editor allows you to apply different formatting for the pasted HTML content. You may use one of three default modes provided with the PasteMode property:

• SourceFormatting: Formatting of pasted content is retained.
• MergeFormatting: Formatting of pasted content is mostly discarded. However, emphasis formatting, such as bold and italic text, is retained.
• PlainText: Formatting of pasted content and non-text elements (such as pictures or tables) is discarded.

End-users can select one of these modes on the fly using buttons that appear in the top-right corner of the editor. To enable this functionality, set the EnablePasteOptions property to true:

And the DevExpress ASP.NET HTML Editor provides a special client-side BeforePaste event that allows you to easily customize formatting behavior.

ASP.NET & MVC

New features of the DevExpress ASP.NET HTML Editor are available for both ASP.NET WebForms and MVC platforms. Check out our online demos and try this functionality right now in your browser window:

• ASP.NET WebForms: Online Demo - Insert Media Content
• ASP.NET WebForms: Online Demo - Paste Formatting
• ASP.NET WebForms: Online Demo - Manual Paste Formatting
• MVC: Online Demo - Insert Media Content
• MVC: Online Demo - Paste Formatting
• MVC: Online Demo - Manual Paste Formatting

Validation of input data is important for your websites. Here's a great XKCD comic that drives home this point:

Now, check out the video for my recent webinar on ASP.NET MVC's Unobtrusive Validation feature:

What's it about?

The video begins with me giving a short description, history, and a few other details about the ASP.NET MVC Unobtrusive Validation feature.

Then, Don Wibier (DevExpress Technical Evangelist), shows three technical demos about:

1. The standard ASP.NET MVC feature for unobtrusive validation from Microsoft.
2. How DevExpress MVC Extensions build on top of the standard ASP.NET MVC feature.
3. WebForms developers also have great validation features available to them with DevExpress ASP.NET WebForms controls. And Don shows a small WebForms example to highlight these features.

Helpful links

• Unobtrusive Client Validation - DevExpress Documentation
• Validation Overview - DevExpress Documentation
• OWASP - Data Validation
• Client-side vs Server-side Validation in Web Applications

Watch the video and then drop me a line below with your thoughts. Thanks!

A couple of months ago, our videographer, Jeff Cosby, went to interview Mike Palgon about his experience with DevExpress ASP.NET controls in creating a website for an organization that helps cancer survivors. Here’s Jeff’s story:

Meet Mike Palgon. He’s a web developer and long-time customer of DevExpress, and he works for HIMformatics, a Healthcare Information Technology consulting firm. We wrote up a case study on Mike a few years back and we recently caught up with him in Atlanta to check out a website he redesigned using DevExpress ASP.NET. The website is cancersurvivorlink.org and it serves three main functions. First, it’s a place for people to go learn about childhood cancer survivorship. It has a deep knowledgebase along with hundreds of links for users to find out everything from treatment to other support programs. Second, it allows users to upload and store their health documents, so they’re kept safe and in one central location. And finally, it allows users to share those documents with their healthcare providers in order to get the best possible care moving forward. Mike used our ASP.NET suite of controls to help with functionality and development time.

Watch this video to learn more about how the website and how Mike built it.

Join us in helping these organizations move forward with a donation today!

Children’s Healthcare of Atlanta Children's Healthcare of Atlanta is a not-for-profit organization that provides specialized care to kids from all walks of life.

CURE Childhood Cancer CURE Childhood Cancer is dedicated to conquering childhood cancer through funding targeted research and through support of patients and their families. (See more here.)

Camp Sunshine Camp Sunshine provides programs throughout the year to give children with cancer the opportunity to enjoy normal activities like swimming, horseback riding, arts and crafts, and making friends!

Analyzing large amounts of data is rather difficult. We have added a number of features to make this much easier with our dashboard component. Coming in the next minor release we will add support for Amazon Redshift. The beauty of this addition is that there really isn’t much to do to hook up a dashboard to Redshift:

It is simply a new data provider that will be available soon!

Why The Fuss?

Great question! Amazon Redshift“is a fast, fully managed, petabyte-scale data warehouse solution that makes it simple and cost-effective to efficiently analyze all your data using your existing business intelligence tools” (emphasis added). In essence the DevExpress Dashboard Component can interact with a system that can potentially store petabytes of data and allow the type of analysis that can reveal real insight. Clearly there are memory limitations on the client, so how can this be accomplished? The key is in the amount of data that the dashboard needs to render the actual elements: it is generally much less than the whole data set on the server. In an earlier release we added Server Mode support to the dashboard. Let me show you how this works in the context of Redshift.

Consider the following dashboard (bound to a Redshift Database):

In a traditionally bound dashboard, any filtering would trigger aggregations to happen on the web server (or client machine) directly in memory in order to return updated visualizations. In contrast, the server mode setting essentially “dumbs-down” the web server (or client) by offloading the filtering and aggregation to the provider (or database server). Any click to filter in the case of this revenue dashboard generated a query that was returned to the server:

This is also the case for the Amazon Redshift provider! In fact, the query trace above was generated by exploring several different combinations of filters. Each time a filter was set, a new query was generated and sent back to the provider.

A Word on Speed

As you peruse the log of queries issued back to Redshift, notice that we are completely at the mercy of the database provider. In other words, we can only render the dashboard elements as fast as the data is returned (notice a couple of queries took ~3s to complete). Please use common sense and best practices for optimizing query speed in order to reduce refresh latency of dashboard elements.

We are very excited about this new addition!

As always, if there are any comments and/or questions, feel free to get a hold of me!

Seth Juarez
Email: sethj@devexpress.com
Twitter: @SethJuarez