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

May 2016 - Posts

  • ASP.NET Rich Text Editor - Spell Checking, Find & Replace and Predefined Styles

    Recently, I told you about the enhancements to the excellent DevExpress ASP.NET Spreadsheet control. Today, I'll tell you about our other major 'Microsoft Office' style control, the DevExpress ASP.NET Rich Text Editor. We've added some great new features that you and your end-users will appreciate. Let's take a look.

    UX Improvements

    The DevExpress ASP.NET Rich Edit now ships with a number of improved UX elements including:

    1. Built-in spellchecker

    We've extended the capabilities of our ASP.NET Rich Text Editor with spell check support which includes type-as-you-go error detection. End-users can activate the ASP.NET Spell Checker via the integrated context menu or a standard dialog:

    https://community.devexpress.com/blogs/aspnet/16.1Release/aspnet-richedit-spell-checking.png DevExpress ASP.NET RichEdit Spell Checker

    And this new feature uses the excellent DevExpress ASP.NET Spell Checker control to provide other benefits like custom dictionaries.

    2. Find and Replace functionality

    Much like Microsoft Word, the ASP.NET Rich Text Editor's new Find and Replace dialog allows end-users to locate and modify text within an open document. Unlike the browser's built-in "search within a webpage function," the entire document is available for all Find-Replace operations.

    https://community.devexpress.com/blogs/aspnet/16.1Release/aspnet-richedit-find-replace.png DevExpress ASP.NET RichEdit Find Replace

    3. Predefined character and paragraph styles

    To help improve content formatting within the ASP.NET Rich Text Editor, this release includes a new set of predefined styles for paragraphs, characters and tables:

    DevExpress ASP.NET RichEdit - Styles

    4. Tables support improvements

    We've also improved support for tables in this release. First, we've added a bunch of great new styles for tables:

    ASP.NET RichEdit Tables

    And second, we've improved mouse support with tables. End-users can adjust the table size using the mouse. And they can also drag the cell borders to change the column width or row height. Column sizing can also be done using ruler markers. End-users can also use the keyboard to navigate and select table cells. To navigate through cells, use the arrow keys, or Tab and Tab+Shift. To select cells, use Shift together with the arrow keys.

    5. Keyboard support in built-in ribbon

    With this release, you can now interact with the DevExpress ASP.NET Ribbon Control (tabs, groups, items) via the keyboard:

    https://community.devexpress.com/blogs/aspnet/16.1Release/aspnet-ribbon-keyboard-shortcuts.png

    New API For Developers

    Recently, many customers had interesting scenarios where they needed to interact with the DevExpress ASP.NET Rich Text Editor from the client-side. Good news, we've now exposed client-side API for the DevExpress ASP.NET Rich Text Editor.

    This new API allows you to obtain the current state of document elements (such as sections, paragraphs, tables) and perform the appropriate actions by executing commands. The available client side API is exposed through the following properties:

    • document - Provides access to structures allowing you to obtain the current information about certain document structural elements (such as sections, active sub-document, styles for characters, paragraphs and tables, and etc).
    • selection - Provides access to a set of methods allowing you to position the cursor within a document and to select document content elements.
    • commands - Provides access to client commands allowing you to programmatically accomplish virtually any task within a document (such as inserting characters, paragraphs, tables and pictures, changing element formatting, creating numbered lists, etc).

    Azure Web Farms support

    With this release, both the DevExpress ASP.NET Spreadsheet and Rich Text Edit controls can be used in web applications running on multiple Azure application servers.

    What do you think about the DevExpress ASP.NET Rich Text Editor's new features? 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 - UX Enhancements and UI Performance - (Coming soon in v16.1)

    ASP.NET Spreadsheet - UX Enhancements and UI Performance - (Coming soon in v16.1)

    You'll be happy to hear that not only did we improve the performance of the DevExpress ASP.NET Spreadsheet control in the v16.1 release, but we also added some great features too. Let's take a look.

    UX Improvements

    The DevExpress ASP.NET Spreadsheet now ships with a number of improved UX elements including:

    1. Custom header/footer when printing

    A new dialog (within the page-setup dialog) gives you the ability to define a custom header and footer before printing your spreadsheet:

    2. Mark a copied range using a dotted line

    The Spreadsheet control will now use dotted lines when you select a range and copy it to the clipboard. This is a handy feature that you're likely familiar with in Microsoft Excel. It helps you to visualize what items you've just selected.

    3. Fill handle

    The Spreadsheet control now gives you the ability to use a fill handle to complete data in a series. You can even use it to fill in months and days:

    4. Display/hide column and row headers

    The Spreadsheet control also let's you hide (or show) the column and row headers.

    UI Performance Improvements

    Our ASP.NET Spreadsheet has been optimized so you can deliver Office-inspired solutions that are both visually stunning and perform at the highest possible levels. Performance optimizations have been applied across the board, at the server and during client rendering.

    Take a look the following chart which shows the 'document load' and 'cell update' operations. You'll see how between v15.2 and v16.1, we've improved performance across all major browsers:

    Azure Web Farms support

    With this release, both the DevExpress ASP.NET Spreadsheet and Rich Text Edit controls can be used in web applications running on multiple Azure application servers.

    What do you think about the Spreadsheet control's new features and performance enhancements? 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).

  • HTML5-JavaScript Scheduler - Agenda, Timeline Month View, and more (Coming soon in v16.1)

    In the v16.1 release, we've added some great new features to the excellent DevExtreme Scheduler widget which runs completely on the client-side:

    1. New Agenda view

    You can now create a compact representation of appointments/events with the use of the HTML5 Scheduling widget's Agenda View:

    DevExtreme Scheduler - Agenda View

    2. New Timeline Month view

    Our HTML5 Scheduler now offers a Timeline Month View:

    DevExtreme Scheduler - Timeline Month View

    3. Time Zones Support

    The DevExpress HTML5-JavaScript Scheduling widget allows you to specify a time zone:

    DevExtreme JavaScript Scheduler - Time Zones Support

    4. Multiple Cell Selection

    You can also select multiple cells via the mouse or keyboard and create an appointment based on the selected cells when using our HTML5 Scheduling widget.

    DevExtreme JavaScript Scheduler - Multiple Cell Selection

    These features 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

  • HTML5-JavaScript Pivot Grid – Enhancements (Coming soon in v16.1)

    In the v16.1 release, we've added three great new features to the DevExtreme JavaScript Pivot Grid.

    1. Field Panel

    The field panel displays fields involved in summary calculation and allows to dynamically change report options (filtering conditions and sorting order) directly in the widget:

    DevExtreme Pivot Grid - Field Panel

    The field panel provides you the capability to change any field option at runtime using the context menu. You can easily reach this performing the required data calculations within the 'onContextMenuPreparing' event handler. So, you can implement a custom context menu with a collection of summary types, for example, sum, average, minimum, maximum, and etc. Also, you can specify a similar event handler for the DevExtreme Pivot GridFieldChooser widget.

    DevExtreme Pivot Grid - Runtime Summary

    2. Charts integration

    The DevExtreme Pivot Grid widget can handle processing large amounts of data easily. However, it's not easy to visualize large amounts of data. So one way to manage that is to use charts to summarize large amounts of data. And with the v16.1 release, the DevExtreme Pivot Grid can easily integrate with a chart to help you process large amounts of data and show a corresponding chart next to it!

    DevExtreme Pivot Grid - Charts Integration

    Simply pass a chart instance and additional settings for showing multidimensional data to the 'bindChart' method of DevExtreme Pivot Grid.

    3. Layout Enhancements

    Besides features mentioned above, the DevExtreme Pivot Grid widget includes some layout improvements. One of them is a tree layout mode designed for hierarchical items in a row header. By default, such items placed in row take too much space on the screen. However, using the new layout helps to optimize this area and use it more effectively.

    DevExtreme Pivot Grid - Row Header Layout

    The other new layout feature is relocatable data field header. Previously, data field headers could be displayed only in columns. Starting with the upcoming release, you can specify whether they are located in columns or rows.

    DevExtreme Pivot Grid - Data Field Area

    What do you think about these features? 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

  • HTML5-JavaScript TreeMap (Coming soon in v16.1)

    Check out the new DevExpress HTML5 TreeMap widget that's coming out in the DevExtreme v16.1 release:

    DevExtreme TreeMap

    The new TreeMap widget is a client-side JavaScript widget which provides powerful capabilities to display both flat and hierarchical data structures. And the TreeMap widget includes three predefined tiling algorithms:

    • Slice And Dice
    • Squarified
    • Strip
    • Or apply your own custom algorithm!

    DevExtreme TreeMap

    The new TreeMap widget provides several colorization methods of TreeMap tiles, such as discrete colorization, range, and grouped. And the widget provides API methods for drilldown implementation and manipulation of separate tiles.

    DevExtreme TreeMap

    What do you think about the new TreeMap widget? 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 DevExtreme TagHelpers for ASP.NET Core RC2 - (Now Available)

    Good news, Microsoft just released ASP.NET Core RC2, the second major update to their new ASP.NET Core framework.

    And I'm happy to say that we've updated our GitHub repo and released Nuget packages of our DevExtreme ASP.NET Core TagHelpers! Download and try them today with the latest release candidate (ASP.NET Core RC2).

    Download

    To get started, you'll first need to get Microsoft's latest Core release:

    1. Download Microsoft's latest RC2 here: ASP.NET Core RC2.

    2. Download the Nuget packages for DevExtreme ASP.NET Core TagHelpers: https://www.nuget.org/packages/DevExtreme.AspNet.TagHelpers/

    3. Follow (and Star) the DevExtreme ASP.NET Core TagHelpers project on GitHub: https://github.com/DevExpress/DevExtreme.AspNet.TagHelpers. Here you can check our code, view ReadMe, Wiki articles, submit issues, and more.

    ASP.NET Core is shaping up to be a great framework. And by using the DevExtreme TagHelpers with ASP.NET Core, your end-users will get the amazing DevExtreme User Interface, features, and functionality that they have come to love.

    You save several development hours by using our robust tools. The new DevExtreme ASP.NET TagHelpers help you to deliver great web solutions on the ASP.NET Core framework.

    Getting Started

    To get started using the new DevExtreme ASP.NET TagHelpers, please take a look this getting started guide:

    DevExtreme ASP.NET TagHelpers - Getting Started

    Then give us your feedback here: Issue Tracker

    What's included?

    The following 7 major widgets from our powerful DevExtreme library are available as TagHelpers for ASP.NET Core:

    • Grid
    • Chart
    • Pivot Grid
    • Pie Chart
    • Range Selector
    • Scheduler
    • Sparkline

    Demos of these widgets are available here.

    What is a TagHelper?

    TagHelpers are a new feature of ASP.NET Core (MVC 6) that allows preprocessing of HTML attributes with server side content. As Scott Hanselman demonstrates, TagHelpers provide cleaner code:

    Open-Source MIT License

    The new DevExtreme ASP.NET Core TagHelpers are provided on GitHub and Nuget with an MIT license. The source is open for you to view, fork, submit pull requests, etc.

    To use the DevExtreme ASP.NET TagHelpers, you will need a DevExtreme license.

    Preview Version

    We're introducing the new DevExtreme ASP.NET TagHelpers as a preview version because:

    1. ASP.NET Core (MVC 6) has not been released. However, a second release candidate is available now.
    2. We're still perfecting and improving our TagHelpers.

    However, the new DevExtreme ASP.NET TagHelpers have enough of a feature set that we'd love for you to test drive them and give us your feedback.

    Try the latest bits now

    Have you tried the new DevExtreme ASP.NET TagHelpers yet? I'd love to hear about it. Drop me a line below.

    Thanks!

    @mehulharry


    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

  • HTML5 - JavaScript Data Grid - Banded Column Layout (Coming soon in v16.1)

    We're introducing a great new DataGrid feature – Banded Column Layout. With this feature, you can organize columns into the logical groups (bands), so that you can easily display and reorder entire column sets.

    DevExpress HTML5 Data Grid - Banded Column Layout

    While a column is banded, all existing column features still work great:

    • Column Resizing
    • Column Reordering
    • Column Fixing
    • Column Chooser
    • Export

    In fact, here's the column chooser in a banded layout:

    DevExpress HTML5 Data Grid - Banded Column Layout - Column Chooser

    Banded Column Layout is easy to define and customize. Here's a snippet that shows how the population column from the image above is banded:

    $("#gridContainer").dxDataGrid({
        dataSource: countries,
        columnAutoWidth: true,
        allowColumnReordering: true,
        columns: ["Country", {
            headerCellTemplate: function(container) {
                container.append($("<div>Area, km<sup>2</sup></div>"));
            },
            dataField: "Area"
        }, {
            caption: "Population",
            columns: [{
                caption: "Total",
                dataField: "Population_Total",
                format: "fixedPoint"
            }, {
                caption: "Urban",
                dataField: "Population_Urban",
                format: "percent"
            }]
        }, {
            caption: "Nominal GDP",
            columns: [{
                caption: "Total, mln $",
                dataField: "GDP_Total",
                format: "fixedPoint",
                sortOrder: "desc"
            }, {

    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

  • ASP.NET Vertical Grid Control - (Coming soon in v16.1)

    In the v16.1 release, we're introducing a new vertical grid control!

    The new DevExpress ASP.NET Vertical Grid control is based on our popular ASPxGridView control and that means you'll get powerful features and functionality built into the very first version.

    A vertical grid swaps the layout for rows and columns. So the columns that are placed at the top are now on the left. And the rows are displayed vertically. Here's a great example:

    DevExpress ASP.NET Vertical Grid

    This type of layout is great for certain types of data. For example, comparing products.

    Feature packed

    The new DevExpress ASP.NET Vertical Grid control is feature packed:

    • Large Database (Server Mode)
    • Header Filter (and other filter options)
    • Batch Editing and updating
    • Categories (allows you to group rows in category rows)
    • Conditional Formatting
    • Summaries
    • Exporting
    • Templates
    • and more features similar to the DevExpress ASP.NET GridView

    WebForms & MVC

    And I'm happy to announce that the new Vertical Grid control will be available for both ASP.NET WebForms and MVC platforms in the v16.1 release.

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

LIVE CHAT

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

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

FOLLOW US

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

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