ASP.NET Ribbon Control Enhancements (Coming soon in v14.2)

The DevExpress ASP.NET Ribbon Control is getting three useful enhancements for the v14.2 release:

1. Dialog Box Launcher

You can launch a custom dialog box right from the Ribbon's UI using the new DialogBoxLauncher buttons that are integrated into the control:

DevExpress ASP.NET Ribbon - DialogBox launcher buttons

The DialogLauncher buttons are available in the ribbon groups. This look and feel is exactly how the Microsoft Office Ribbon bar implements them.

You can enable the button using the RibbonGroup.ShowDialogBoxLauncher property.

Check out this demo of the ASPxRichEdit control which uses these buttons to launch custom dialogs:

DevExpress ASP.NET RichEdit - Ribbon Dialog

New Client-side Event

The DevExpress ASP.NET Ribbon control has supported a great client-side API and numerous events since its launch. And now for v14.2, we've also added the DialogBoxLauncherClicked event. This event is fired when the new dialog box button is clicked. This allows you to call custom dialogs.

2. DropDown Toggle Button

A new Dropdown Toggle button has been added for the Ribbon button collection. The new Item type is called RibbonDropDownToggleButtonItem.

You can add the new button inside the parent dropdown button. Check out this demo of the ASPxRichEdit that uses the new dropdown toggle button of the ASPxRibbon control:

DevExpress ASP.NET RichEdit - Dropdown Toggle in Ribbon

The new dropdown toggle button also allows you to check the items.

3. Server-Side Events

You now have two new server-side events in the ASPxRibbon control:

  1. CommandExecuted - lets you process a call on the server-side
  2. DialogBoxLauncherClicked - allows you to launch a custom dialog box (see item #1 above)

Previous versions of the ribbon control did not have server-side events. However, server-side events are important as there are things that are better processed on the server instead of the client (large database calls, complex/custom logic, exporting, etc.)

ASP.NET MVC & WebForms

The DevExpress ASP.NET Ribbon control is available for both ASP.NET MVC & WebForms platforms. And all the above enhancements are available in both versions!

Check out the online demos here:

Thanks!

Build Your Best - Without Limits or Compromise

Try the DevExpress ASP.NET MVC Extensions online now: http://mvc.devexpress.com

Read the latest news about DevExpress ASP.NET MVC Extensions: http://dxpr.es/ov1tQa

Download a free and fully-functional version now: http://www.devexpress.com/Downloads/NET/

ASP.NET Word-Inspired Rich Text Editor (Preview release coming soon)

It's finally time to introduce the DevExpress ASP.NET Rich Edit control - ASPxRichEdit. It has all the powerful editing features of great text editors like Microsoft Word, but online. And it’s beautiful, check it out here shown with the Mulberry theme:

DevExpress ASP.NET RichEdit Control

Benefits

With the DevExpress ASP.NET RichText editor control, you can craft and edit rich-text documents with your ASP.NET sites with ease. It's WYSIWYG!

  • A familiar interface like Microsoft Word for editing (with Ribbon UI)
  • Cross-browser compatible (even touch mobile browsers)
  • A rich user interface that's customizable
  • Multiple themes support
  • Document management, export, and print capabilities
  • And more... (read the features section below)

Preview for 14.2

This first version of the ASPxRichEdit control is a preview version and it's available in the 14.2 release.

A preview version means that we’re not finished with the features, stability, and other goodies that we want to bake into the new ASPxRichEdit control. For example, we're planning to add support for mail merging, table and lists support, float objects, table of contents, and more. And we are already working on these features for a future major release.

Warning: You are free to use this control in your websites today. However, be aware that it is a preview version and therefore, the API, properties, and/or features may change.

That said, the new ASP.NET RichEdit control has enough of a feature set that we'd love for you to test drive it and give us your feedback.

Features

The preview version of the ASPxRichEdit control includes:

  • Page settings support (margins, page size, orientation)
  • Paragraph settings support (vertical and horizontal spacing, alignment, indents)
  • Document styles support
  • Multiple formats supported: DOCX, RTF, TXT, XML, ODT, EPUB, MHT, and DOC
  • Multi-column text mode
  • Different kinds of breaks (page, column, section)
  • Inline images (insert, resize)
  • Horizontal document ruler (similar to desktop rich-text editor)
  • Clipboard support (includes inserting images from clipboard)
  • Built-in document manager
  • Tab stops
  • Print support
  • Full-screen mode
  • and much more...

Design time support

The DevExpress ASP.NET RichEdit control has great design time support with custom dialogs to help you build the toolbars, customize client-side API, and more:

DevExpress ASP.NET RichEdit Control

HTML vs Rich Editor

I'm sure you already know that DevExpress also offer the excellent ASP.NET HTML Editor control, ASPxHtmlEditor. So why did we introduce another document editor?

The ASPxHtmlEditor is a powerful control that was designed to edit HTML content.

However, you our excellent customers wanted a true rich text editor. We've listened to your feedback and decided last year to start working on this major new control, the ASPxRichEdit.

Rest assured that the ASPxHtmlEditor is still available and we have plans to improve it for future releases.

For now, use the:

  1. ASPxRichEdit control for editing rich text content.
  2. ASPxHtmlEditor control for editing HTML content.

How does it work (internal goodness)?

The new ASPxRichEdit has some intricate code that our team been working on for almost a year. Check out some of the many pieces that go into making a complex, fast, and powerful control like the ASPxRichEdit:

New JavaScript text engine

We've developed a new JavaScript text processing engine specially for the ASPxRichEdit control. And this engine controls everything in the document editing process including: model manipulations, layout calculations & presentation, selection processing, history, clipboard, input operations, and client-server model synchronization. Yes, it's a does a lot and it does it efficiently too. Take a look one of the ASPxRichEdit demos in 14.2 (coming soon).

Server & client-side in harmony

The ASPxRichEdit control has a unique server-side setup that differs from classic ASP.NET controls. The server part of ASPxRichEdit control doesn't generate the (HTML) rendering. Instead, the ASPxRichEdit interacts with the document file by reading its' content, sending JSON representation of the model to the client-side, and then applying changes from the client model to the original document.

Therefore, the Server and client objects work separately. And they communicate through JSON requests and responses via a special ASP.NET handler. So, when user changes the document on the client-side then the changes are all applied to the client model immediately. However,on the server side these changes are sent asynchronously and transparently to the end-user.

This setup results in an efficient and harmonious experience for the end-user because this communication does not have an effect on the UI performance. In fact, it helps give you a smoother experience overall.

Because the client-side object model is a big part of the ASPxRichEdit, let's take a look at it's two big parts: the layout engine and event processor.

Layout engine

The layout engine is the central piece the ASPxRichEdit's client-side object. The layout engine reads the document model and then transforms it to a layout for the end-user. The Layout engine does this by calculating each word from the model, measures its size, and places it in the layout: box after box and row after row.

Layout is very important for a rich text editor because it has to be accurate (WYSIWYG) and bad layout can effect performance. The layout engine also needs to take into account all existing settings of the document to create the correct layout. Things like: page size and margins, paragraph settings, tab stops, and section settings. This type of layout processing is not possible in standard HTML editors.

Event processor

The other side of the client control is the event processor. It controls all user actions, from text typing to mouse moving, and working with the clipboard. It captures user actions and transforms them to a set of commands. For instance, when user is moving the mouse with the left button pressed down then the event processor should determine the mouse cursor position relatively to the document model and call the SetSelection command. If mouse moving has started on a selected part of the document then it draws the dragging cursor pointer below the cursor and executes the MoveContent command when the user releases the mouse button.

As you can see, even a simple task can have a complex set of events associated with it and it's the event processor's job to read and execute them properly.

Canvas manager

The most visible part of the control is the canvas manager and its document rendering.

The canvas manager is responsible for what the end-user sees. The canvas manager essentially generates the HTML markup for layout representation, applies changes when the user interacts with the document, applies formatting commands, and is also responsible for scrolling. It also tracks all changes in the layout, determines what to show to the end-user, and finally draws the canvas (editable content of the ASPxRichEdit).

ASP.NET MVC support?

No, there is no ASP.NET MVC extension available in 14.2 release, however...

Yes, there will be an ASP.NET MVC extension when we release the final version of the ASPxRichEdit!

Available in the 14.2 release

Now that you're excited about this great new ASP.NET control, remember 2 things:

  1. It's a preview version (for now).
  2. And it's available in the 14.2 release.

What do you think about the new ASPxRichEdit control? Drop me a line below.

HTML 5 JavaScript DataGrid and CodeMash 2015 Speakers/Sessions Demo

Check out this example of how the versatile DevExtreme DataGrid Widget can easily bind to a WebAPI service and give you great client-side UI and functionality:

DevExpress DevExtreme Web DataGrid - CodeMash 2015 Sessions and Speakers

Background

My friend Jason Follas is one of the organizers that puts on the excellent CodeMash conference.

One of the many tasks of managing a conference is to setup the sessions and speakers. And Jason wanted to create a fast client-side (JavaScript) user interface to display the sessions and speakers.

So Jason took the excellent DevExpress DevExtreme DataGrid widget and bound it to this WebAPI feed that returns a list of speakers and session data.

By using the DevExtreme DataGrid widget, you get features like sorting, filtering, and much more.

How can I do that?

  1. Create a simple HTML page like this: DevExtreme Documentation: Configure DataGrid. You'll notice that you don't even need to host the DevExtreme libraries on your server. You can use our CDN!
  2. You'll need a source of data. The data could be local but it makes sense to put it on a web server when you have a large amounts of data. I recommend you create an OData feed using ASP.NET (WebAPI or WCF). *
    The CodeMash WebAPI feed is hosted on Azure and bound to the DevExtreme DataGrid using the getJSON call:
    *$.getJSON("https://cmprod-speakers.azurewebsites.net/api/sessionsdata").then(function processSessionData(data)
  3. And deploy! You could setup a few more options and features of the DevExtreme DataGrid but at this point, you're ready to deploy. And because the libraries are hosted on our CDN, you only need to deploy one file!

Online sample and source code

Try the DevExtreme DataGrid that displays the CodeMash 2015 speakers and sessions online here:

DevExtreme DataGrid and CodeMash 2015 Speakers/Sessions Demo

(For the source, simply right click and select view-source).

Learn more

Watch this 9 minute YouTube video to learn about DevExtreme DataGrid:

DevExpress DevExtreme - HTML5 DataGrid

Then watch this webinar to learn about different ways to databind the DevExtreme DataGrid:

Sipping from the Data Firehose with DevExtreme

Cross-platform HTML 5/JS tools for next-generation mobile and web development

DevExtreme tools deliver an innovative solution for developers who want to create stunning, multi-screen applications across platforms and devices, from Windows 8 devices and the iPad to smartphones like the iPhone and Android. With the power of HTML5, CSS and JavaScript tools in DevExtreme developers can also build interactive and engaging web applications that push the boundaries of user experiences to a new level.

Download a free and fully-functional version now: http://js.devexpress.com/

LONG LIVE The Ajax Control Toolkit - Open Source and now maintained by DevExpress

The venerable AJAX Control Tookit has been downloaded over 9 million times. THAT’S A LOT. It was created in a time before jQuery, in a time before AJAX, in a time before today’s modern web. However, it’s super useful, and we here at DevExpress appreciate that there is a lot of good use to be had in these kinds of libraries.

Some years have now passed and the AJAX Control toolkit has not kept up with changes in Visual Studio, changes in modern JavaScript, and changes in today’s web development. To be blunt, the library has significant issues, many unresolved, and yet it is still as popular as ever.

So what can be done to support the past, present, and promote the future? Should the toolkit die in a fire? Of course not. Should it be scrapped and rewritten? No. What it needs is an infusion of modern JavaScript energy, and it just turns out that we here at DevExpress have energy to spare.

What’s happening to the AJAX Control Toolkit?

Unfortunately, the Toolkit is one of those open-source projects where everyone believes that someone else is looking after it and fixing issues, with the result that no one does. We do not want to see it stagnate like this.

Some of our web developers have done some code analysis and spikes, and we have some solid ideas on how to fix the library and bring it into 2014 for use in the latest Visual Studio and beyond!

Enter Microsoft, then Exit Microsoft...

So, we contacted our friends at Microsoft (4 of them were named Scott) and offered to take over the maintenance of the toolkit. They were stoked about the possibilities and encouraged us to take over the project and forge ahead.

What’s Step ZERO?

There are issues. So our first priority is to get the toolkit to a stable condition -- at a minimum this will require adding tests and removing some of the half-finished changes -- and then adding back the newer functionality. This may involve rolling some things back a bit, but we intend to keep compatibility whenever possible. (We’re not going to do a Replace All “Microsoft.” to “DevExpress.”)

This initial work is bound to take a few months, after all, we have updates to our own controls to implement, so don't expect anything until early 2015. We'll post updates of our progress as we go.

Will it still be Open Source? Is this a Trick (™)?

Totally, it’s a trap. Seriously, it is and will remain Open Source Software (OSS). It will simply be “AJAX Control Toolkit maintained by DevExpress”....and hopefully you!

If YOU are passionate about the Toolkit, hit us up on Twitter or at mharry@devexpress.com and let’s talk. File issues, start discussions, and get involved!

Video Case Study: CancerSurviorLink.org redesign with Mike Palgon

Check out this video case study that shows how a two year old website was redesigned for newer mobile devices:

Video Case Study: CancerSurviorLink.org redesign with Mike Palgon

Mike shows us the new Cancer Survivor Link website. He also shows us the DevExpress ASP.NET controls that he's used and how they helped him.

CancerSurviorLink.org chooses DevExpress ASP.NET

In 2012, Mike chose the DevExpress ASP.NET controls for CancerSurviorLink.org.

And since then, he's been driven to redesign the website to include support for mobile devices, based on the feedback he's been getting. As you'll see in the video, Mike was still able to use the DevExpress ASP.NET controls for his excellent redesign because they easily helped him meet his goals for UI, mobile, and more.

Helping Cancer Survivors

I want to thank Mike for creating such a great site. The website helps cancer survivors link with their families and doctors to get and give updates. It's a truly inspirational website. Anyone can use the website so try it yourself and help spread the word.

Mike is still putting the finishing touches on the new version of website but it will be launched soon.

Watch the video to learn more:
DevExpress Case Study: Mike Palgon of HIMformatics

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

More Posts