Mehul Harry's DevExpress Blog

This Blog


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

Subscribe (RSS, Email)


October 2017 - Posts

  • DevExtreme ASP.NET MVC: New Strongly-Typed HTML Helpers (Lambda Expressions Ftw!) - v17.2

    Strongly-typed HTML helpers are great when you're constructing your view in ASP.NET MVC. Helper methods like the built-in @Html.TextBoxFor(m => m.FirstName) have been around for a long time. And they provide benefits like compile-time checking of views, Razor support, and enable the use of data annotations to automatically configure important options like validation rules.

    Since we released the DevExtreme ASP.NET MVC Controls, they have included a set of HTML helper methods to help you do things like setting up the DevExtreme editors. For example, here we're creating a DevExtreme MVC DateBox control that will be bound to our OrderDate field from the model:

    @Html.DevExtreme().DateBoxFor(m => m.OrderDate)

    In one line, we're creating the editor and binding it, magic!

    More Lambda Expressions

    In the next major release, v17.2, we've extended the ability to use expressions within our HTML helpers. We have added more lambda expressions to our larger widgets. This allows to use them to configure items like:

    • DataGrid and TreeList columns
    • DataGrid summaries
    • PivotGrid fields
    • Items of our Form control

    Therefore, the DataGrid control can now be declared using this syntax:

        .Columns(columns => {
            columns.AddFor(m => m.CategoryName);
            columns.AddFor(m => m.ProductName);
            columns.AddFor(m => m.ProductSales);
        .Summary(s => s.TotalItems(total => { 
                .AddFor(m => m.ProductSales) 

    Notice the generic type argument of the DataGrid<Sale>() and AddFor calls configuring columns and total summary without the use of any string constants.

    Previously, the column would be declared using strings like so: columns.Add().DataField("CategoryName");. The new lamdba expressions approach is better for the reasons listed below and makes you more productive.

    IntelliSense support

    One of the best things about using lambda expressions is that you get IntelliSense in your Razor views based on the type:

    Data Annotations

    A nice feature of the AddFor method is that it infers useful information about the property. This information includes the property name and data type.

    And we also process the model's data annotations. For example, if any members of the Sale class are annotated with the Display attribute, then it will be automatically assigned as the column caption:

    public partial class Sale { 
        [Display(Name = "Category")] 
        public string CategoryName { get; set; }
        [Display(Name = "Product")] 
        public string ProductName { get; set; } 
        [Display(Name = "Sales")] 
        public Nullable<decimal> ProductSales { get; set; } 

    Better Validation

    If your data is annotated with Validation attributes, such as [Required], [StringLength], [Range], etc, then DevExtreme MVC will honor and apply them to column validation options of DataGrid or TreeList. So, when using expressions, you get client-side validation configured automatically for you.

    Typed Form Control!

    The new strongly-type HTML helpers also enables us to implement 'highly-requested' customer scenarios like this one for a 'typed Form control' sample:

    @(Html.DevExtreme().Form<Employee>().Items(items => { 
        items.AddSimpleFor(m => m.FirstName); 
        items.AddSimpleFor(m => m.LastName); 
        items.AddGroup().Caption("Address").Items(addressItems => { 
            addressItems.AddSimpleFor(m => m.Address); 
            addressItems.AddSimpleFor(m => m.Region); 
            addressItems.AddSimpleFor(m => m.PostalCode); 

    Optional but recommended

    You don't have rewrite your existing code because this new functionality is completely optional. You can continue to use strings, and existing projects will work fine after the upgrade. I suspect that after reading about the benefits above that you'll consider using them in a future project. Which is what I recommend, that you use expressions for newer projects.

    Lambda expressions are available in both the classic ASP.NET MVC and the new ASP.NET Core versions of our library. You can use them regardless of the app language, be it C# or VB.NET.

    We like them so much that we've updated all of our demos and project templates to use expressions (where possible).

    What do you think about the strongly-typed HTML helper improvements in the next release? Drop me a line below.


    Twitter: @mehulharry

  • DevExpress ASP.NET Scheduler's New Adaptive Features - (coming soon in v17.2)

    Check out these great new 'adaptive' features of the DevExpress ASP.NET Scheduler in the v17.2 release. What do I mean by adaptive?

    Adaptive web design (AWD) promotes the creation of multiple versions of a web page to better fit the user's device, as opposed to a single version that other web design techniques use. Adaptive web design encompasses a range of other strategies that can be combined with responsive web design. - Wikipedia

    Adaptive web design helps you to address the various size screens that your users may be using.

    In the v17.2 release, we maximized the ASP.NET Scheduler's views and visual elements to adapt to the width of their parent container. Adaptive Layout is now supported for the following ASP.NET Scheduler elements:

    Agenda View

    The Agenda View is now fully adaptive. The layout is automatically adjusted to the current client width for the following Agenda View elements:

    • “Date Header” column
    • “Appointment Interval” column
    • “Main Appointment Content” column
    • “Resources” column

    Therefore, you can view information about appointments without horizontal scrolling on different screen sizes:

    Edit Appointment Form

    The Form Layout Control is now used as a container for the Edit Appointment Form editors.

    This allows the Scheduler to automatically re-organize the Edit Appointment Form content based on the available client area:

    View Selector

    The Scheduler's View Selector panel also provides a slick feature where it'll place buttons in a drop-down menu when there is not enough space to display them all:

    Scrolling Fixed Headers

    We've also improved (or fixed depending on your point of view) the vertical scrolling in the Agenda view. Now the “Date” headers’ content remains visible on screen as a fixed header while scrolling:

    View Visible Interval

    The View Visible Interval width can be automatically adjusted to an available client width by changing date-time formats:

    WebForms & MVC

    These new adaptive features will be available for our ASP.NET WebForms and MVC versions of the ASP.NET Scheduler control. And they are part of the v17.2 release.

    Which of the adaptive enhancements are you most excited about? Drop me a line below.



    Twitter: @mehulharry

  • DevExtreme TreeList Improvements (v17.2)

    Check out these new features of the DevExtreme HTML5 TreeList widget in the upcoming v17.2 release.

    1. Recursive Selection Mode

    The TreeList will include a new recursive selection mode that enables you to select or deselect an entire branch with only a single click. A click on a node can select or deselect all the children nodes too. Enable the feature using the selection.recursive option:

    selection: {
        // …
        recursive: true

    Here you can see that when we select a child node then the TreeList recursively selects the associated parent nodes as well:

    2. Built-in Search

    If your TreeList contains thousands of records then it's difficult to find a specific node. That's why in the v17.2 release we've added search functionality within the header filter to speed up filtering.

    The headerFilter.allowSearch option is available at the widget options root level and within column’s options. This allows you to enable header filter search for all columns or only for a specific column.

    treeListOptions: {
        headerFilter: {
            allowSearch: true //all columns
        columns: [{
            headerFilter: {
                allowSearch: true //specific column

    In this animation below, you can see how time-saving the header filter search functionality can be:

    What if there are too many columns in your TreeList? Simply enable the search box in the column chooser to get the same search functionality for columns:

    columnChooser: {
        allowSearch: true

    This makes finding columns a breeze and the feature is available regardless of the column chooser mode:

    3. New Lazy Loading Mode

    With the upcoming release, you can optimize the TreeList’s performance by delaying the load of collapsed items (and their children). In this mode, you can load child nodes using the following methods:

    1. loadDescendants() – loads children nodes recursively

    2. loadDescendants(keys) - loads the specific node’s children recursively

    3. loadDescendants(keys, childrenOnly) – loads only a single level of the specific node’s children or all its children recursively depending on the childrenOnly argument value

    4. getNodeByKey Method

    Also in this release, you can obtain a TreeList’s node using the key by calling getNodeByKey(keyParam):


    This call returns the full node which includes the level, key, the “visible” and “hasChildren” flags, children array, and an object representing the node's parent.

    Angular, ASP.NET MVC/Core, & More!

    Note that all these new features are available in the TreeList Angular component, ASP.NET MVC and .NET Core control, and jQuery widget too.

    Try it now

    The new features of our TreeList widget is included in the v17.2 pre-release that is available via npm right now. Please note that this pre-release may contain some bugs and is not intended to be used in production:

    npm install devextreme@17.2.1-pre-17291

    Learn more about DevExtreme's pre-releases in this blog post.

    What do you think about the TreeList improvements in the next release? Drop me a line below.


    Twitter: @mehulharry

  • HTML5 JavaScript DataGrid and PivotGrid Enhancements (v17.2)

    The DevExtreme DataGrid and PivotGrid widgets are getting enhancements for you and your end-users. In the v17.2 release we're adding UI features that help you when working with data in our grids:

    Built-in Search in Header Filter

    The Header Filter is a great way to filter the data in the grid because it gives you all the unique values of the column. However, if there are many distinct values, it can be annoying to scroll through the list trying to find a particular value.

    In the next 17.2 release, we've added a search text box that allows to filter data inside the dxDataGrid and dxPivotGrid's header filters. This gif shows the new feature in action:

    DevExtreme Grid Header Filter

    You can still control whether searching is enabled in the header filter using the dxDataGrid.headerFilter.allowSearch and dxPivotGrid.headerFilter.allowSearch options.

    Built-in Search in Column/Field Chooser

    We've also added the search functionality to the dxDataGrid's column and dxPivotGrid's field chooser:

    DevExtreme Grid Field Chooser

    Customize these features through the dxDataGrid.columnChooser.allowSearch and dxPivotGrid.fieldChooser.allowSearch options.

    Built-in Date-Time Filter for dxDataGrid

    The dxDataGrid’s DateTime columns can be now filtered using the date and time:

    DevExtreme Grid Date-Time Filter

    Additional minor improvements

    • The validationCallback function now provides access to the current dxDataGrid row data via the data parameter when a Custom validation rule is used  
    • The dxPivotGrid field’s sortBy option can now accept the none value to disable local sorting

    Angular, ASP.NET MVC/Core, & More!

    Note that all these new features are available in the DataGrid and PivotGrid Angular components, ASP.NET MVC and .NET Core controls, and jQuery widgets too.

    Try it now

    The new features of our dxDataGrid and dxPivotGrid widgets are included in the v17.2 pre-release that is available via npm right now. Please note that this pre-release may contain some bugs and is not intended to be used in production:

    npm install devextreme@17.2.1-pre-17273

    Learn more about DevExtreme's pre-releases in this blog post.

    What do you think about the grid improvements in the next release? Drop me a line below.


    Twitter: @mehulharry

  • DevExtreme ASP.NET MVC Controls – Improvements & New Features in Data Sources (coming soon in v17.2)

    The DevExtreme ASP.NET MVC Controls provide a powerful data layer to help you read and write data with our controls. The data layer is invisible but serves an important role for your apps. In fact, we've got a great documentation data layer topic that I recommend reading:

    In this blog post, I'll highlight the changes coming to the DevExtreme data layer in the upcoming v17.2 release. We're introducing a set of changes and improvements that are primarily driven by customer feedback.

    New behavior of Url generation of .Mvc() and .WebApi() data sources

    In the v17.1.5 release, I talked in detail about the change to our DataSource URL generation. Please take a look at this blog post that describes our motivation and the changes: DevExtreme ASP.NET MVC Controls: DataSource URL Improvements (17.1.5).

    Since August 2017, many customers have shared projects and code with our support team and it's good to see that many have enabled the new mode and are happy with it.

    Warning: In the v17.2 release, we're changing the default value of the flag controlling that behavior (UseLegacyRouting) to false. Meaning, we don't want to use legacy routing but the new and improved approach. However...

    This could BREAK your existing projects. This potential breaking change can be avoided. However, I recommend that you test your existing projects as we've seen good feedback from many customers. You can test this change using the new flag now by downloading v17.1.5+ release, which is available now.

    If you're not ready for the change when v17.2 is released then simply set the UseLegacyRouting to true:

    For ASP.NET MVC 5 applications, in Global.asax.cs:

    protected void Application_Start()
      DevExtreme.AspNet.Mvc.Compatibility.DataSource.UseLegacyRouting = true;
      // ... the rest of your code ...

    For .NET Core apps, in Startup.cs:

    public void Configure(IApplicationBuilder app, 
                          IHostingEnvironment env, 
                          ILoggerFactory loggerFactory) 
      DevExtreme.AspNet.Mvc.Compatibility.DataSource.UseLegacyRouting = true;
      // ... the rest of your code ...

    In v17.2, all DevExtreme demos and project templates have been updated to use the new routing mode. This, you'll find, works more predictably and in accordance with the standard MVC @Url.Action and @Url.RouteUrl constructs.

    Support for Areas

    Areas are an ASP.NET MVC feature used to organize related functionality into a group as a separate namespace (for routing) and folder structure (for views). Using areas creates a hierarchy for the purpose of routing by ... Areas provide a way to partition a large ASP.NET Core MVC Web app into smaller functional groupings. - Microsoft Documentation

    Also in v17.2, we've added support for 'areas'. So both the .Mvc() and .WebApi() data sources now provide the .Area() configuration option in addition to .Controller() and .Action(). This means that you can now reference API controllers in different areas.

    RemoteController: consume API controllers from a different domain/host

    If API controllers were located on another domain, it was problematic to use them. Customers had to use JavaScript instead of strongly-typed Razor syntax.

    In 17.2 we improve this by introducing a new kind of data source: RemoteController. Basically it is the same as .Mvc() or .WebApi() but instead of specifying routing options (controller, action, etc), you specify direct Urls pointing to anywhere on the web.

    Here's an example:

        .DataSource(ds => ds.RemoteController()

    Updated DevExtreme.AspNet.Data library with new features

    DevExtreme.AspNet.Data, the open-source library used by DevExtreme ASP.NET MVC Controls for data access has been updated to version 1.3 with a number of enhancements:

    • Support for server-side "select" operation (PR #125)
    • Published LoadResult and Group classes (PR #130)

    What do you think about the DevExtreme ASP.NET MVC Controls? Drop me a line below.


    Twitter: @mehulharry

    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

  • New Bootstrap Controls for ASP.NET Core 2.0 (CTP release)! - Join the pre-release party

    Earlier this year, we released the DevExpress ASP.NET Bootstrap controls for the ASP.NET WebForms framework. We developed these new set of innovative controls to provide a great experience when used within the Bootstrap framework. If you're not familiar with our Bootstrap controls, please take a look at these past blog posts.

    After releasing these new controls for WebForms, one of the biggest questions we got was, "What about ASP.NET Core and MVC?"

    Well, I'm here to announce another great innovative web offering from DevExpress ...

    ASP.NET Core...Cross platform

    Version 2.0 of the new ASP.NET Core framework was recently released and I'm happy to announce our new set of controls specifically for this new framework: 'the DevExpress ASP.NET Bootstrap controls for ASP.NET Core 2.0'. That's the unofficial name for now.

    These new controls have a new API and architecture that takes advantage of the ASP.NET Core framework. However, they do keep a similar set of features as the existing ASP.NET Bootstrap controls for WebForms.

    The combination of ASP.NET Core framework and DevExpress Bootstrap controls means:

    1. Write modern web application using C# (or your favorite supported .NET language)
    2. Cross-platform support: Linux, MacOS, and Windows
    3. Use a wide set of Bootstrap themes (
    4. Full support for MVC features: Data Annotation attributes, model binding, unobtrusive validation, and more.
    5. DevExpress elegance, power, ease, and features!

    Help Test CTP Release

    The first release of these controls is a CTP (community technology preview). It's available today and we'd love for you to test them in your ASP.NET Core 2.0 projects.

    By testing the new controls and providing us feedback, you'll help us improve them before the final release.

    Getting started

    We've made the getting started experience easy using our NuGet server. Take a look at this step-by-step guide:

    Then play around with the online demos:

    Provide feedback

    Once you've integrated them into your project, please provide us feedback via the excellent DevExpress Support Center.

    What's included?

    Nearly all 20+ of the existing DevExpress ASP.NET Bootstrap controls are available in this CTP release. This includes controls like the GridView, Navigation controls, Editors, and more. However, the FormLayout, UploadControl, and the Charts are not available yet.

    Also check out these projects that help you to get started:

    A GitHub starter project with necessary packages and references

    A Docker image that contains the GitHub starter project running on Ubuntu!

    The web is about choices...

    Currently, we also offer another set of controls for the ASP.NET Core framework, the DevExtreme ASP.NET MVC Controls.

    The main goal of the DevExpress ASP.NET Bootstrap Controls for ASP.NET Core is full compatibility with Bootstrap themes. If you plan to create a Bootstrap application then use the Bootstrap Controls whether for ASP.NET WebForms or ASP.NET Core.

    The DevExtreme ASP.NET MVC Controls support ASP.NET MVC (3+) and ASP.NET Core (1.x and 2.0). Keep in mind that they're based on client-side JavaScript controls. If you are a JavaScript dev then you may prefer the 'DevExtreme ASP.NET MVC Controls'. If you are a .NET dev then you may prefer 'the DevExpress ASP.NET Bootstrap Controls for ASP.NET Core'.

    What about ASP.NET MVC?

    At this time, our new Bootstrap controls for ASP.NET Core 2.0 will not support previous versions of the ASP.NET MVC framework. That is not to say that they will never support those frameworks. We will keep an eye on your feedback and decide in the future.

    Bootstrap 4 Beta

    The Bootstrap team just announced the 'Bootstrap 4 beta' release.

    Good news, we are supporting Bootstrap 4 for our new Bootstrap controls for ASP.NET Core 2.0 out of the box.

    Join the webinar

    On Tuesday, October 24th, 2017 at 10am, I'll show you how to get started with the new DevExpress ASP.NET Bootstrap Controls for ASP.NET Core 2.0. You'll learn about the NuGet package(s), boilerplate project, changing Bootstrap themes, and features of the controls. We'll also cover ASP.NET Core features such as Model Binding, Data Annotations, and Unobtrusive Validation.

    Sign up for the live webinar here: New Bootstrap Controls for ASP.NET Core 2.0

    What do you think of the CTP release of the DevExpress Bootstrap Controls for ASP.NET Core 2.0? Drop me a line below.


    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).

  • Use DevExtreme ASP.NET MVC Controls easily in ASP.NET Core 2.0

    February 2018 Update: Take a look at this webinar: Use DevExtreme ASP.NET MVC Controls easily in ASP.NET Core 2.0

    These File->New project templates can also help you get started.

    In August 2017 Microsoft released the ASP.NET Core 2.0 framework. This major update packs a lot of new features as their announcement blog post makes clear:

    This release features compatibility with .NET Core 2.0, tooling support in Visual Studio 2017 version 15.3, and the new Razor Pages user-interface design paradigm. For a full list of updates... -Microsoft Announcement blog post

    We've been working hard to provide compatibility with this new release and I'm happy to announce that our DevExtreme ASP.NET MVC controls now support ASP.NET Core 2.0.

    To get ASP.NET Core 2.0 in Visual Studio 2017 15.3.x, please check this link:

    To learn more details about ASP.NET Core 2.0, please see this detailed blog post:

    Get started

    To get started with ASP.NET Core 2.0 and DevExtreme MVC Controls in just a few minutes, create an ASP.NET Core 2.0 project using VS2017 and then add DevExtreme MVC Controls resources to it using this guide (see "ASP.NET Core MVC" section):

    DevExtreme ASP.NET MVC Controls: Download and Installation

    In this screenshot of the Solution Explorer, you see the necessary DevExtreme packages and files that you'll need for ASP.NET Core 2.0:

    Upgrade Existing Projects

    To upgrade your existing ASP.NET Core 1.x application that is based on *.csproj and includes DevExtreme MVC Controls, you'll need to make the following changes:

    1. Change the "TargetFramework" in your *.csproj file:
    1. Replace "Microsoft.AspNetCore.*" packages with the new "Microsoft.AspNetCore.All" meta package:
    <PackageReference Include="Microsoft.AspNetCore.All" Version="2.0.0" />

    Your csproj file should look something like this:

    Then run your upgraded project and the DevExtreme ASP.NET MVC Controls will work in ASP.NET Core 2.0:

    Razor Pages

    As part of ASP.NET Core 2.0, Microsoft also introduced 'Razor Pages', which makes page-focused scenarios easier and more productive:

    Razor Pages allow you to code without the need for a controller, for example:

    We tested the DevExtreme ASP.NET MVC Controls with the new Razor Pages feature and it works brilliantly. Here's the DevExtreme ASP.NET MVC DataGrid that's bound to a WebAPI web service in a Razor Page:

    Are you using DevExtreme MVC Controls with ASP.NET Core 2.0? I'd love to hear about it, drop me a line below. Thanks!

    Twitter: @mehulharry

    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