Mehul Harry's DevExpress Blog

This Blog


Mehul Harry is the DevExpress Web Program Manager. Follow him on twitter: @Mehulharry

Subscribe (RSS, Email)


June 2015 - Posts

  • ASP.NET MVC - Form Layout - Code Usability Improvement (Shipping in v15.1)

    Available now in the DXperience v15.1 release, we've introduced a useful improvement for working with the DevExpress MVC Form Layout extension.

    Now it's much easier to configure a nested extension.

    Form Layout - MVC

    The DevExpress MVC Form Layout extension is great because it helps you to create beautiful forms.

    The Problem

    The Form Layout extension is a container control where it embeds other controls within it.

    The problem is when you want to access one of these nested/embedded controls. To do this, previously, you would have to write some code like this:

    settings.Items.Add(i => {
       i.NestedExtensionType = FormLayoutNestedExtensionItemType.ComboBox;
       var cbSettings = (ComboBoxSettings)itemSettings.NestedExtensionSettings;
       cbSettings.Properties.ValueType = typeof(int);

    Solution - Lambda Expression

    Now with v15.1, it is simple because you can configure it using a lambda expression:

    settings.Items.Add(i => {
      i.NestedExtension().ComboBox(s => {
         s.Properties.ValueType = typeof(int);

    The new approach benefits you because you do not need have reference type or a separate variable for settings and properties.

    And there's less code to write which makes the code more readable!

    Demo sample

    Check out the an example of this code here:

    MVC Form Layout Demo

    What do you think of this code improvement? Drop me a line below, thanks!

    Your Next Great .NET App Starts Here

    Year after year, .NET developers such as yourself consistently vote DevExpress products #1.

    Experience the DevExpress difference for yourself and download a free 30-day trial of all our products today: (free support is included during your evaluation).

  • ASP.NET Rich Text Editor - Using DocVariable to Add Custom Data and Charts (Shipping in v15.1)

    In the "What's new for ASP.NET v15.1" webinar, I showed the mail merge like features of the new DevExpress ASP.NET Rich Text Editor. Click the image below to see the webinar video:

    In this blog post, I'll explain some more details about this great new functionality.

    Fields Support

    In the DevExpress ASP.NET Rich Text Editor (ASPxRichEdit), document fields are special placeholders for non-static data that might change (be updated on field update). These placeholders are replaced with actual data when the document is rendered for display or print. Using fields, you can automate different aspects of your document, such as auto page numbering, inserting actual dates and times, etc. The default Mail Merge ribbon tab can be used to work with fields (create, update, switch between field display modes). There are six field codes:

    • DATE - Inserts the current date and time.
    • TIME - Inserts the current time.
    • HYPERLINK - Enables you to navigate to another location or to a bookmark.
    • NUMPAGES - Inserts the total number of pages.
    • PAGE - Inserts the number of the page containing the field.
    • DOCVARIABLE - Enables you to programmatically insert complex content when this field is updated.


    The DevExpress ASP.NET Rich Editor (ASPxRichEdit) enables you to store custom information in the document using document variables. To insert a document variable in the document, use the DOCVARIABLE field code.

    The DOCVARIABLE field code has the following syntax:

    { DOCVARIABLE "variable name" "argument1" "argument 2"... }

    Argument1, Argument2, etc. are optional parameters.

    How to insert a DOCVARIABLE field

    To add the Docvariable field code to your RTF doc:

    1. Press Ctrl+F9 to insert a new field
    2. write the DOCVARIABLE keyword, space and a name of a variable

    Calculate the field value

    To calculate a value of this field in ASPxRichEdit:

    First, override the CalculateDocumentVariable event.

    In the handler, you can calculate a field result. Get a variable name and arguments (if they are defined) from the event args. Then set the Handled and Value properties. The Value property can have the string or Document types. If it’s set with a string then this string will be inserted as a field result.

    If you want to insert some advanced content, you can set the Value property with a Document instance. So, other rich-text document can be inserted as a field result in a current rich-text document.

    Here's an example:

    protected void DemoRichEdit_CalculateDocumentVariable(object sender, CalculateDocumentVariableEventArgs e) {
            switch(e.VariableName) {
                case "Chart":
                    var sales = GetSales(e.Arguments[0].Value);
                    DocumentImageSource chart = DocumentImageSource.FromStream(CreateChart(sales));
                    RichEditDocumentServer srv = new RichEditDocumentServer();
                    e.Value = srv.Document;
                    e.Handled = true;
                case "CommonSales":
                    var commonSales = GetCommonSales(e.Arguments[0].Value);
                    e.Value = commonSales.ToString("C");
                    e.Handled = true;


    Try this feature online now:

    DevExpress ASP.NET RichEdit demo - Document Variables Support


    Your Next Great .NET App Starts Here

    Year after year, .NET developers such as yourself consistently vote DevExpress products #1.

    Experience the DevExpress difference for yourself and download a free 30-day trial of all our products today: (free support is included during your evaluation).

  • ASP.NET MVC - Secondary enhancements (Shipping in v15.1)

    Now that the DevExpress v15.1 release is available, I wanted to highlight 4 smaller enhancements that you may not have seen:

    Minor Enhancements

    1. GridView - Provide the capability to use the Search Panel in Custom Data Binding mode.

    A new SearchPanel property has been added to the GridViewModel class.

    The property's type (DevExpress.Web.Mvc.GridViewSearchPanelState) exposes the following properties:

    • ColumnNames
    • Filter
    • GroupOperator

    (more info)

    2. PivotGrid - Provide a way to customize control settings before export.

    The new MVCxPivotGridExportSettings.BeforeExport property allows you to customize settings before exporting.

    (more info)

    3. DevexpressEditorsModelBinder - Support binding multiple values selected in MVC Extension editors to a Model's collection-type property.

    DevExpressEditorsBinder now supports binding to complex collection-type models and model properties, in a similar manner as the default model binder (DefaultModelBinder) does.

    (more info)

    4. Binary Image Column Editing

    The DevExpress MVC BinaryImage extension can now provides editing features. It has a built-in upload functionality that allows users to upload an image direct to the server and set the BinaryImage column. And you can use it within the DevExpress MVC GridView extension. Simply set up your BinaryImage column and choose your settings:

        settings.Columns.Add(c => {
            c.FieldName = "Photo";
            c.ColumnType = MVCxGridViewColumnType.BinaryImage;
            var properties = (MVCxBinaryImageEditProperties)c.PropertiesEdit;
            properties.ImageHeight = 170;
            properties.ImageWidth = 160;
            properties.ImageSizeMode = ImageSizeMode.FitProportional;
            properties.CallbackRouteValues = new { Action = "BinaryImageColumnPhotoUpdate", Controller = "Editing" };
            properties.EditingSettings.Enabled = true;
            properties.EditingSettings.UploadSettings.UploadValidationSettings.MaxFileSize = 4194304;

    Check out this onlie demo to learn more.

    What's new in v15.1

    The DevExpress ASP.NET MVC extensions have gotten some major new upgrades and enhancements in the v15.1 release. Check out the full list here:

    And be sure to check out the latest addition to our MVC suite:

    New Rich Text Editor

    V15.1 includes our newest MVC Extension – the DevExpress Rich Text Editor for MVC. Like its WebForms counterpart, this extension allows you to introduce powerful word processing capabilities to your next MVC app. The Rich Editor ships with a comprehensive set of text formatting options and a rich collection of Microsoft Word-inspired features.

    DevExpress MVC Rich Text Editor - Online demo


    Your Next Great .NET App Starts Here

    Year after year, .NET developers such as yourself consistently vote DevExpress products #1.

    Experience the DevExpress difference for yourself and download a free 30-day trial of all our products today: (free support is included during your evaluation).

  • DevExtreme HTML5 Widgets - WAI-ARIA Accessibility (Coming soon in v15.1)

    With the v15.1 release, the DevExtreme HTML 5/JS widgets now include support for the WAI-ARIA standard (and support screen readers).

    WAI-ARIA standard

    To understand what WAI-ARIA is, I highly recommend reading this excellent introduction by the WAI-ARIA Overview

    I've included a short paragraph here:

    WAI-ARIA, the Accessible Rich Internet Applications Suite, defines a way to make Web content and Web applications more accessible to people with disabilities. It especially helps with dynamic content and advanced user interface controls developed with Ajax, HTML, JavaScript, and related technologies. Currently certain functionality used in Web sites is not available to some users with disabilities, especially people who rely on screen readers and people who cannot use a mouse. WAI-ARIA addresses these accessibility challenges, for example, by defining new ways for functionality to be provided to assistive technology. With WAI-ARIA, developers can make advanced Web applications accessible and usable to people with disabilities. -WAI-ARIA Overview,

    Technical solution

    DevExtreme widgets supports WAI-ARIA standard with the v15.1 release. WAI-ARIA is a web oriented standard, developed in W3C for making web applications accessible. It solves the problem by using special html-attributes in DOM elements which give assistive technologies ability to interact with the page content.

    DevExtreme widgets set aria-attributes and change them according to the current control's state.

    With DevExtreme v15.1, the end-user can:

    • Interact with widgets without a monitor using the tested screen reader application
    • Interact with widgets without a mouse using our accessible keyboard navigation

    Supported Screen Readers

    DevExtreme v15.1 supports the NVDA open source screen reader - one of most popular among open source assistive technologies. However, you may use any other assistive technology supporting the WAI-ARIA standard.

    Register for v15.1 webinar

    To see all the new features coming out for the v15.1 release, sign up for the "What's New for DevExtreme (v15.1)":

    Click here to register

    I'm preparing to do a fantastic presentation and I hope to see you in the webinar.

    Create highly responsive web apps for touch-enabled devices and traditional desktops.

    From desktops to mobile devices, DevExtreme HTML5 Data Grid delivers the flexibility you’ll need to build apps that reach the widest audience and deliver touch-first user experiences to power your next great interactive website.

    Download a free and fully-functional version of DevExtreme now: Download DevExtreme


Chat is one of the many ways you can contact members of the DevExpress Team.
We are available Monday-Friday between 7:30am and 4:30pm Pacific Time.

If you need additional product information, write to us at or call us at +1 (818) 844-3383


DevExpress engineers feature-complete Presentation Controls, IDE Productivity Tools, Business Application Frameworks, and Reporting Systems for Visual Studio, Delphi, HTML5 or iOS & Android development. Whether using WPF, ASP.NET, WinForms, HTML5 or Windows 10, DevExpress tools help you build and deliver your best in the shortest time possible.

Copyright © 1998-2018 Developer Express Inc.
All trademarks or registered trademarks are property of their respective owners