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 2016 - Posts

  • DevExtreme: Advanced Responsive Layout

    Mobile devices come in different screen sizes and resolutions and nearly all of them are connected to the world wide web (aka internet). Due to this variety, web developers have a tough job to make sure our websites look good for both desktop and mobile browsers.

    To help you make responsive websites, these DevExtreme widgets have features that are optimized for use on a mobile device: dxDataGrid, dxForm, dxMenu, dxToolBar and dxScheduler. For example, compare the dxDataGrid on tablet and phone devices:

    https://community.devexpress.com/blogs/aspnet/16.2Release/advresppost/DevextremeGridiPad.png

    Advanced Responsive Layout

    Starting with the v16.1 release, we added options that allow you to control and adjust the appearance of the widgets for different resolutions. In this post, I'll highlight the different widgets and the code you need to take advantage of the new responsive features.

    dxDataGrid - Hide Columns

    Advanced responsive layout is our term for providing you several ways to adapt the dxDataGrid widget for different resolutions. If you have a smaller screen size then you can decrease the overall grid's width by hiding columns:

    gridOptions: {
        // …
        columnHidingEnabled: true
    }
    

    By default, the columns on the right will be hidden first when the widget width is reduced. You can change the order that the columns are hidden in. For example, here the 'State' column will be hidden first, then 'City', and finally it will default back to right most columns hidden first:

    gridOptions: {
        // …
        columns: [{
            dataField: "Employee",
            width: 130
        }, {
            dataField: "OrderNumber",
            width: 130
        }, {
            caption: "City",
            dataField: "CustomerStoreCity",
            hidingPriority: 1
        }, {
            caption: "State",
            dataField: "CustomerStoreState",
            hidingPriority: 0
        }, {
            dataField: "OrderDate",
            dataType: "date"
        }]
    }
    

    https://community.devexpress.com/blogs/aspnet/16.2Release/advresppost/DevextremeGridResponsive1.png

    dxDataGrid - Column Chooser

    For mobile devices, it's useful to use checkboxes for the 'Column Chooser' dialog:

    gridOptions: {
        // …
        columnChooser: {
            enabled: true,
            mode: "select"
        },
    }

    https://community.devexpress.com/blogs/aspnet/16.2Release/advresppost/datagridResponsivecolumnChooser.gif

    dxDataGrid - Context Menu

    To group data by a column, typically, you would drag the column header and drop it over the group panel. When you have a larger screen size, this works great. However, this becomes harder when the screens are smaller. Therefore, we added a context menu option for mobile devices which makes grouping easy:

    gridOptions: {
        // …
        grouping: {
            contextMenuEnabled: true,
            expandMode: "rowClick"
        }
    }

    https://community.devexpress.com/blogs/aspnet/16.2Release/advresppost/datagridResponsivegrouping.gif

    dxDataGrid - Pager

    The dxDataGrid's pager has also been adapted to display as a dropdown if there are several pages and the screen size is smaller. This saves room and works great for mobile devices:

    https://community.devexpress.com/blogs/aspnet/16.2Release/advresppost/DevextremeGridResponsivePager.png

    dxForm - Columns and Screen Size

    By default, the dxForm widget has the same layout for all screen resolutions. However, you can manually specify the dependency between screen size and column count. In the sample below, we've defined the dxForm to only display a single column when the screen width is less than 600 pixels.

    formOptions: {
        // …
        screenByWidth: function(width) {
            if( width < 450)
              return 'xs';
            if( width < 600)
              return 'sm';
            if( width < 750)
                return 'md';
            return 'lg';
        },
        colCountByScreen: {
             lg: 2,
             md: 2,
             sm: 1,
             xs: 1
        },
    }

    https://community.devexpress.com/blogs/aspnet/16.2Release/advresppost/DevextremeFormResponsive.png

    dxMenu - Hamburger Style

    By default, the dxMenu widget will collapse the root menu to a list icon (hamburger menu icon). This saves space on mobile devices as all the submenus are displayed as a tree structure similar to dxTreeView widget.

    To enable it:

    menuOptions: {
        // …
        adaptivityEnabled: true
    }

    https://community.devexpress.com/blogs/aspnet/16.2Release/advresppost/DevextremeMenuResponsive.png

    dxToolbar - Hide Items

    The dxToolbar provides you the capability to display several items in the toolbar. However, for smaller screens, the dxToolbar may become too wide to fit on the screen. To help you solve this dilemma, dxToolbar can hide its items inside a drop down menu using the default item template.

    To hide items in a dropdown, assign "auto" to the locateInMenu field of an item object. This will move the item to the context menu if the screen is not wide enough to display all toolbar items.

    toolbarOptions: {
        // …
        items: [{
            location: 'center',
            locateInMenu: 'never',
            text: "Caption"
        }, {
            location: 'after',
            widget: 'dxButton',
            locateInMenu: 'auto',
            options: {
               icon: "plus",
            }
        }, {
            location: 'after',
            widget: 'dxButton',
            locateInMenu: 'auto',
            options: {
              icon: "edit",
              text: "Edit",
            }
        }, {
            locateInMenu: 'always',
            text: 'Save',
        }, {
            locateInMenu: 'always',
            text: 'Print',
        }, {
            locateInMenu: 'always',
            text: 'Settings',
     }]
    }

    https://community.devexpress.com/blogs/aspnet/16.2Release/advresppost/DevextremeToolbarResponsive.png

    dxScheduler - Agenda Mobile View

    The dxScheduler widget is fantastic for displaying appointments and schedules. However, it can be too large for mobile screens. To help you, the dxScheduler provides the Agenda view that supports small screen sizes:

    https://community.devexpress.com/blogs/aspnet/16.2Release/advresppost/DevextremeSchedulerResponsive.png

    You can learn more about dxScheduler's Agenda view here.

    Advanced Responsive Layout, ftw!

    The code samples and images above highlight how useful the DevExtreme widgets are in designing a rich client-side website that provides responsive behavior.

    What do you think about the 'Advanced Responsive Layout' feature of the DevExtreme widgets? Drop me a line below, thanks.


    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

  • How to add DevExpress ASP.NET MVC Wrappers in Visual Studio - (Now Available in v16.1.8)

    We just released DevExtreme v16.1.8 and added a helpful new Visual Studio integration feature. You can now right-click on your Visual Studio project and enable it to start using the DevExtreme MVC wrappers. Here are the steps:

    Get started faster

    DevExpress MVC Wrappers require certain assemblies and resources to be part of your ASP.NET project. Now you can add the required resources and start using the DevExpress MVC Wrappers in a few clicks.

    Before you begin, please install the DevExtreme v16.1.8 release. Then follow these steps:

    1. Right-click 'Add DevExtreme...'

    Right-click on your project in the Visual Studio Solution Explorer and select Add DevExtreme to the Project from the context menu:

    2. Click 'OK'

    Next, confirm your action in the dialog box and DevExtreme will begin adding its dependencies to your project.

    3. That's it, you're ready!

    You can see the changes in the Visual Studio Output window:

    A success message means that your project is set up to use the DevExpress ASP.NET MVC Wrappers.

    If there are any issues then you'll see them in this window too. It's unlikely that there will be an error but if you find any or need help, then please contact our excellent support department.

    Watch the Webinar

    Now that your project is ready to use DevExpress ASP.NET MVC Wrappers, start and add a Grid or Chart wrapper to it.

    I recommend that you watch the webinar to learn how to add and use the DevExpress ASP.NET MVC Wrappers:

    What do you think about the DevExpress ASP.NET MVC Wrappers? Drop me a line below, thanks.


    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

  • Try the new DevExpress ASP.NET Bootstrap Controls Demos (Preview)

    I'm happy to announce that you can now experience the upcoming DevExpress Bootstrap Controls with the new online demo preview!

    The DevExpress ASP.NET developers have been working hard on a new set of ASP.NET WebForms controls that are Bootstrap compatible. To learn more about these controls, read the initial announcement post.

    Experience the demos online now:

    Demo Details

    These slick new demos let you try out the upcoming Bootstrap Grid, Editors, and Navigation controls. You'll see some of the major features we've added like sorting, filtering, editing, summaries, templates, and more.

    Use the buttons at the top right to change the theme. We've incorporated several popular Bootstrap themes:

    Then change the layout and test the responsive behavior:

    You can also scan the QR Code and load these demos on your mobile device and experience the demos from your smart phone or tablet device.

    Bootstrap Controls Overview

    The DevExpress Bootstrap Controls are AJAX controls for ASP.NET WebForms that are rendered using Bootstrap components. These controls extend the classic DevExpress ASP.NET WebForms controls and target the ASP.NET WebForms platform while using Bootstrap as a front-end framework. The DevExpress Bootstrap Controls are highly configurable and support numerous customization scenarios.

    The fundamental feature of DevExpress Bootstrap controls is their native rendering to Bootstrap CSS classes. When a DevExpress Bootstrap control renders its markup, the control does not strictly define its client-side presentation. Instead, the control’s presentation is supplied by the Bootstrap framework and Bootstrap themes.

    This approach provides these advantages:

    • Out-of-the box integration with Bootstrap themes supplied by Bootsrap contributors and third-party developers
    • Application-level adaptivity
    • Out-of-the-box accessibility
    • Consistent look-and-feel across browsers and devices

    The inherent advantage of using Bootstrap for constructing web user interfaces is that it allows for developing responsive layouts and provides your web application production-quality visual design from the start.

    The markup to which the controls are rendered is based on standard Bootstrap classes and is intended to be integrated into Bootstrap-powered page layouts. As the result, the controls behave as an integral part of the layout – they scale to the display size, use the look-and-feel settings from the current Bootstrap theme and visually merge with the page.

    For example, the Popup control is rendered as a Bootstrap modal dialog:

    https://community.devexpress.com/blogs/aspnet/16.2Release/BootstrapPopupRenderModalDialog.png

    What's next?

    Right now we're looking for your feedback on these demos. Let us know if you spot an error in a browser or if something is not rendering or behaving correctly. Please report your feedback to our support center with a heading that looks like "Bootstrap demo preview error: [abc]".

    Our next step is to provide a preview install that you can test in your Visual Studio environment.

    The new Bootstrap controls are not tied to any specific DXperience version (yet) so we'll likely release them in a future minor version. Most of our ASP.NET developers are still hard at work on the next major DXperience ASP.NET release of v16.2 too.

    If you'd like to get updates on the DevExpress Bootstrap Controls, then please sign up here:

    Register Now and Be the First to Get the Preview Build

    What do you think of the new DevExpress Bootstrap Controls demo? 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).

  • ASP.NET Spreadsheet - Performance Enhancement (coming soon in v16.2)

    Performance improvements are coming to the DevExpress ASP.NET Spreadsheet control in the v16.2 release.

    1. Page Rendering Improved

    We have improved the performance of the DevExpress ASP.NET Spreadsheet control. In particular, we moved the rendering of the drop-down ASPxRibbon menu’s items from the server-side to client-side. This has reduced the control’s rendering size by more than 50 percent and decreased the page load time:

    https://community.devexpress.com/blogs/aspnet/16.2Release/spePageRenderTimes.png

    2. Package Size Improved

    We have significantly reduced the size of the JSON synchronization package by transferring default styles to the client-side. This allows us to reduce the synchronization package size by more than 50% in a complex document:

    https://community.devexpress.com/blogs/aspnet/16.2Release/spePackageSize.png

    3. Command Execution Time Improved

    These page rendering and package size improvements will reduce the document loading time between the server and client by approximately 15% to 25%. Command execution time will be improved by 10% to 15%.

    https://community.devexpress.com/blogs/aspnet/16.2Release/speCommandExecTime.png

    4. Disable unused UI for further improvements

    We have expanded the user interface customization for the DevExpress ASP.NET Spreadsheet control. This allows your end-user better control over what UI elements and functionality is displayed.

    To further increase performance of the DevExpress ASP.NET Spreadsheet control, you can disable unused or unnecessary UI functionality. For example, in the images below, the 'Ribbon', Formula Bar', and 'Sheet Tabs' functionality is disabled. As you can see, the core Spreadsheet functionality still remains and those missing UI elements can be enabled with a click.

    https://community.devexpress.com/blogs/aspnet/16.2Release/ASPxSpreadsheet1.jpg

    https://community.devexpress.com/blogs/aspnet/16.2Release/ASPxSpreadsheet2.jpg

    What do you think of these improvements to the DevExpress ASP.NET Spreadsheet control? 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).

  • US Election Results - Angular 2 and DevExtreme Data Visualization Demo

    To help illustrate some of the data visualization capabilities of DevExtreme, we’ve just published the source for our Presidential Election Results Demo App on GitHub. As you can see in the screenshots below, the app leverages our HTML 5 JavaScript Map widget and a Bar Chart widget:

    Click image for larger size

    Online demo: DevExpress Election Results Demo

    The demo is built using the Angular 2 framework and DevExtreme widgets. Last week, we released the WinForms Election Results Demo that uses our WinForms Map and Grid controls. We designed this new web demo with DevExtreme Data Visualization widgets to show you that DevExpress helps you to create stunning apps across different platforms.

    How it's made?

    The full source code and data for this demo is available on Github. To run the demo on your local machine, execute these steps:

    1. Download or git clone the respository
    2. npm install
    3. npm start
    4. navigate to http://localhost:4200/ (if your browser is not launched automatically)

    Let's dive into how this demo is built.

    Shared Data

    The data for this demo is the same data that we used in the WinForms Election Demo. The state and county map data comes from the U.S. Census Bureau. The election data from the Federal Election Commission and The Guardian. Election data was normalized and stored in JSON format.

    Step 1 - Create the App

    The best way to create new Angular 2 application is to use Angular CLI. Install it globally using the npm install -g angular-cli console command. Then execute the ng new dx-election to create an application. You only need to do this command once.

    Step 2 - Generate Components and Services

    Each UI part of the demo's user interface is a component in the Angular 2 app model. Therefore the 'year switcher' or the bar chart with vote totals are Angular 2 components using DevExtreme Data Visualization.

    To create a new component, we use the ng generate component console command. For example, ng generate component map generates the ".html", ".ts", and ".css" files in '/src/app/map' directory. Then three services were generated using command ng generate service. Each service provides the following data: states, counties, and votes.

    Step 3 - Add DevExtreme to the App

    Using DevExtreme widgets with Angular 2 requires that the appropriate npm package are installed. The npm install devextreme-angular --save command adds all necessary files and includes the devextreme-angular package in the package.json file.

    Theme stylesheet files should be included in the 'angular-cli.json' file. The widgets used in the app should be imported in the 'src/app/app.module.ts' file. Then all imported widgets can be used as application components.

    Step 4 - Work with Binary Data in DevExtreme VectorMap

    DevExtreme provides Vector Map utilities that can be used to work with binary data. We transformed the binary map data to a JavaScript object (see 'src/app/maputils.ts') using a single method: DevExpress.viz.vectormaputils.parse. Next we added election data to the object to colorize the map according to vote results.

    Then the '<dx-vector-map>' tag is added to the component markup file. The [layers] attribute describes states and counties layers and binds the resulting data source with map and election data to the vector map widget. This provides the Vector Map to drill down by state and counties:

    Step 5 - Use DevExtreme Charts

    A DevExtreme Bar Chart is used to show vote percentages by state (or county). A DevExtreme Full Stacked Bar Chart shows national results of electoral and total votes. Both app components get the data from the VotesService. Component markup contains tag with widget options and data bindings.

    Try it today

    Try the demo online. Then download the full source code and drop me a line below. What do you think of this slick new demo?

    Candidate photos courtesy of Gage Skidmore.


    Create highly responsive web apps for touch-enabled devices and traditional desktops.

    From desktops to mobile devices, DevExtreme HTML5 Data Grid delivers the flexibility you’ll need to build apps that reach the widest audience and deliver touch-first user experiences to power your next great interactive website.

    Download a free and fully-functional version of DevExtreme now: Download DevExtreme

LIVE CHAT

Chat is one of the many ways you can contact members of the DevExpress Team.
We are available Monday-Friday between 7:30am and 4:30pm Pacific Time.

If you need additional product information, write to us at info@devexpress.com or call us at +1 (818) 844-3383

FOLLOW US

DevExpress engineers feature-complete Presentation Controls, IDE Productivity Tools, Business Application Frameworks, and Reporting Systems for Visual Studio, along with high-performance HTML JS Mobile Frameworks for developers targeting iOS, Android and Windows Phone. Whether using WPF, ASP.NET, WinForms, HTML5 or Windows 10, DevExpress tools help you build and deliver your best in the shortest time possible.

Copyright © 1998-2017 Developer Express Inc.
All trademarks or registered trademarks are property of their respective owners