Quantcast
Channel: ASP.NET Team Blog
Viewing all 372 articles
Browse latest View live

ASP.NET AJAX Control Toolkit - v17.1.1 - Security Improved and Issues Fixed

$
0
0

As part of our continuous effort to find and patch security issues, we recently discovered a few vulnerabilities in the ASP.NET AJAX Control Toolkit library.

We have fixed and patched these vulnerabilities along with a few public issues in the v17.1.1 release that is now available.

I recommend that you upgrade to the latest ASP.NET AJAX Control Toolkit release as soon as possible.

Security Vulnerabilities

We discovered and fixed the following three major vulnerabilities:

  • Uploading a file with an arbitrary extension
  • A DoS attack on the server where AjaxFileUpload control is located
  • It is possible to obtain info about files outside the temporary upload folder

To protect those websites that may not have upgraded to the latest release, we have not published the details of these vulnerabilities on GitHub.

Bug fixes

We've also patched three issues that were reported to us on GitHub:

AjaxFileUpload Issue

  • Item 327 - AjaxFileUpload events have an invalid sender

HtmlEditorExtender Issues

  • Item 320 - HtmlEditorExtender generates an extra "br" tag
  • Item 324 - HtmlEditor does not show toolbar images when EnablePartialRendering=true

Update to v17.1.1 (or higher)

Please upgrade your ASP.NET AJAX Control Toolkit version to the latest version. You can download our useful installer here:

Or use the Nuget libraries:

ASP.NET AJAX Control Toolkit Nuget packages

Then give us your feedback on GitHub.

Try DevExpress ASP.NET

We’d like to thank you for installing the DevExpress Edition of the AJAX Control Toolkit and look forward to your feedback as you begin using it.

When we took over the fabulous ASP.NET AJAX Control Toolkit, our goal was to reach those web developers who want to use great web user interface controls for their web projects and DevExpress ASP.NET provides that and much more.

Try the free DevExpress 30 day trial.

Email: mharry@devexpress.com

Twitter: @mehulharry


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: DevExpress.com/trial (free support is included during your evaluation).


DevExtreme React Now Available on GitHub

$
0
0

DevExtreme React Grid

In May 2017, we announced our CTP of the DevExtreme React Grid. And since then, we've released the DevExtreme React Grid on GitHub in the DevExtreme Reactive repo:

Your feedback helps us improve these controls. So please click the 'Star' and 'Watch' links on this repo and let us know your thoughts. You'll also get updates about other future DevExtreme React controls too. So by 'watching' the repo you'd get the latest updates like this: we're about to release new Material UI templates and demos:

DevExtreme React Grid - Material UI

Distribution

The DevExtreme React Controls are only available on the NPM distribution and the development will be on this GitHub repo. They will not be included in the DevExtreme installation that you find at https://js.devexpress.com. The React framework and other supporting libraries are on GitHub and we intend to be in the same ecosystem. In fact, we've also moved DevExtreme to GitHub but DevExtreme will still have an installation available at https://js.devexpress.com.

Webinar Recap

Check out the recent 'New in v17.1: DevExtreme' webinar to learn about the DevExtreme React Grid:

More controls!

The DevExtreme React Grid was only the first of other controls that we have planned. What's next? Stay tuned to find out.

Please try the excellent DevExtreme React Grid and then let us know what you think of it.

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

Easy Theme Customization for DevExpress ASP.NET Controls

$
0
0

Back in 2014, I announced a new set of themes for our DevExpress ASP.NET and MVC controls. It goes without saying that these themes looked great, but, perhaps even better, they allowed you to easily customize the theme's base font and color. This was a huge improvement over our traditional 'classic' themes because you could now quickly create a version of one of the new themes to suit your business needs and design.

The bad news was that, in order to take advantage of this feature, you had to use our 'Theme Builder' tool.

Settings - Web.Config, API, etc.

So now for some good news! You can now simply set that base font and color for DevExpress ASP.NET and MVC controls directly from the web.config file or by using our API! The following examples work with DevExpress ASP.NET v16.2 and above.

Web.config

In your web.config, specify the 'baseColor' and 'font' settings in the themes of DevExpress section:

<configuration>
  ...<devExpress>
    ...<themes enableThemeAssembly="true"
                 styleSheetTheme=""
                 theme="Metropolis"
                 customThemeAssemblies=""
                 baseColor="Green"
                 font="30px Calibri" />
    ...</devExpress>
  ...</configuration>

Programmatic API

You can also set the base font and color using API calls:

protected void Application_PreRequestHandlerExecute(object sender, EventArgs e) {
    ...
    DevExpress.Web.ASPxWebControl.GlobalThemeBaseColor = "Green";
    DevExpress.Web.ASPxWebControl.GlobalThemeFont = "30px 'Callibri'";
}

Or in ASP.NET MVC you use the following approach:

protected void Application_PreRequestHandlerExecute(object sender, EventArgs e) {
    ...
    DevExpress.Web.MVC.DevExpressHelper.GlobalThemeBaseColor = "#00FF00";
    DevExpress.Web.MVC.DevExpressHelper.GlobalThemeFont = "30px 'Callibri'";
}

The value formats for the color work with RGB, Hexadecimal, and Color names too. Learn more here.

Limitations

Only the following themes support the changing both the base color and font: Mulberry, Moderno, Metropolis, Metropolis Blue, iOS, Material, and Material Compact.

These classic themes allow you to set the base font only: Aqua, Black Glass, Glass, Office2003Blue, Office2003Olive, Office2003Silver, PlasticBlue, RedWine, SoftOrange, and Youthful.

Documentation

Check out this excellent help documentation topic that gives even more detail:

Theming > Changing Theme Base Color and Font Settings

Demos

Try out the latest DevExpress ASP.NET demos online and experience the theme parameters change dynamically. You can use the theme options on the top right:

Then, drop me a line below on what you think about the easy way to customize a DevExpress ASP.NET theme. 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: DevExpress.com/trial (free support is included during your evaluation).

DevExtreme ASP.NET MVC Controls: DataSource URL Improvements (17.1.5)

$
0
0

Since releasing the DevExtreme ASP.NET MVC Controls in May 2017, we've received some great feedback on bugs, improvements, feature requests, etc.

And thanks to your feedback, we're improving "DataSource URL generation" in the DevExtreme v17.1.5 release. First, let's look at the feature and the problem we aim to solve:

DataSource URLs

The DevExtreme ASP.NET MVC Controls are client-side JavaScript DevExtreme controls that are wrapped in native ASP.NET MVC Server controls. Therefore, they handle things like data-binding and events differently than typical ASP.NET MVC Server controls.

Data-binding is different for client-side controls because you need a web service to deliver that data to the client-side control. With the DevExtreme ASP.NET MVC Controls, we've made that aspect easier for you by providing 'DataSources'. So whether you're using a static collection, ASP.NET Web API, OData, OLAP Cube, or read-only JSON then our DataSource objects help you to data bind them to a DevExtreme ASP.NET MVC Control. I recommend reading the excellent data-binding help topic to learn more.

Problem

Now let's dive into the specific issue and solution with DataSource URLs. The two most common ways to specify data sources for our MVC controls are connecting them to an MVC or a Web API controller:

// MVC
@(Html.DevExtreme().DataGrid()
  .DataSource(d => d.Mvc().Controller("Data").LoadAction("Get"))

or

// WebAPI
@(Html.DevExtreme().DataGrid()
  .DataSource(d => d.WebApi().Controller("Data").LoadAction("Get"))

From the earliest release candidate builds, we've used certain defaults when configuring data access in this manner. Specifically:

  1. We automatically assign the route name depending on the platform and the controller type:
ASP.NET MVC 5ASP.NET Core
.Mvc()"Default""default"
.WebApi()"DefaultApi"-
  1. For .WebApi(), we automatically configure all CRUD actions ("Get", "Post", "Put", "Delete")

While those default settings work well, we've discovered the following issues with them:

  1. Attribute routing does not work out of the box (except for .WebApi() in .NET Core because we do not assign a route name). Developers need to manually specify .RouteName(null) or .RouteName("MyRoute") to make them work.

  2. Full CRUD actions for .WebApi() are not always needed because in many cases, you may just need to display some data. To disable the generation of redundant URLs, developers have to assign .UpdateAction(null), .InsertAction(null), etc.

  3. For most WebAPI route patterns (including the one declared in the WebAPI project template), our predefined action names appear in the query string producing ugly URLs like /api/Orders?action=Get.

Solution

To solve the above mentioned issues, we're introducing a new global flag named UseLegacyRouting and its default value is set to true. This new flag will be part of the DevExtreme v17.1.5 release.

The new UseLegacyRouting flag is fully backwards compatible too.

If you set it to false, then no default route names and no default actions will be used thereby avoiding any unexpected effects we mentioned above.

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

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

For .NET Core apps, add the line to Startup.cs:

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

What to expect when the flag is set to false

Besides the improvements (working attribute routing and cleaner URLs), you may face the following changes in behavior:

  1. If you have custom routing rules declared before the default one, or using attribute routes with {controller} and {action} placeholders, then they may take precedence and change resulting URLs. You might need to specify .RouteName(...) explicitly to restore the previous behavior.

  2. For .WebApi(), insert, update, and delete action URLs won't be generated by default. You need to specify them explicitly. For example, to enable update URL, add .UpdateAction("Put") for routes based on action names or .UpdateAction(true) for routes based on HTTP verbs.

Recommendations - true or false?

I recommend that for existing projects you set the UseLegacyRouting flag to true. For new projects, or those that you'd like to upgrade to the new approach, set the flag to false. This will help you transition to future versions of the DevExtreme ASP.NET MVC controls.

We're considering changing the default value of UseLegacyRouting to false in the next major release (17.2) and we'd like your feedback.

What do you think about the DevExtreme ASP.NET MVC Controls? 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

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

$
0
0

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

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

$
0
0

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:

ValuejQuery UnobtrusiveDevExtremeMatch
nullinvalidinvalid
numbervalidvalid
empty stringinvalidinvalid
non-empty stringvalidvalid
DateTimevalidvalid
truevalidvalid
falsevalidinvalid

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

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

$
0
0

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: https://www.microsoft.com/net/core

To learn more details about ASP.NET Core 2.0, please see this detailed blog post:https://blogs.msdn.microsoft.com/webdev/2017/08/14/announcing-asp-net-core-2-0/

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:
<PropertyGroup><TargetFramework>netcoreapp2.0</TargetFramework></PropertyGroup>
  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

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

$
0
0

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

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 (https://themes.getbootstrap.com/)
  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:

https://demos.devexpress.com/aspnetcore-bootstrap/GettingStarted

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.

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: DevExpress.com/trial (free support is included during your evaluation).


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

$
0
0

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:

@(Html.DevExtreme().DataGrid()
    .DataSource(ds => ds.RemoteController()
        .Key("OrderID")
        .LoadUrl("http://www.example.com/Orders/Get")
        .InsertUrl("http://www.example.com/Orders/Insert")
        .UpdateUrl("http://www.example.com/Orders/Update")
        .DeleteUrl("http://www.example.com/Orders/Delete")
    )
)

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.

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

HTML5 JavaScript DataGrid and PivotGrid Enhancements (v17.2)

$
0
0

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.

Email: mharry@devexpress.com

Twitter: @mehulharry

DevExtreme TreeList Improvements (v17.2)

$
0
0

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

treeListInstance.getNodeByKey(8);

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.

Email: mharry@devexpress.com

Twitter: @mehulharry

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

$
0
0

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:

@(Html.DevExtreme().DataGrid<Sale>()
    .Columns(columns => {
        columns.AddFor(m => m.CategoryName);
        columns.AddFor(m => m.ProductName);
        columns.AddFor(m => m.ProductSales);
    }) 
    .Summary(s => s.TotalItems(total => { 
        total 
            .AddFor(m => m.ProductSales) 
            .SummaryType(SummaryType.Sum); 
    })) 
)

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.

Email: mharry@devexpress.com

Twitter: @mehulharry

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

$
0
0

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 website may beAdaptive web design helps you address the presentation of data on the differently-sized 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.

Thanks!

Email: mharry@devexpress.com

Twitter: @mehulharry

Search Integrated into More DevExtreme HTML5 JavaScript Widgets (v17.2)

$
0
0

The DevExtreme HTML5 JavaScript widgets provide a number of ways to help your end-users work with a large amount of data that is presented in our UI controls. For example, the data grid widget provides excellent features like paging, filtering, and searching to help you find the information you need.

With the v17.2 release, we're extending the search functionality to many of our other widgets too.

TreeView and List

With the upcoming release, we have added the searchValue option for the dxList widget. We've also extended the search capabilities for both TreeView and List widgets by adding the following options:

SearchEnabled, searchExpr, searchMode, and searchEditorOptions

Learn more about these options by reading the v17.2 documentation. In v17.1, we added Search functionality to TreeView and with v17.2, you can now customize that search further.

For example, in the code below, we've setup placeholder text for the search textbox:

treeViewOptions: {
    //...
    searchEnabled: true,
    searchMode: "contains",
    searchEditorOptions: {
        //TextBox config
        placeholder: "Search..."
    }
}

The same search textbox can be enabled for the List widget too. In this sample, we're limiting our search expression to only the "Name" and "Price" fields:

listOptions: {
    //...
    searchEnabled: true,
    searchExpr: ["Name", "Price"]
}

DataGrid and TreeList

The DevExtreme HTML5 JavaScript DataGrid and TreeList widgets also have improved search functionality. I recommend reading these two posts that dive deeper into these widgets:

One feature I'd like highlight is the updated 'column chooser' that also has search functionality now. This can help you when you have several columns in your widget. To show the search box, turn on the columnChooser.allowSearch option.

dataGridOptions: {
    //...
    columnChooser: {
        //...
        enabled: true,
        allowSearch: true
    }
}

Once enabled, you'll see the search textbox in the column chooser:

To provide quicker access to values, we have also added a built-in search box to the header filter. It can be enabled both at the widget and specific column levels:

treeListOptions: {
    //...
    headerFilter: {
        //...
        allowSearch: true //all columns
    },
    columns: [{
        //...
        headerFilter: {
            //...
            allowSearch: true //specific column
        },
    }]
}

Once enabled, you'll see the search textbox in the column's header filter:

PivotGrid

We have also integrated search into the HTML5 JavaScript PivotGrid's Header filter. It's available inside the Field Panel as well as the PivotGridFieldChooser. The Field Chooser also allows you to search by fields. Your end-user will find this useful because helps when:

  • there are a large number of fields
  • some of them are grouped by properties and are not visible
pivotGridFieldChooserOptions: {
    //...
    allowSearch: true
}

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 dxTreeView, dxList, dxTreeList, 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.2-pre-beta

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


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

Email: mharry@devexpress.com

Twitter: @mehulharry

DevExtreme Case Study: ISDK Information Systems

$
0
0

Hearing customer stories about real-world usage of our controls is a treat.

That's why I was happy to read about ISDK Information Systems use of our excellent client-side JavaScript library: DevExtreme.

Goals

The company had several big goals to address:

  • Integration and aggregation of data from disparate IT systems
  • Creation of single task center based on Microsoft SharePoint corporate portal
  • Development of visualization and monitoring tool for key programs and project and their KPIs
  • Development of mobile client for tablets and wide format devices allowing to show key aggregated data and KPI on dashboards and do quick task assignments

They chose DevExtreme and were able to achieve their goals. In fact, they were so happy with the solution that they reached out to us (and we appreciate it).

Dashboard & Mobile

ISDK Information systems has developed a solution that is fast, includes dashboards, and address their mobile clients too:

Mobile client for tablets includes dashboards for aggregated project information – target KPIs and dates, actual statuses and key issues with the ability to quickly create and assign tasks. Average mobile application response time with stable Internet connection is 1 second or less.

Here's a screenshot of their slick solution:

Read The Case Study

I recommend you read their story here:

Case Study: ISDK Information Systems

I hope this inspires you to make your own great software with DevExtreme. Do you have a story to share with us about your DevExpress usage then send me an email?

Email: mharry@devexpress.com

Twitter: @mehulharry


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: DevExpress.com/trial (free support is included during your evaluation).


New HTML5 JavaScript Filter Builder Widget (v17.2)

$
0
0

In the v17.2 release, we're introducing a powerful new widget that helps your end-users to build complex filter criteria: the DevExtreme Filter Builder widget.

DevExpress is known for great UI controls with powerful features. And if you've used other DevExpress platforms like ASP.NET then you'll be happy to hear that DevExtreme now offers this as well.

Filter Builder Helps You Find Data

The Filter Builder widget provides advanced filter and criteria options to help end-users filter data with an unlimited number of conditions combined by logical operators. Therefore, it helps you to build filter criteria using logical operators that anyone can easily understand.

By adding this ability to specify complex filters in your UI, you can save time for end-users and improve productivity when working with large amounts of data.

The following code shows how to create a filter builder:

$("#filterBuilder").dxFilterBuilder({
    fields: [ {
            dataField: "Product_Name"
        }, {
            caption: "Cost",
            dataField: "Product_Cost",
            dataType: "number",
            format: "currency"
        }, {
            dataField: "Product_Current_Inventory",
            dataType: "number",
            caption: "Inventory"
        }
    ],
    value: [
        ["Product_Current_Inventory", "<>", 0],"Or",
        [
            ["Product_Name", "contains", "HD"],
            ["Product_Cost", "<", 200]
        ]
    ]
});

Filter Other Widgets

The Filter Builder widget is a stand-alone widget that can be combined to be used to filter other DevExtreme widgets whose data source supports filtering. For example, widgets like the HTML5 JavaScript DataGrid or TreeList:

widgetInstance.filter(filterBuilderInstance.option("value"));

The following code demonstrates how to use filter editor with DevExtreme List, PivodGrid (excluding XmlaStore), TreeView and other DevExtreme widgets:

var widgetDataSource = widgetInstance.getDataSource();
widgetDataSource.filter(filterBuilderInstance.option("value"));
widgetDataSource.load();

To help you get started with our new Filter Builder widget, we have prepared several technical demos and also included the Filter Builder in the DevAV demo. These demos will be available with the v17.2 release.

Common Usage Scenario

A social network is a good example where complex filter expressions can be helpful. People often set up a filter when looking for a person they want to find, and they generally specify the name, age, country, town, professional position, etc. - the more conditions they specify the faster they find a person they were looking for.

We even 'dogfood' (aka test and promote) our own products internally. And after using it internally for our own projects, we are positive that you'll love this new widget as much as we do.

Here is an example of how Filter Builder widget can be used to filter developer tasks:

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

The new dxFilterFuilder widget will be available on all the frameworks we support: Angular, jQuery, Knockout, ASP.NET MVC, and .NET Core.

Try it now

The new dxFilterBuilder 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.2-pre-beta

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


What do you think about the new Filter Builder widget? Drop me a line below.

Email: mharry@devexpress.com

Twitter: @mehulharry

ASP.NET GridView Enhancements - Merged Groups, Header Filter Search, & More (Coming soon in v17.2)

$
0
0

In the next major release, v17.2, we're adding some great new features to the DevExpress ASP.NET GridView. All the features below will be available for both the ASP.NET WebForms and ASP.NET MVC versions of our GridView:

Merged Column Grouping

We're introducing a new way to display grouped rows in the ASP.NET GridView control. Currently, you can display grouped rows so that the first grouped column is displayed above the other columns and the data is nested underneath:

Starting with v17.2, you can now use the new option that will remove the nested group rows and merge them into a single 'grouping line':

This saves space and also provides more space to display data rows. This is an option so both display types are available, however, I prefer the merged grouping. This feature was inspired by our excellent WinForms Grid control.

Header Filter Search

We're also improving the Grid's Header Filter feature by adding a search text box. Take a look at this animation to see it in action:

The new 'header filter search' can help your end-users save even more time when searching through a large number of records.

Easier Exporting API

Another improvement in the next release is that we've moved the export functionality from the ASPxGridViewExporter to ASPxGridView class. Now you can export the the Grid using a single line of code: grid.ExportTo...

This change also helped us to create export commands for the ToolBar and Context Menu. We've updated all our export demos by using toolbar export items. You can see an example of this by downloading v17.2 beta today or wait till the official v17.2 release when we'll update our online demos too.

Adaptive Popup Dialogs

And last but not least is another great adaptive feature.

Starting with v17.2, we now use the Popup Control's Adaptive feature for all of the GridView's inner popup controls: HeaderFilter, EditForm, and FilterBuilder. This feature will make using the excellent DevExpress ASP.NET GridView control better on mobile devices.

For example, here's the ASPxGridView's PopupEditForm on a desktop browser:

When you view the same PopupEditForm on a mobile device, the new adaptive dialog will look like this:

The new feature is enabled by default but you can customize it using the Grid.SettingsPopup.EditForm.SettingsAdaptivity.Mode property.

You can test these new features today by downloading the DXperience v17.2 Beta that is available in your download center (for existing customers).

Thanks!

Email: mharry@devexpress.com

Twitter: @mehulharry

Easily Add DevExtreme ASP.NET MVC Controls to .NET Core Visual Studio Projects (Coming Soon in 17.2)

$
0
0

The DevExtreme MVC Controls work great with the ASP.NET Core 2.0 framework but what if you've got an existing project?

To help you get started with using DevExtreme MVC Controls in ASP.NET Core 2.0 projects, we've upgraded "Add DevExtreme to the Project" option in the upcoming v17.2 release.

Context Menu - Single Click

This tool, long familiar to our ASP.NET customers, is now available for ASP.NET Core projects, too. Right-click on your Visual Studio 2017 project and select the menu option:

Then you'll see a confirmation dialog. Select 'Yes' to run the tool.

Once it starts, the tool will help you to include the necessary references, scripts, styles, and also modify the important project files such as Startup.cs and NuGet.config. You can still do this manually but this tool saves you a ton of time.

When the tool is done, it'll display the following 'Readme page' which details the changes made and also recommends that you complete the last small but important step:

IMPORTANT: Complete the conversion

There is one final important step you need to complete after running this tool. The goal of this tool is to make enough changes to enable using DevExtreme MVC Controls in your .NET Core projects. However, we didn't want to modify your _Layout.cshtml file, more on this below.

The final step requires you to switch to use a new file which we add to the project called: _DevExtremeLayout.cshtml. This file contains the references that are needed in the head section (and elsewhere) to use DevExtreme MVC Controls in your existing project.

Unlike ASP.NET MVC 5 projects (which we refer to as "classic MVC"), in .NET Core there are no bundles. Instead, there is now a hierarchy of <environment>, <script>, and <link> tag helpers that are used. This gives developers more flexibility, however, for automated tools, it can complicate your process.

We understand that in existing projects the _Layout.cshtml and the corresponding sections of it can be highly customized. Therefore, we don’t try to parse and patch it. Instead we provide two alternatives to complete adding DevExtreme to your project:

  1. Either switch to the ready-to-use new layout _DevExtremeLayout.cshtml (which is the same as the one used in projects created from DevExtreme ASP.NET MVC Project Templates)

  2. -OR- modify your existing layout by following the recommendations from the mentioned Readme page

I want to stress, that the tool's primary purpose is to add DevExtreme to your existing projects. If you create a new project then please use our DevExtreme Project templates instead as they have everything setup already. They're available in the Web, .NET Core, and DevExtreme sections of the 'New Project' dialog.

Watch the webinar

I recommend watching this recent webinar which goes over the process of using the updated tool:

Try it now

You can test these new features today by downloading the DXperience v17.2 Beta that is available in your download center (for existing customers).


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

Email: mharry@devexpress.com

Twitter: @mehulharry

HTML5 JavaScript Scheduler Improvements (v17.2)

$
0
0

Check out the new features of the DevExtreme HTML5 Scheduler widget that are coming in the v17.2 release. These features improve the Scheduler appearance and also help you to customize both appointments and views.

Display Several Days, Weeks and Months

Different tasks may require different planning periods. For example, training sessions require semesters, agile software development - iterations, etc. With the upcoming release, we've added a capability to display a custom period on a view by specifying an intervalCount option.

This option is available as a part of the view config. For example, here we set the interval for two work weeks:

$("#scheduler").dxScheduler({
    // …
    views: [
    {
        name: "2 Work Weeks",
        type: "workWeek",
        intervalCount: 2
    }]
});

Indicate the current time

Another feature in v17.2 for the Scheduler widget helps you to distinguish between past and future appointments, as well as tasks. The Scheduler will now provide a specific indicator that highlights the current day and time on views with the time scale. Note that the indicator changes its position with the interval that's specified in the indicatorUpdateInterval option.

The indicator is visible by default. You can hide it by setting the showCurrentTimeIndicator option to false.

Additionally, you can apply shading to cover the timetable up to the current time by assigning true to the shadeUntilCurrentTime option.

Limit number of full-sized appointments per cell

Previously, the Scheduler could show only two full-sized appointments in a cell, while collapsing others. This approach was not flexible and also didn't allow for showing more appointments on wider screen displays.

With v17.2, you can change the number of full-sized appointments per cell using the new maxAppointmentsPerCell option. This allows you to specify a strict limit on displayed appointments, calculate it automatically, or even remove the limitation. On exceeding the limit, appointments no longer become collapsed; instead, they are removed to an appointment collector, from which you can easily drag appointments back to the timetable.

Now, appointments in the appointment collector's drop-down list do not have an Edit button because a click on an appointment opens the edit form. Use the dropDownAppointmentTemplate option to customize these appointments.

Cell Size Customization

With v17.2, you can easily customize cell sizes keeping all elements aligned. Simply specify the desired cell width and height using the dx-scheduler-cell-sizes-horizontal and dx-scheduler-cell-sizes-vertical CSS classes.

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

Note that all these new features are available on all the frameworks we support: Angular, jQuery, Knockout, ASP.NET MVC, and .NET Core.

Try it now

The new features of our dxScheduler widget 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.2-pre-beta

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


What do you think about the DevExtreme Scheduler's improvements in the next release? Drop me a line below.

Email: mharry@devexpress.com

Twitter: @mehulharry

ASP.NET TreeList Enhancements (Coming soon in v17.2)

$
0
0

Check out these great enhancements the DevExpress ASP.NET TreeList is getting in the next major release, v17.2.

The DevExpress ASP.NET TreeList and GridView controls are similar in features and API. One of the major features missing in the DevExpress ASP.NET Treelist control was the ability to filter data. So in 2017, we worked hard and think you'll be happy with the results.

Filtering

Starting with the v17.2 release, we are providing filtering support for the DevExpress ASP.NET TreeList control. You'll be able to filter your data in the same manner as you do in the GridView control. Let's dive in and see all the different ways:

1. Search Panel

The DevExpress ASP.NET TreeList allows you to filter data and highlight search results via its integrated Search Panel. It's an easy way to find the data by typing the filter criteria in the search panel editor.

Simply enter the text in the Search Editor and the TreeList will display the records matching your criteria:

2. Data Filter Row

The filter row allows users to filter data by entering text in the editors displayed below individual column headers. Each editor builds a FilterExpression for the corresponding column using typed text and chosen filter operator in FilterRow menu.

You can see it in action here:

3. Header Filter

Another enhancement is HeaderFilter mechanism that displays a dropdown with a list of unique values of the specified column. By selecting one or more values, you'll be able to quickly filter for the matching criteria:

4. Built-in FilterBuilder

We've also integrated the excellent FilterBuilder into the TreeList.

The FilterBuilder is a powerful tool that provides the most flexible approach for filtering data. With FilterBuilder you'll be able to build filter criteria of any complexity with unlimited number of conditions and logical operators.

Unbound Columns

We're also introducing support for Unbound Columns, which allow you to add columns to to the TreeList without needing a data source.

Unbound columns can be populated manually by handling corresponding events or by specifying an UnboundExpression that is used to evaluate the values. You can sort, group, and filter unbound columns in the same way as data-bound columns.

ASP.NET MVC supported

All of these features are also available for the DevExpress ASP.NET MVC TreeList control too.

Try it today

You can test these new features today by downloading the DXperience v17.2 Beta that is available in your download center (for existing customers).

Thanks!

Email: mharry@devexpress.com

Twitter: @mehulharry

Viewing all 372 articles
Browse latest View live