Microsoft just released the .NET Core and ASP.NET Core 1.0 frameworks.

I'm happy to announce that DevExpress has you covered with our great UI controls for ASP.NET Core 1.0. Read on to learn about .NET Core support below.

1. DevExtreme ASP.NET MVC Wrappers

In the v16.1 release, we included a CTP version of our new DevExtreme MVC Wrappers. These wrappers target existing Microsoft ASP.NET MVC versions (v3-5).

However, we have also successfully tested them with the new ASP.NET Core framework (MVC 6)! Learn more here:

• DevExtreme ASP.NET MVC wrappers

Sign up for my upcoming webinar where I'll show how to use the DevExtreme TagHelpers and ASP.NET MVC Wrappers with the new ASP.NET Core 1.0 release.

DevExpress and ASP.NET Core: Modern Web Development

2. TagHelpers for ASP.NET Core

In January 2016, we released the first beta of our DevExtreme ASP.NET TagHelpers and we'll be updating our Nuget packages and GitHub pages very soon to support the official release of ASP.NET Core 1.0. Learn more here:

• DevExtreme ASP.NET TagHelpers

<dx-data-grid><datasource controller="ToDo" load-action="Items" /><group-panel visible="true" /><filter-row visible="true" /></dx-data-grid>

.NET Core Support

Along with ASP.NET Core, Microsoft has also released an updated .NET Core framework too! In fact, ASP.NET Core is built on top of this .NET Core.

The .NET Core framework has advantages like cross-platform, flexible deployment, command-line tools, etc. Learn more by reading Scott Hanselman's blog post.

I have good news! We've been testing all the different DevExpress tools with the new .NET Core 1.0 to see which ones are compatible and useful within the new framework. And we've found several great possibilities.

To start, we’ve created analogues for most of our core DevExpress libraries on the new .NET Core 1.0 release. The core DevExpress libraries that can and do support the new .NET Core framework vary from products like our Data library to the Dashboard. It's still too early to announce any formal support for .NET Core 1.0 but we will announce each product in the future once we've crossed the T's and dotted the I's. Therefore, once we've fully prepared them for a CTP or a release version.

Dashboard on Linux

For now, we've seen promising results. For example, we compiled our Dashboard Designer (and Viewer) with the new DevExpress .NET Core-compatible libraries (that we built), and ran them on Windows and Linux servers.

That's right, the DevExpress Dashboard running on a Linux server! Exciting times!

Cross-platform PDF Export

We've also been working with a .NET Core version of our excellent printing library. Of course, without the GDI it can be limiting to what we can provide when you consider that these tools may run on Linux or MacOS. This means that we can generate PDF files for different platforms (assuming that the things like the necessary fonts are installed on the platform). 

What's next?

DevExpress will continue to improve our support for the ASP.NET Core framework and we're investigating other DevExpress platforms and tools that can help you leverage the .NET Core framework as well.

Keep an eye on our blogs and newsletters for more information in the coming months.

To get started with the ASP.NET Core 1.0 release, please take a look at the following resources:

• DevExtreme ASP.NET TagHelpers by reading the latest blog posts.
• DevExtreme ASP.NET MVC Wrappers | Helpful blog post

Register for the Webinar

Be sure to sign up for the upcoming 'DevExpress and ASP.NET Core' webinar where I'll demonstrate examples and answer any of your questions. Sign up here:

Webinar: DevExpress and ASP.NET Core: Modern Web Development

Thanks! What do you think about ASP.NET Core, .NET Core, and DevExpress' support for the new frameworks? Drop me a line below.

In the v16.1 release, we've added TypeScript Type Definitions for DevExpress ASP.NET WebForms and MVC controls. So now you can write your applications using TypeScript with full support for our intellisense, typechecking, and other great features of TypeScript.

A few days ago, our pull request to the DefinitelyTyped repository was accepted and our type definitions became available here: DevExpress TypeScript Type Definitions - Github.

How to get started

To use the new TypeScript support in your project, simply use one of the following options:

Option A

Install our nuget package:
DevExpress TypeScript Type Definitions - Nuget package.

This package has the latest version of our .d.ts file.

Option B

Copy the "devexpress-web.d.ts" file from our installation folder to your project. The installation folder is typically located here:

C:\Program Files (x86)\DevExpress 16.1\Components\Sources\DevExpress.Web.ASPxScriptIntelliSense\devexpress-web.d.ts

Option C

Download the "devexpress-web.d.ts" file from GitHub.

Option D

If you have the TypeScript Definition Manager installed, then use the following command:

“typings install dt~devexpress-web --global”.

Any of the above options help you to get the necessary files into your project so that you can use begin to use our Typescript definitions.

Example

You can see an example of how to use typescript with our definitions here:

DevExpress TypeScript Type Definitions - Github

This .ts file is based on the Scripts.js file from our HotelBooking.Tablet demo.

Thanks!

Did you miss this recent webinar on how to use DevExtreme with ASP.NET Core? Check out the full video here:

In the webinar video, I discuss and demonstrate the UI controls that DevExpress has available for you in ASP.NET Core. (Note: I use the words 'control(s)' and 'wrapper(s)' to mean the same thing for this blog post)

Webinar Agenda

1. DevExtreme ASP.NET MVC Wrappers for ASP.NET Core.
2. I demonstrate a thorough getting-started experience with the ASP.NET MVC Wrappers (using ASP.NET Core):
   a. File -> New using the new DevExtreme Visual Studio project template
   b. Adding wrappers to your project
   c. Customizing the wrappers
   d. Events
   e. Templates.
   f. DevExtreme ASP.NET Core demos on GitHub
   g. Docker and DevExtreme MVC Wrappers running on ASP.NET Core in a Linux docker container!
   h. DevExtreme TagHelpers for ASP.NET Core
   i. Experiments with ASP.NET Core and other DevExpress products like Dashboards running on Linux.
3. Current status, future plans, and a Q&A with the live audience.

I'd love for you to watch the video, try the new DevExtreme 16.1: ASP.NET Core UI Controls, and then give us your feedback. You can email me, drop me a comment below, or even tweet me.

Thanks!

The DevExtreme v16.1.5 minor release is now available and included in this minor release is the DevExtreme ASP.NET MVC Wrappers (CTP) for ASP.NET Core:

To learn more about DevExtreme and ASP.NET Core, check out my recent webinar:

What's included?

By installing this minor release, you'll get:

A File-New getting started experience:

All the DevExtreme Widgets available directly through Razor syntax:

Try it today!

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

DevExpress ASP.NET Reporting is a great solution for your reporting needs. However, it's a server-side (ASP.NET) solution which means you cannot just plug it into a client-side app. So how do you display your XtraReports in a client-side app?

bower install xtrareportsjs

XtraReports has added a client-side report viewer and designer in recent releases. We've taken the core set of necessary files (JavaScript, CSS, etc.) and packaged them into a convenient bower package.

To display reports on the client-side:

1. First, you'll need a web service to deliver the reports.
2. Then, install this bower package in your client-side app.
3. Finally, you'll need to setup your client-side app so the XtraReports client-side viewer can display the reports.

Ok, so that's the overview of the steps. To see all the gory details, watch my recent webinar video.

Webinar Video

In the webinar video, I discuss and demonstrate the how you can display DevExpress ASP.NET Reports in client-side apps.

T370591 Sample

There's also a fully contained sample that you can download and run on your local machine: T370591 - How to use HTML5 Document Viewer within a DevExtreme application

I'd love for you to watch the video and then try the sample too.

What do you think about sample? You can email me, drop me a comment below, or even tweet me.

Thanks!

Good news, we've just released version 16.1.1 of the ASP.NET AJAX Control Toolkit today. This release includes new features and several bug fixes.

Continuous Integration - AppVeyor

In the last release, we moved this open source project from CodePlex to GitHub: ASP.NET AJAX Control Toolkit - New Release v16.1 and GitHub Hosted!

Hosting ASP.NET AJAX Control Toolkit on GitHub now provides us new benefits. One of the major improvements is AppVeyor CI integration which allows to:

• Ensure that every commit pushed by a contributor doesn’t break any automated tests
• Easily share build results

That last statement means that you no longer have to wait for NuGet packages or build hotfix by yourself. Simply download the latest build from AppVeyor and update your project.

v16.1.1 - Major Changes

Tabs Custom CSS Fix

We've fixed a major issue with Tabs regression by introducing a new property: CssTheme.
If you set the CssClass attribute to the TabContainer then please make sure the CssTheme attribute is set to None. By default, it is set to XP, so no further actions are required if you run Tabs with default style settings.

AjaxFileUpload New Setting: Temp Folder Path

A new setting was added to AjaxFileUpload that allows specifying temporary folder path. This setting is configured via Web.config:

<ajaxControlToolkit>
  ...
   tempFolder="~/Temp"/>

This parameter allows AjaxFileUpload to operate in a Medium trust environment, if set to an application (sub)folder. You can run the AjaxFileUpload control in a Web farm too just make sure that this path is set to a network folder.

HtmlEditor Deprecated

Starting with this v16.1.1 release, we have deprecated the HtmlEditor in favor of HtmlEditorExtender. To avoid breaking changes we will still included the HtmlEditor control in the release.

However, the HtmlEditorExtender is a much better option and we recommend that you use it instead of the deprecated HtmlEditor. For example, the HtmlEditorExtender:

• has improved security because it sanitizes user input
• is smaller in size
• and has a customizable toolbar

Please read this blog post to learn more about HtmlEditorExtender.

ValidatorCalloutExtender is Compatible with Unobtrusive Validation

Unobtrusive validation was introduced in .NET Famework 4.5 release. This validation uses HTML5 data-* attributes instead of JavaScript code emitted to a page.

The ValidatorCalloutExtender can now work with the latest versions of the full .NET framework (.NET 4.5+).

Helpful links

• GitHub v16.1.1 release notes
• ASP.NET AJAX Control Toolkit Documentation
• How To Report An Issue

Helpful documentation articles are available here:

• Samples/Demos
• Installation Guide
• Uninstall Guide
• Troubleshooting Installer Issues
• Visual Studio IDE support
• Browser support
• Upgrading from v7.x and below

Download v16.1.1

You can download the latest release here:

Click the download button above and the get the latest bits.

Or use the Nuget package: ASP.NET AJAX Control Toolkit Nuget package

Or download the installer and/or source from GitHub:

• AjaxControlToolkit.Installer.16.1.1.exe
• Source code (zip)
• Source code (tar.gz)

Try DevExpress ASP.NET

We’d like to thank you for installing the DevExpress Edition of the AJAX Control Toolkit and look forward to your feedback as you begin using it.

When we took over the fabulous ASP.NET AJAX Control Toolkit, our goal was to reach those web developers who want to use great web user interface controls for their web projects and DevExpress ASP.NET provides that and much more.

Try the free DevExpress 30 day trial.

Email: mharry@devexpress.com

Twitter: @mehulharry

In the June release of DXperience v16.1, we introduced two new mobile themes:

1. Material Theme

The first new theme is called Material and it's based on Google's Material design. And it looks great:

You can see from the video above that this theme has touch animations. Therefore, when you click or touch certain elements, you'll see a brief animation.

The Material design theme has larger touch targets when compared to other DevExpress ASP.NET themes. So it's probably best to use it for mobile scenarios. But don't let me stop you from using it for your desktop scenarios too; after all, we all have touch screens, right?

2. iOS 9 Theme

The new iOS 9 theme replaces our older iOS theme. This new iOS 9 theme is based on Apple's iOS 9 design guidelines.

The new iOS 9 theme also provides larger touch targets so that your end-users can use their fingers as touch inputs on mobile devices (similar to the Material theme).

Check out this short video to see it in action:

16.1 What's new webinar

In case you missed it, check out the v16.1: What's New for ASP.NET Webforms and MVC extensions

In the webinar, I discuss the new themes and other new items that we introduced in the v16.1 release.

Customizable

Both of these new themes are customizable. You can change the base font or base color easily using the DevExpress ASP.NET Theme Builder tool. Learn more here:

• Blog: ASP.NET: Beautiful custom themes
• Documentation: ASP.NET Theme Builder

Download v16.1 today and try one of the new mobile-friendly ASP.NET themes!

Which theme is your favorite? Drop me a line below, thanks!

When we announced the new DevExtreme ASP.NET MVC Wrappers (CTP) a few weeks ago, someone asked if Visual Basic (VB.NET) would be supported.

VB.NET support for DevExtreme ASP.NET MVC Wrappers is now available in the v16.1.5 release.

Project Template

There's a new VB.NET project template to help you get started:

When you select this project type, a new, ready-to-run, VB.NET project is created for you:

This project contains code and examples of:

• WebAPI Service
• DevExtreme MVC Grid Wrapper (connected to WebAPI service)

Watch, Download, and Build

Watch the webinar to learn more about DevExtreme MVC Wrappers:

Download v16.1.5 and try DevExtreme MVC Wrappers today.

Then give us your feedback. You can email me, drop me a comment below, or even tweet me.

Thanks!

Good news, the DevExtreme widgets are now available as separate modules in the v16.1 release! Modules provide benefits and are key components in Modularity:

Modular programming is a software design technique that emphasizes separating the functionality of a program into independent, interchangeable modules, such that each contains everything necessary to execute only one aspect of the desired functionality. Wikipedia

Separate DevExtreme widget modules can help you create a smaller bundle of necessary scripts that need to be loaded for your project.

However, there is a big warning with modules: You are now responsible for making sure to include the necessary DevExtreme modules that are referenced in your project. If you do not include the necessary modules then your project will have website errors.

I demonstrate and discuss these points in the webinar below.

Watch the webinar

Watch my recent webinar to learn how to use DevExtreme Modules with RequireJS and WebPack:

Links to helpful items

Here are several helpful links that were mentioned in the webinar:

DevExtreme links:
- DevExtreme examples on GitHub - These are the main DevExtreme module samples
- DevExtreme Basics: Add a wiget

RequireJS:
- RequireJS - Why
- RequireJS - Why AMD

WebPack:
- WebPack - Getting Started
- Webpack: When To Use And Why

Other links:
- Hanselman's blog post on NPM
- RequireJS optimization
- Bower packer manager

I'd love for you to watch the video, try the GitHub DevExtreme examples, and then give us your feedback. You can email me, drop me a comment below, or even tweet me.

Thanks!

Did you know that the DevExpress ASP.NET HTML Editor control has three major features to help you work with Microsoft Word and different document formats? Let's explore these three major features:

• Import
• Export
• Paste (from Word and paste options)

Watch this video to learn how importing, exporting, and pasting with the DevExpress ASP.NET HTML Editor:

Below are several of the links to demos and documentation mentioned in the video.

Import

The DevExpress ASP.NET HTML Editor can import several different formats:

• Rich Text (.rtf)
• Office Open XML (.docx)
• MIME HTML (.mht)
• Open Document (.odt)
• Plain Text (.txt)

When importing, the DevExpress ASP.NET HTML Editor will read the source format and convert it to HTML. The control's Importmethod provides you several overloads to make importing easier.

See it in action by testing the Import demo.

Export

The DevExpress ASP.NET HTML Editor can export several different formats:

• Rich Text (.rtf)
• Office Open XML (.docx)
• MIME HTML (.mht)
• Open Document (.odt)
• Plain Text (.txt)
• Portable Document (.pdf). Available for export only.

Your end-users can export directly from the HTML Editor control's toolbar:

Watch the video to learn how to easily add an export button to your DevExpress ASP.NET HTML Editor toolbar.

You can also programmatically export using the export method from the ASP.NET server-side or client-side.

Test the HTML Editor's toolbar export capabilities now.

Paste

Your end-users have two great ways to paste:

1. Paste from Word Dialog

The Paste from Word dialog allows end-users to paste the text from a Word document using the clipboard. Pasting the text using this dialog preserves text formatting and font settings. End-users can opt not to preserve the text's font family.

2. Paste formatting

The DevExpress ASP.NET HTML Editor control provides the capability to automatically format pasted HTML content based on the PasteMode property, which can be set in one of the following values:

• SourceFormatting - The formatting of the pasted content is retained. A style definition that is associated with the copied text is copied to the destination document.
• MergeFormatting - The formatting of the pasted content is mostly discarded. However, emphasis formatting, such as bold and italic text, is retained. The content takes on the style characteristics of the paragraph where it is pasted. The content also takes on any direct formatting or style properties of the element that immediately precedes the cursor when the content is pasted.
• PlainText - The formatting of the pasted content and non-text elements, such as pictures or tables, is discarded. The text takes on the style characteristics of the paragraph where it is pasted and takes on any direct formatting or character style properties of text that immediately precedes the cursor when the text is pasted. Graphical elements are discarded, and tables are converted to a series of paragraphs.

End-users can change the formatting of the pasted HTML content using paste options bar buttons, which appear in the top right corner of the design area after the content is pasted. By default, this functionality is disabled.

See it in action by testing the Paste Formatting demo now.

In the v16.1 release, we included a new project template for DevExpress ASP.NET controls: Bootstrapped Web Application.

(click an image to see larger version)

Bootstrap is one of the most popular responsive web frameworks. Our new project template allows you to now create a new web application that uses the Bootstrap framework elements (CSS templates and UI components) with DevExpress ASP.NET controls.

Clarification

The Bootstrap project template that I'm discussing in this blog post relates to the current set of (100+) DevExpress ASP.NET and MVC controls. We're also working on a new of ASP.NET controls that will better support Bootstrap themes. Please read this blog post for more information on that project.

The benefit of this new Bootstrap project template is that you get a responsive layout using Bootstrap is very useful. However, there is one caveat, the themes from DevExpress controls and Bootstrap are not compatible. That is why this Bootstrap template can help you because it uses the DevExpress ASP.NET Moderno theme which works well with Bootstrap.

Project template

The Bootstrap project template wizard provides a complete (sample) web application. The project includes all the necessary files for Bootstrap and DevExpress controls to work together:

Blog sample

The new Bootstrap project template creates a sample Blog website. The website use the default layout of a typical Bootstrap website with a banner image and menu on the front page. The DevExpress ASP.NET Menu and Image Slider controls are used here and work well within Bootstrap:

When the browser width is reduced, the menu and image adapt to the new layout:

There's also a blog page that uses the DevExpress ASP.NET GridView:

This page also adapts when the browser width changes:

What do you think about the new DevExpress ASP.NET Bootstrap project template?

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

Twitter: @mehulharry

Good news! We've added support for Microsoft's ASP.NET Identity membership system. What is ASP.NET Identity? Pranav, the Microsoft PM, describes it best here:

ASP.NET Identity allows you to add login features to your application and makes it easy to customize data about the logged in user. - Pranav Rastogi

ASP.NET Identity membership system replaces and improves on several of the older ASP.NET membership systems. And this new system brings with it several benefits:

• One ASP.NET Identity System
• Ease of plugging in profile data
• Role provider
• Claims based
• Social login providers
• Azure Active Directory
• and more!

I recommend reading the "Introduction to ASP.NET Identity" blog post.

In all fairness, ASP.NET Identity has been around for a couple of years now. So I'm happy that we're providing support for it from DevExpress Project templates too.

DevExpress ASP.NET Project Wizard Integration

When you use the DevExpress ASP.NET Project Wizard with v16.1 or above, under the 'Site Configuration' tab, you'll see a dropdown that allows you to choose the authentication model.

The default will be the new 'ASP.NET Identity' model because most of the Microsoft project templates default to this improved authentication model. You can change it and select one of the older ones or none.

However, one of the key benefits of providing Microsoft ASP.NET Identity support through the DevExpress Project templates is that your web project can also use the excellent DevExpress ASP.NET controls for login purposes. This allows you to use any one of the excellent DevExpress ASP.NET themes and maintain a beautiful site.

Therefore, after the project is created, the DevExpress project wizard will have created all the necessary pages for you for login purposes. And these pages will use the necessary DevExpress ASP.NET controls:

Learn more about ASP.NET Identity

The DevExpress project templates are exposing the Microsoft ASP.NET Identity system for you. Therefore, to learn more about ASP.NET Identity's customization, implementation, etc.; I recommend you watch this video:

Or watch these other helpful Channel 9 videos.

Do you use the ASP.NET Identity system with DevExpress ASP.NET controls?

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

Twitter: @mehulharry

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.

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:

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

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:

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 = GetStreamFromCusromDocumentStorage()) {
        ASPxSpreadsheet1.Open(newUniqueDocumentId, DocumentFormat.Xlsx, () => stream);
    }
}

private FileStream GetStreamFromCusromDocumentStorage() {
    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[] GetByteArrayFromCusromDocumentStorage() {
    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!

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:

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!

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 powerful user interface, visual test recording, and full DevExpress support.

Therefore, starting today, we're splitting TestCafe into a lite (and free) open-source version. And the current commercial TestCafe 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 develop faster, 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 with a 24-48 hour response time, 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 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 result reports. However, they will be through the CLI.

Get started now!

Try the open-source TestCafe:

• GitHub page
• Website

If you'd like to try the current visual-based TestCafe, then download a free 30 day trial. This TestCafe will be known as TestCafe Studio and existing customer 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!

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!

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:

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?

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:

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:

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

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.

What do you think of these improvements to the DevExpress ASP.NET Spreadsheet control? Drop me a line below, thanks!

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:

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!

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