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

  • 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

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

    DocumentID

    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();

    DocumentFormat

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

    Feedback

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

    Leave me a comment below or email me directly: mharry@devexpress.com

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

  • Known Issues in .NET Core Tools (preview 2) for Visual Studio and Workarounds

    Since releasing the DevExtreme ASP.NET MVC Wrappers for ASP.NET Core, we've seen some issues with the Visual Studio 2015 Tooling Preview 2 (for .NET Core 1.0).

    Below are three issues with workarounds that could help you. Please keep in mind that many of the issues are likely related to the tooling software being in 'preview' mode. Microsoft is aware of most of these issues and they will likely address them in a future release.

    Three known issues and workarounds

    The following issues relate to ASP.NET Core projects (both .NET Framework and .NET Core):

    1. Bower search dialog cannot find packages

    This issue occurs when bower in Visual Studio can find a package but not install it. Take a look at the details here: aspnet/Tooling#506. This is a known issue which means it may be addressed in a future build.

    Workaround

    Edit the bower.json file manually. If bower.json is missing, enable 'Show All Files' in the Solution Explorer toolbar.

    DevExtreme ASP.NET MVC Wrappers - ASP.NET Core - Project Template

    Then add your packages directly to bower.json and run the 'Restore Packages' command.

    2. Bower may install wrong versions of packages

    If git.exe is not available in your local PATH, then Bower may install the wrong versions of packages.

    Yes, this is an unpleasant issue where the symptoms may include:

    • missing JavaScript files
    • various JavaScript runtime errors
    • messages about using incompatible libraries

    Luckily, Microsoft is aware of the issue which you can also track here: aspnet/Tooling#575. And there is a StackOverflow discussion too: http://stackoverflow.com/a/38460014

    Solution:

    1. Install Git for Windows
    2. Delete your local bower directory: %USERPROFILE%\AppData\Local\bower
    3. Restart Visual Studio
    4. Delete wwwroot/lib
    5. Restore bower packages

    3. DevExtreme ASP.NET Core project templates fail to restore packages

    This issue appears as the yellow error bar at the top of Solution Explorer:

    DevExtreme ASP.NET MVC Wrappers - ASP.NET Core - Restore Packages Error

    Workaround

    We've found a workaround for this issue and fixed it in the DevExtreme v16.1.6 release.

    If you don't have v16.1.6 yet, then you can use this simple workaround: invoke package restore manually ("Restore Packages" item in the context menu of project node in Solution Explorer)

    Also, this issue will likely be solved in Visual Studio tooling when the .NET Core projects are switched from project.json to csproj/MSBuild. Microsoft is aware of this issue as well.

    Try DevExtreme Components for ASP.NET Core today!

    Download DevExtreme v16.1.6 and let me know your thoughts about ASP.NET Core in the comments below. Thanks!

    Keep in mind that the Visual Studio tooling (for .NET Core) is still in preview. We are sure that Microsoft will address the issues and provide the best environment to build .NET Core apps.

    Leave me a comment below or email me: mharry@devexpress.com

    Twitter: @mehulharry


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

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