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

  • DevExpress ASP.NET Scheduler Enhanced! - (coming soon in v16.2)

    The DevExpress ASP.NET Scheduler control is getting some big enhancements for the v16.2 release.

    As much as we’ve tried over the years, a good scheduler control is not as simple or light as a button. There’s just a lot more “stuff” to take care of and display. Consequently, at the beginning of 2016, we decided that it was high time to start improving our scheduler control's appearance and performance.

    I'm happy to say that we've achieved both and your end-users will be delighted.

    1. UI Enhancements

    Let's start with UI enhancements because they're the first thing that you'll notice. For v16.2, the DevExpress ASP.NET Scheduler control features:

    • A new lightweight layout for appointments
    • Updated color scheme for appointment resources
    • Appointment selection status is now indicated by the appointment’s opacity for modern web themes
    • Time cell background color has been modified for modern web themes. White is used for work time cells. Light Gray is used for free time cells. You can also specify which portion of a grouped view to fill with resource color: time cells, resource headers or both

    These UI enhancements look great, check out the Scheduler with these upcoming changes:

    To see the difference, compare these two images of v16.1 (left) and v16.2 (right):

    2. Performance w/client-side rendering

    The performance of our scheduler has also been enhanced significantly with use of client-side rendering improvements:

    • The Scheduler's client receives required data in JSON and updates its view accordingly across all end-user operations that do not require updates to the Scheduler’s layout (e.g., navigation between dates or resources).
    • Client-side rendering speeds up web app execution because it reduces the amount of markup produced on the server.

    We've tested the difference and you'll be pleased to know that overall performance and feel of the DevExpress ASP.NET Scheduler control has increased. Check out these charts to see the measurements:

    Scheduler – Render size of two controls w/o appointments

    Scheduler – Appointment update time

    Scheduler – Change date time

    Scheduler – Active view change time

    3. Time Ruler & Day Header Highlighting

    With this release, our ASP.NET Scheduler Control can now highlight coordinates of the currently selected time interval within its time ruler and day headers:

    https://community.devexpress.com/blogs/aspnet/16.2Release/ASPScheduler162/TimeRulerAndDayHeaderHighlighting.gif

    What do you think of the DevExpress ASP.NET Scheduler control's enhancements for v16.2 release? 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).

  • DevExpress ASP.NET GridView Enhancements for v16.2 (coming soon)

    Our flagship ASP.NET control, the DevExpress ASP.NET GridView, is getting some great UI improvements for the v16.2 release. Your end-users will be delighted that their favorite GridView control now provides a few useful client-side interactions and we've also improved its accessibility support.

    Client-Side Processing of Column Alignment

    Our ASP.NET Grid Control now offers an alternative client "column alignment" processing mode. In this mode, when an end-user moves a grid column using drag-and-drop, the GridView re-renders itself to reflect new layout changes on the client side without initiating a round trip to the server.

    Postponed Column Resizing

    With our v16.2 release, your web app can now postpone column resizing. By default (Live resizing), the DevExpress ASP.NET Grid is redrawn continuously as an end-user drags a column. When using our new Postponed mode, column resizing is visually indicated by a resizable frame, while the grid itself is redrawn only after resize operations have been completed. This new mode is also available in our ASP.NET TreeList Control.

    https://community.devexpress.com/blogs/aspnet/16.2Release/aspGridView162/asp-grid-postponed-column-resizing.png

    Highlight Removed Rows (Batch Edit Mode)

    In previous versions, when an end-user deleted a data row with batch edit mode enabled, the deleted row was hidden from view. With this release, deleted rows are not hidden and instead marked with the specified color. We've also added a Recover command that cancels the delete operation.

    https://community.devexpress.com/blogs/aspnet/16.2Release/aspGridView162/asp-grid-highlight-removed-rows.png

    This new feature is also available in our Vertical Grid and Card View Controls.

    Banded Columns - End-User Layout Customization

    End-users can now create multi-line column layouts using drag and drop operations:

    Accessibility Enhancements

    For the Accessibility enhancements, I want to thank those customers who called us to task to improve our accessibility support and for working with us to improve it.

    This release incorporates a number of accessibility specific enhancements so you can deliver accessible web applications for people with disabilities - including those who use assistive technologies such as screen readers. The rendering of our ASP.NET Grid Controls has been improved by adding WAI-ARIA attributes to identify features and elements for user interaction. The following grid features and UI elements support assistive technologies and can be identified and read by screen readers:

    • Batch edit mode (GridView, CardView, VerticalGrid);
    • Header filter popup (GridView, CardView, VerticalGrid);
    • Page size selector (all controls with the built-in pager);
    • In-callback updates (improved notification).
    • Our new client-side API allows you to send custom messages that can then be read by screen readers.

    Fixed Column Enhancements

    Last but not least, we've improved the functionality of fixed columns within our ASP.NET Grid Control so you can provide complex layouts. The following layout features are now fully compatible with fixed columns:

    • Grouping
    • Detail rows
    • Previews
    • Filter, footer and data row templates
    • Edit form
    • Error row

    Which of the enhancements to the DevExpress ASP.NET GridView Control are you most excited about? 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: 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

  • Watch the webinar for TypeScript and DevExpress ASP.NET and MVC

    Check out the webinar video on how to use TypeScript with DevExpress ASP.NET and MVC controls:

    In the video, you'll learn:

    1. A short introduction to TypeScript by our evangelist, Paul Usher.
    2. Then I demonstrate how to get started using TypeScript with DevExpress ASP.NET controls.

    I'd love for you to watch the video, try the new DevExpress TypeScript definitions with your DevExpress ASP.NET projects, and then give us your feedback. You can email me, drop me a comment below, or even tweet me.

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

  • TestCafe now available in Free/Open Source & Commercial Studio Versions

    TestCafe

    Today, I am excited to announce two new TestCafe projects:

    1. TestCafe - An open-source project that is now hosted on GitHub with an MIT license. It's a free and lite version of TestCafe that exposes the core functionality of TestCafe!
    2. TestCafe Studio - Our commercial product that includes the open-source (core) TestCafe framework with the added benefits such as a powerful user interface, a visual test recorder, and full DevExpress support.

    Therefore, starting today, we have split TestCafe into a lite (and free) open-source version and the new TestCafe Studio. The current commercial version will officially become TestCafe Studio in early 2017 when we introduce a new desktop-based IDE (more on this below).

    And this move has benefits for both the open-source developers and the paid TestCafe customers. Read on to learn more.

    Open-source, Free, MIT, FTW!

    By open-sourcing TestCafe, it allows more developers and testers to use the excellent functional testing framework in their projects. A free framework with an MIT license will encourage an active open-source community. And an active open-source community of TestCafe users will help contribute code, share and discuss ideas.

    TestCafe Studio, which uses the open-source TestCafe framework internally, will be developed faster, be more robust, and gain the features users need the most. TestCafe Studio also comes with full support from DevExpress support engineers.

    We will monitor TestCafe on GitHub and our developers will interact with the community. Of course, we'll provide framework updates, take pull requests, and address issues. However, if you need full guaranteed support within a business day, then you will need a TestCafe Studio license.

    Node.js

    The new open-source TestCafe framework is a native node.js solution. This is great for Nodejs based web applications because you can simply npm install testcafe and get a complete functional testing framework.

    And it allows you to run tests from the command line or via the JavaScript API. And you can output Reports to the console or directly to a file.

    The framework also has a new test API and syntax, which is compatible with current tests.

    TestCafe Studio UI vs Test Cafe CLI

    The key difference between the TestCafe Studio and TestCafe open-source framework is the Visual tools. Only TestCafe Studio includes:

    • Visual test recording
    • UI for
      • Launching tests
      • Analyzing test results
      • Managing test base
      • Controlling the remote browsers
      • Settings and configurations
    • Full Support

    The free open-source TestCafe framework includes a great CLI (command line interface). Therefore, you can still write the same powerful tests and get the resulting reports. However, they will be through the CLI.

    Get started now!

    Try the open-source TestCafe:

    If you'd like to try the current visual-based TestCafe, then download a free 30 day trial. This TestCafe will soon be renamed as TestCafe Studio and existing customers will be upgraded automatically.

    Cross-platform (Desktop) Studio

    We're working on a new Commercial version of TestCafe! We expect to release it in the first quarter of 2017.

    While the current TestCafe UI is cross-platform, it only runs in the browser. We're working on a new cross-platform desktop application! Yes, a native desktop application for multiple operating systems. And it will have some major features, including:

    • Newly designed IDE-style interface where you can:
      • record
      • write
      • edit and run tests
      • analyze test results
      • manage the test base
      • access all the settings
      • and do everything you can do in the current version and more

    Feedback

    I would love to hear your feedback about this big TestCafe announcement. Leave me a comment below or email me directly: mharry@devexpress.com

    Thanks!


    Get Started Today

    And experience the TestCafe difference for yourself. Download a free 30-day trial today: testcafe.devexpress.com (free support is included during your evaluation).

  • How to add a Chart to your Client-Side PivotGrid (DevExtreme v16.1)

    A chart is a great way to visualize data. Did you know that you can easily add a chart to the DevExtreme PivotGrid widget? And the chart will update instantly with the PivotGrid:

    DevExtreme Pivot and Chart Integration

    In previous versions of DevExtreme (15.2 and earlier), you could display PivotGrid data with a chart but it was very complex and you had to write custom code.

    Starting with the v16.1 release, we introduced a new method for chart integration - bindChart.

    How does it work?

    To integrate the two widgets, first create new instances of PivotGrid and Chart, then call the bindChart method:

    var pivotGrid = $("#pivotContainer").dxPivotGrid(...),
          chart = $("#chartContainer").dxChart(...),
          integrationOptions = {...}
    pivotGrid.bindChart(chart, integrationOptions);

    The bindChart method accepts two arguments: a Chart instance and an object containing integration options. This allows you to adjust data fields, series, value formatting, panes and axes, and many others options.

    Try the online demo.

    Learn more in the DevExtreme documentation.

    This feature is a part of the DevExtreme v16.1 release. 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

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-2016 Developer Express Inc.
All trademarks or registered trademarks are property of their respective owners