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

November 2017 - Posts

  • Scalability of ASP.NET Office Controls - Azure, Web Gardens, Farms, & Cloud Support (CTP - v17.2)

    We are excited to announce that the DevExpress ASP.NET Office controls, Spreadsheet and RichEdit, are getting improved scalability support.

    Scalability is the capability of a system, network, or process to handle a growing amount of work, or its potential to be enlarged to accommodate that growth - Wikipedia

    Starting with the v2017.2 release, we're providing a Community Technology Preview (CTP) that supports the following excellent features:

    • Web Applications using these controls can be scaled (in/out) easily
    • "Sticky Session" / "Session Affinity" is not required, any load balancing is welcome
    • Microsoft Azure and any cloud computing platforms with IIS are supported
    • Web Farms and Web Gardens are now supported

    Scalability issues are not a problem for most customers. If you're hosting your web application on a single server, then you've not faced any scalability issues. However, for those customers using web apps on scalable hardware then they will be happy to hear about the improved support.

    What's the problem?

    The ASP.NET Spreadsheet and RichEdit controls are large powerful controls that provide rich functionality. When you open and work on a document in these controls, we need to keep track of the state. Things like the document structures, etc.

    Previously, the ASP.NET Spreadsheet and RichEdit controls kept their state of opened documents in the web server's memory (RAM). This approach has an advantage for performance because the parsed document structure was in memory and ready to process the user's requests. However, using RAM to keep state makes the web server stateful and therefore not easy to scale (in/out).

    Initially, we came up with a solution for Microsoft Azure that implemented smart routing and used the "Sticky Session" / "Session Affinity" mode to route document-specific user requests exactly to that appropriate web server. Unfortunately, this solution was complex to setup and implement. It also required the "Sticky Session" / "Session Affinity" mode which made balancing the application load less effective. And because it was only available for Azure, it didn't solve other customers who hosted on other platforms like Amazon AWS.

    A Better Solution

    In the v2017.2 release, the ASP.NET Spreadsheet and RichEdit controls now support an important new mode that allows you to store the opened document states in external storage. This will provide great scalability benefits.

    The new mode allows you to not have any state between requests and therefore provides for non-stateful web servers with our RichEdit and Spreadsheet controls. This allows you to host on multiple-server solutions like cloud, web farms, web gardens, etc.

    So servers that have no state are treated equally and can process any request. This provides several benefits:

    • load balancers can effectively spread the workload among other “stateless” web server instances
    • another great benefit of external state storage is that your web servers can be rebooted/updated/removed with no additional code required to save (or rescue) the state (scale in)
    • new web servers can also be added on-demand and they start the same as any other web servers in the pool. Therefore they can start participating in the application request processing right away (scale out)

    Who is it for?

    This new scalability mode and solution is for those who are developing scalable application with DevExpress Office Controls. This new solution allows you to build applications that are hosted on top of cloud computing platforms (with IIS), Microsoft Web Farms, or Web Gardens.

    Storage Options

    The 'document states' can be stored externally in one of following storage containers:

    • MS SQL Server database
    • Redis in-memory data structure store

    We chose the above two because of their popularity. Supporting a storage container requires us to create a special 'Document State Provider' interface. We published two such providers for Microsoft SQL Server and Redis respectively. And it's also possible to develop others providers to support more storage containers.

    How to enable it?

    To turn on the new feature, set the desired document provider in your project's Global.asax file:

    void Application_Start(object sender, EventArgs e) {
        ...
        var provider = new DevExpress.Web.SqlOfficeStateProvider.SqlOfficeStateProvider(connectionString);
        // or
        //var provider = new DevExpress.Web.RedisOfficeStateProvider.RedisOfficeStateProvider(connectionString);
        
        DevExpress.Web.Office.DocumentManager.StateProvider = provider;
        ...
    }

    In the sample code above, the connectionString refers to the connection string for your storage.

    GitHub Sample

    To help you test this, we've created and published a sample repo on GitHub:

    https://github.com/DevExpress/aspnet-office-solutions

    This repo consist of several solutions and projects:

    • Document state providers:
      • RedisOfficeStateProvider - Redis using document state provider
      • SqlOfficeStateProvider - SQL Server using document state provider
    • New solutions examples for MS Azure (code is the same for Web Farms and Web Gardens):
      • Azure-SqlOfficeStateProvider-Starter - Azure solution example using the SqlOfficeStateProvider
      • Azure-RedisOfficeStateProvider-Starter - Azure solution example using the RedisOfficeStateProvider

    In the same repo, you'll also find the previous solution with custom smart routing and Session Affinity:

    • Azure-SessionAffinity-Starter

    Learn more details on the repo's Readme file.

    Give Us Your Feedback

    Your feedback will help us decide the future direction. Please take a minute to fill out this short four question survey about your plans for ASP.NET Core usage:

    Are you excited by the DevExpress Office Controls support for scalability? Drop me a line below.

    Thanks!

    Email: mharry@devexpress.com

    Twitter: @mehulharry

  • DevExpress ASP.NET Popup Control - Adaptive (17.2)

    Starting with the v17.2 release, the DevExpress ASP.NET Popup Control has a new adaptive mode. In this mode, the popup will resize its content automatically according to the screen resolution. This mode provides the best experience for a user on any device, whether it's on the desktop, a tablet, or a phone. You can also configure the maximum and minimum widths to limit the resizing area. This mode supports a fixed header and footer, which will always be displayed regardless of the scroll position.

    Check out the AdaptiveLayout demo page that shows how to create adaptive dialogs using the Popup and FormLayout controls:

    Mode Switch

    The Popup control can also switch modes. You can show the default popup on wider screens and then switch it to adaptive mode on small screens using the PopupControlAdaptivityMode.OnWindowInnerWidth property:

    The following video shows how to quickly create an adaptive form using Popup and FormLayout controls:

    ASP.NET MVC supported

    The DevExpress ASP.NET MVC version of the Popup control also supports adaptive now.

    Try it today

    You can test these new features today by downloading the DXperience v17.2 release.

    Thanks!

    Email: mharry@devexpress.com

    Twitter: @mehulharry

  • Dashboards: Mobile Layout for the Web (v17.2 CTP)

    Now that the DevExpress Dashboard has been out for a few releases, we're seeing a growing demand from our customers for improving the Web Dashboard usage on mobile devices.

    Good news! In this v17.2 release, we have experimented with a Mobile layout to make dashboards more user-friendly and interactive on mobile devices, as they are on Desktop browsers. This new mobile layout will be available as a CTP (Community Technology Preview) in the v17.2 release.

    This was a challenging task to adapt a Dashboard that has many visual controls on it and shrink it to fit on mobile browsers. There are some difficulties centering around the Dashboard concept itself. For example, in dashboards, a user interacts with multiple connected items at the same time; but that is not possible on smartphone apps because of the small viewing area.

    However, we've come up with a good solution. Our new mobile version will attempt to find a balance between usability of the entire dashboard versus viewing and interacting with one particular Dashboard Item.

    To see this in action, check out this animation:

    Visit our online demo and experience yourself: https://demos.devexpress.com/Preview/Dashboard/

    Gallery View

    In our mobile layout, we utilize a well-known mobile UI pattern – the Gallery.

    The Gallery allows users to slide between dashboard items sequentially for data analysis or jump directly to an item for futher research.

    Besides implementing the Gallery, we rethought a concept of the Dashboard Title and Items' toolbars so that they adapt to become mobile-friendly.

    How to enable Mobile Layout

    You can use mobile layout with any approach – Web Forms, MVC, .NET Core (CTP), or in a native Client-Side Approach. Follow this link to find more info about extensions: How to work with extensions.

    To enable the mobile layout, follow the steps below:

    1. Make sure that your HTML page is mobile-friendly by setting the corresponding ViewPort metatag:
    <meta name="viewport" content="width=device-width, initial-scale=1">

    This meta tag is a common requirement for Mobile Browsers.

    1. Go to the Web Dashboard declaration and register the Mobile Layout extension using the following code snippet:
    function onBeforeRender(sender) { 
      var dashboardControl = sender.GetDashboardControl(); 
      dashboardControl.registerExtension(
        new DevExpress.Dashboard.MobileLayoutExtension(dashboardControl)
      );
    }

    That’s it. Note that a mobile layout does not replace the classic layout; it’s enabled only in certain conditions:

    • The Web Dashboard control is set to the Viewer / ViewerOnly mode
    • The page is open in a mobile browser

    Tip: You can use the Device Mode in the Chrome Developer Tools to test mobile views.

    Project Status

    Once again, this is a CTP version. Report any issues, missing functionality, or suggestions as regular Support Center tickets. We'll be happy to review your feedback and optimize the API based on what we hear. This also serves as a reminder that the API is subject to change until we officially release.

    Known limitations

    This current version of the Dashboard's mobile layout does not visually indicate a Dashboard Item Group. This means that dashboard items filtering may not work in an obvious way for the end users. To avoid this issue, we recommend that you not show a dashboard with Groups in the Mobile Layout.

    We'll continue to work on improving the Dashboard before the final release.

    Are you excited by the DevExpress Web Dashboard's Mobile Layout? Drop me a line below.

    Thanks!

    Email: mharry@devexpress.com

    Twitter: @mehulharry

  • DevExpress ASP.NET Menu Gets Adaptive - Side Menu Mode (v17.2)

    One of the major themes for the DevExpress ASP.NET Controls in the v17.2 release was 'Adaptive' or the ability to resize content automatically according to the screen resolution.

    I've talked about the adaptive features of our other controls here:

    ASP.NET Menu Adaptive

    With the v17.2 release, the DevExpress ASP.NET Menu also gets an Adaptive feature: Side Menu Mode.

    The DevExpress Menu control can automatically transform into a vertical side-menu when the horizontal menu doesn't fit completely on the screen.

    You can specify the width of the browser which will determine how the horizontal menu will transform into a side menu. To enable this adaptivity mode, set the EnableCollapseToSideMenu property to true. The new adaptive mode can operate with the existing EnableAutoHideRootItems mode too.

    Here is an animated gif to show you how it works:

    Experience our online ASP.NET Menu demo here: Responsive Menu

    ASP.NET MVC supported

    The DevExpress ASP.NET MVC version of our Menu also supports adaptive 'Side Menu Mode' too.

    Try it today

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

    Thanks!

    Email: mharry@devexpress.com

    Twitter: @mehulharry

  • Adaptive Dialogs in DevExpress ASP.NET Controls (v17.2)

    In the v17.2 release, we've updated many of our ASP.NET controls to use adaptive dialogs. I talked about this feature in this recent ASP.NET Spreadsheet post.

    Adaptive Dialogs

    An adaptive dialog will resize its content automatically according to the screen resolution. For example, here's the DevExpress ASP.NET RichEdit's File Open dialog that now supports adaptive behavior:

    To achieve this, we used the FormLayout and Popup controls in adaptive mode. For v17.2, we added the adaptive layout feature to the Popup control. Check out the online demos of these controls here:

    We use our smaller controls within our larger controls. So the DevExpress ASP.NET Scheduler, RichEdit, etc. now get the benefits of these smaller controls because we use them for functionality like dialogs.

    Which Controls?

    These four major controls now make use of adaptive dialogs now with v17.2:

    1. Spreadsheet
    2. Rich Edit
    3. HTML Editor
    4. Scheduler

    You can experience these controls in our updated online ASP.NET demos.

    ASP.NET MVC supported

    The DevExpress ASP.NET MVC versions of these controls also support adaptive dialogs now.

    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

  • Web Dashboard Now Supports .NET Core (CTP)

    The DevExpress Web Dashboard can now work on the latest .NET Core framework. While this is a pre-release (CTP), we're excited about this news and want to get your feedback.

    .NET Core

    The .NET Core 2.0 framework provides several benefits such as performance, flexible deployment, and cross-platform support. That means that you can run our Web Dashboard on Windows, macOS, and Linux.

    For example, here is the Web Dashboard running on Linux (click image for larger version):

    With .NET Core you can create ASP.NET Core Razor Pages, MVC Views and Controllers, Web API, use Docker, and more.

    Getting started

    To test our Dashboard in .NET Core locally, please download the latest v17.2 today from devexpress.com.

    We've also prepared documentation to help you get started using the DevExpress Web Dashboard in ASP.NET Core:

    Create an ASP.NET Core Designer application

    Project Status

    Once again, this is a CTP version. Report any issues, missing functionality, or suggestions as regular Support Center tickets. We'll be happy to review your feedback and optimize the API based on what we hear. This also serves as a reminder that the API is subject to change until we officially release.

    In this CTP version, the Web Dashboard control does not support the following features:

    1. OLAP mode
    2. Export
    3. Localization

    We'll continue to work on these features for the final release.

    Help Us With Survey

    Your feedback will help us decide the future direction. Please take a minute to fill out this short five question survey about your plans for ASP.NET Core usage:

    Are you excited by the DevExpress Web Dashboard now with the ability to run on .NET Core framework? Drop me a line below.

    Thanks!

    Email: mharry@devexpress.com

    Twitter: @mehulharry

  • ASP.NET Spreadsheet Enhancements - Adaptive Dialogs and more (Coming soon in v17.2)

    Check out these enhancements to the DevExpress ASP.NET Spreadsheet control that are coming in the v17.2 release:

    Adaptive Dialogs

    The Spreadsheet Control's dialogs will all be adaptive. This means that the dialog's content is automatically resized according to the screen resolution. To achieve this, we used the FormLayout and Popup controls in adaptive mode. The upgrades the FormLayout and Popup controls will also be available to you in the coming release. I'll discuss these other controls in a future blog post.

    Check out the Spreadsheet's adaptive dialog in action here:

    Bookmark navigation

    The Spreadsheet Control now gives you the ability to navigate through documents using bookmarks:

    For your power Spreadsheet users, they will find this feature handy to easily move around large documents.

    Full screen at startup

    Now you can display the Spreadsheet Control in full-screen mode on page load simply by setting the server-side property value: FullscreenMode.

    ASP.NET MVC supported

    All of these features are also available for the DevExpress ASP.NET MVC Spreadsheet 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

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

    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

  • HTML5 JavaScript Scheduler Improvements (v17.2)

    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

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

    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

1
2
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