Mehul Harry's DevExpress Blog

This Blog

News


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

Subscribe (RSS, Email)

Archives

September 2017 - Posts

  • DevExtreme MVC Client-Side Validation: [Required] Attribute Changes (17.1.6)

    We received some feedback from our customers about an issue with how the DevExtreme MVC CheckBox Control handles client-side validation.

    The main issue they found was that when using the MVC CheckBox control on a form that needed to be submitted, the user had to check the box before they could submit the form even if the field is not marked as 'Required' on your data model.

    This was an odd issue because when we looked at the server-side model, we didn't find any attribute that would've require the "true" value only. So then why does our CheckBox control enforces the 'required' check?

    DevExtreme Client-Side Validation

    A Few Words About DevExtreme Validation

    DevExtreme ASP.NET MVC Controls are, basically, client-side JavaScript DevExtreme widgets wrapped in native ASP.NET MVC server-side controls. Client-side editors have a set of validation rules that are mapped to attributes of the server-side model. This way, the editors can generate validation rules based on the attributes automatically.

    The Root of the Problem

    After some debugging and research, we discovered that the 'Required' attribute is implicitly attached to non-nullable properties, such as the Boolean property in our case. This was confirmed in a note to the AddImplicitRequiredAttributeForValueTypes property in ASP.NET MVC documentation.

    So what happens if we use the native MVC check box control, will it still display the same issue? Turns out, no, it does not because the native check box control ignores the 'required' check.

    Then we compared the results of validating a value against the 'required' rule in DevExtreme with that in jQuery Unobtrusive used in ASP.NET MVC projects by default. Here's what we found:

    Value jQuery Unobtrusive DevExtreme Match
    null invalid invalid
    number valid valid
    empty string invalid invalid
    non-empty string valid valid
    DateTime valid valid
    true valid valid
    false valid invalid

    The crucial difference turned out to be in how the "false" value is handled. jQuery Unobtrusive validation accepts both "true" and "false" values of a Boolean property. DevExtreme validation, which adopts the HTML5 behavior, considers "false" an invalid value, and as a result, doesn't let the user submit the form unless the CheckBox is checked.

    Now that the mystery is uncovered, we found two possible ways to work around this issue:

    1. set to "false" the AddImplicitRequiredAttributeForValueTypes property
    2. use a nullable bool type instead of bool type in your application

    Unfortunately, both of these would not work for all users.

    Solution

    To provide a good solution that will work for all customers, we're introducing a new global flag called Compatibility.Validation.IgnoreRequiredForBoolean in the v17.1.6 release.

    When set to true, the DevExtreme validation engine will ignore the Required validation rule for bool type, which is the proper mode for MVC apps. When set to false, it keeps the previous DevExtreme or HTML5 like behavior. The default setting will be set to false in versions 17.1.x.

    We've updated our project templates and you'll find this new flag in:

    • "Global.asax" file for classic MVC on VB or CS
    protected void Application_Start()
    {
      DevExtreme.AspNet.Mvc.Compatibility.Validation.IgnoreRequiredForBoolean = false;
      // ... the rest of your code ...
    }
    Protected Sub Application_Start()
    {
      DevExtreme.AspNet.Mvc.Compatibility.Validation.IgnoreRequiredForBoolean = False
      ' ... the rest of your code ...
    }
    • "Startup.cs" file for ASP.NET Core MVC
    public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
      DevExtreme.AspNet.Mvc.Compatibility.Validation.IgnoreRequiredForBoolean = false;
      // ... the rest of your code ...
    

    How to use Required for bool type when IgnoreRequiredForBoolean is enabled?

    You can decorate your model properties with the [DevExtremeRequired] attribute. This attribute supports the HTML5 behavior for bool type on a client and on the server side. For all other value types, it's behavior is similar to using the 'Required' attribute.

    Beware: will change in v.17.2

    The global flag is "false" by default in v17.1, however, it'll change to "true" in v17.2.

    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

  • DevExtreme on GitHub: Pre-Releases, Sprints, & Upcoming Demos

    Back in March 2017, we began to publicly host our DevExtreme source code on GitHub. One of the benefits of GitHub source hosting is that we can provide developers with 'pre-release' builds easily.

    Pre-Release

    I'm happy to announce that DevExtreme pre-release builds are now available. A pre-release build allows you to experience some of the new controls and features that will be part of future releases. In fact, a pre-release is now available that has DevExtreme v17.2 features. The DevExtreme v17.2 final release is will be available later this year.

    The pre-releases are available for download on the DevExtreme GitHub releases page:

    https://github.com/DevExpress/DevExtreme/releases

    What's in the pre-release?

    The current pre-release is labeled '17.2 Sprint 6' and includes improvements for DataGrid, Scheduler, and Editor controls. You can read the release notes here:

    https://github.com/DevExpress/DevExtreme/releases/tag/17.2.0-sprint.6

    However, this is not the first v17.2 pre-release build. We published the '17.2 Sprint 5' a few weeks ago and it includes our new (upcoming) data visualization widget: dxFunnel.

    Now, as software developers, you'll know that not every build will have something interesting. That said, I recommend that you 'watch' our repo so that you do not miss any pre-release news.

    Sprints

    Our DevExtreme dev team uses Agile and works in sprints that last two weeks. Therefore, you can expect a pre-release about every two weeks.

    NPM & Bower packages too

    You can download pre-release packages from NPM:

    npm i devextreme@17.2.1-pre-17248

    and Bower too:

    bower install devextreme#17.2.1-pre-17248

    Watch the repo

    Click the "watch" button on the DevExtreme GitHub repo and you will get notifications when we release a new preview build.

    Warning

    Please be aware of the following regarding 'pre-release' software:

    Products marked as pre-release (Beta, Community Technology Preview "CTP", or Release Candidate "RC") may contain deficiencies and as such, should not be considered for use or integrated within any mission critical software application. DevExpress may discontinue availability of its pre-release software, limit or modify software functionality, or eliminate support services at any time.

    Our intention with pre-release software is for the early-adopters who want to preview, test, and provide feedback to help us improve upcoming features, controls, etc.

    I recommend reading our 'pre-release' software web page.

    Preview Demos

    We're also working on publishing our demos on GitHub too. This will be available as a new devextreme demos repo soon and allow you to test pre-release features demos.

    What do you think about the DevExtreme pre-releases on GitHub? Drop me a line below.

    Email: mharry@devexpress.com

    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

LIVE CHAT

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 info@devexpress.com or call us at +1 (818) 844-3383

FOLLOW US

DevExpress engineers feature-complete Presentation Controls, IDE Productivity Tools, Business Application Frameworks, and Reporting Systems for Visual Studio, along with high-performance HTML JS Mobile Frameworks for developers targeting iOS, Android and Windows Phone. 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-2017 Developer Express Inc.
All trademarks or registered trademarks are property of their respective owners