Mehul Harry's DevExpress Blog

This Blog


Mehul Harry is the DevExpress Web Program Manager. Follow him on twitter: @Mehulharry

Subscribe (RSS, Email)


October 2016 - Posts

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


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

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


    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.


    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


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


    Get Started Today

    And experience the TestCafe difference for yourself. Download a free 30-day trial today: (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

  • How to Open a Microsoft Office Document with DevExpress ASP.NET Office Controls

    Getting started with the DevExpress ASP.NET Office Controls is easy. In a few of the upcoming blogs, I'll highlight some of the common getting started tasks with DevExpress ASP.NET RichEdit and Spreadsheet controls.

    One of the first things you'll likely want to do after adding a DevExpress ASP.NET Office control to your web project is to open a document.

    File System or Database

    There are two ways to load a document into a DevExpress ASP.NET office control. You can use the file system or load it from document storage (database).

    Note, the code example below reference the DevExpress ASP.NET Spreadsheet control, however, the same code applies to the DevExpress ASP.NET RichEdit control.

    Load from File System

    The DevExpress Office controls support various formats including docx, csv, pdf, xlsx, and more.

    To load or open a document (docx, pdf, xlsx, etc.) using the Server-side API, call the Open method:

    void ASPxSpreadsheet.Open(string pathToDocument)

    The pathToDocument) parameter represents the full the document path and filename in the File System. The pathToDocument also plays role of the document identifier - the DocumentID.

    The Open method also provides several overloads:

    DevExpress ASP.NET Spreadsheet - Open method

    Because these are server-side ASP.NET controls, the file system mentioned above is the one on your web server. End-users can upload a file to the working directory that you specify for the control to use. Then, call the open method and load the corresponding file into the DevExpress ASP.NET Office control.

    Take a look at this 'Custom Document Management' demo which has integrated the versatile DevExpress ASP.NET File Manager control. The File Manager control gives your end-users a visual layout of the server-side file system and allows them to upload files too.

    Load from Document Storage (Database)

    To load a document from the database, the DevExpress Office Controls provide stream and byte array parameters in the Open method:

    void ASPxSpreadsheet.Open(string documentId, DocumentFormat format, Func<Stream> contentAccessor)
    void ASPxSpreadsheet.Open(string documentId, DocumentFormat format, Func<byte[]> contentAccessor)

    Let's take a look at the parameters needed to retrieve a file (aka binary object) from your database.


    The DocumentID parameter is simply a unique string and is used to load and save documents. The DocumentID is necessary when dealing with ASP.NET documents programmatically.

    If you've previously saved your DocumentID parameter to the database then you can use this ID for the open method.

    Or you can also generate a new unique ID using the following approach:

    private void CustomDocumentOpening() {
        var newUniqueDocumentId = Guid.NewGuid().ToString();


    The DocumentFormat specifies the file format you want to open (xlsx, docx, etc.).

    Load Blob from Database

    After getting your DocumentID, you'll need to write some custom code that extracts the document (binary object) from your database.

    For example, here is how to retrieve it via a stream:

        // Open document from content in stream
        using(var stream = GetStreamFromCustomDocumentStorage()) {
            ASPxSpreadsheet1.Open(newUniqueDocumentId, DocumentFormat.Xlsx, () => stream);
    private FileStream GetStreamFromCustomDocumentStorage() {
        throw new NotImplementedException();

    And here is how to retrieve it via a byte array:

        // Or, open document from content in byte array
        byte[] documentContentAsByteArray = GetByteArrayFromCustomDocumentStorage();
        ASPxSpreadsheet1.Open(newUniqueDocumentId, DocumentFormat.Xlsx, () => documentContentAsByteArray);
        // TODO save somewhere the newUniqueDocumentId if needed
    private byte[] GetByteArrayFromCustomDocumentStorage() {
        throw new NotImplementedException();

    Once the document is retrieved from the database, it can be passed to one of the open method overloads as a Stream or array of bytes (along with the DocumentID and DocumentFormat).


    I would love to hear your feedback on the DevExpress ASP.NET Office Controls.

    Leave me a comment below or email me directly:


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


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 or call us at +1 (818) 844-3383


DevExpress engineers feature-complete Presentation Controls, IDE Productivity Tools, Business Application Frameworks, and Reporting Systems for Visual Studio, Delphi, HTML5 or iOS & Android development. 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-2018 Developer Express Inc.
All trademarks or registered trademarks are property of their respective owners