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

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

    .NET Core Survey - surveyjs.com

    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

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

    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 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 and make sure that the results look good 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 disabled by default but you can customize it using the Grid.SettingsPopup.EditForm.SettingsAdaptivity.Mode property. For example:

    ASPxGridView.EditFormLayoutProperties.SettingsAdaptivity.AdaptivityMode = SingleColumnWindowLimit
    ASPxGridView.SettingsPopup.EditForm.SettingsAdaptivity.Mode = OnWindowInnerWidth

    Other ASPxGridView popup elements like 'Header Filter Popup' and 'Filter Builder Popup' will be adaptive by default.

    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

  • New HTML5 JavaScript Filter Builder Widget (v17.2)

    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

1
2 3 4 5 6 7 8 9 10
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