Features in Essential Tools for ASP.NET

Ribbon UI

The Ribbon control implements a rich Office 2010, Sharepoint 2010, or Office Web Apps 2010-like command bar UI that can be easily integrated into your applications.

Office 2010 Ribbon UI

Gallery

A gallery consists of images and text that can be enclosed in a scrollable view in a ribbon as toolbar items.

Gallery Items in Ribbon Tabs

Multiline Gallery Items

Customizable Tab Groups

A collection of tab groups can be defined and their visibility can be contextually controlled. It also contains contextual tabs that appear only when certain types of objects are selected, helping to narrow one’s search for a specific command.

Ribbon Tab Groups

ButtonAdv Items

The ButtonAdv control is a fully customizable button control used to fill tabs in a ribbon. It supports custom styles for an enhanced appearance, and different orientations for greater control of the layout.

Image and Text

Image Below Text

Button With Submenus

Office Color Schemes

Blue, black, and silver color schemes can be applied to a ribbon.

Supported Color Schemes

Common Editors

All the common editors you need to create intuitive form-filling web applications are available, including AutoComplete, date–time editor, calendar, slider controls, text box variants (currency, masked-edit, numeric, and percent), color picker, and a generic and multicolumn drop-down.

Text Box-Based Editors

AutoComplete

Generic Drop-down Hosting a Tree in the Drop-Down

Editable Multicolumn Drop-Down

AJAX Slider

Calendar - Zoom out by clicking on header text

Rich-Text Editor

Essential Tools for ASP.NET's Rich-Text Editor control is a WYSIWYG (What You See Is What You Get) editor that enables users to easily create HTML-like content.

Rich Set of Tools for Editing

Built-in Find and Replace Dialog Box

HTML View of Edited Content

Tables in the Rich-Text Editor

Built-in Form Elements

The built-in spelling checker can be used on the RichTextEditor or any text control of your choice. The spelling checker can even check multiple controls at the same time.

Rich-Text Editor with Spelling Checker

Different Themes in the Rich-Text Editor

Menus

The Menu control is a rich, fully customizable control that is easily configurable in design time and comes with several built-in skins. The control also has many client-side events to help you implement AJAX functionality.

Horizontal Root Menu with Vertical Submenu

Horizontal Root Menu with Horizontal Submenu

Vertical Root Menu with Horizontal Submenu

Vertical Root Menu with Vertical Submenu

Scrollable Menus

Static Display of Certain Menu Levels

Templated Menu Item with Date-Time Picker

Context Menu Mode

Besides server-side events, the Menu control allows you to easily detect client-side click events and trigger callbacks on other portions of your page for efficient page updates.

Invoking Callbacks

Menu Item Client Code

Comprehensive Design-Time Support

Built-in Menu Skins

Toolbars

The ToolBar control is a rich, fully customizable control that is easily configurable in design time and comes with many built-in skins. Several types of toolbar buttons are supported and there are plenty of client-side events to help you implement AJAX-style functionality.

Text Only

Image Only

Image and Text

Toggle Button

Text below Image

Drop-down List Embedded in Toolbar Item via Templates

Horizontal Layout

Vertical Layout

Floating Toolbar

Comprehensive Design-Time Support

Toolbar Skins

TabStrip

The TabStrip control is a highly configurable tab control with support for different layouts, client-side events, dynamic content loading, built-in styles, and full design-time support.

Nested Tabs

Dynamic Content Loading

Dynamic Tab Loading to Support Instant Load

Tabs with Icons

Built-in Tab Skins

GroupBar

The GroupBar control lets you add Outlook-style navigation interfaces to your applications.

Built-In Group Bar Styles

Calendar Control inside a Group Bar Using Templates

Comprehensive Design-Time Support

Integrate Group Bar with Multipage to Automate Content Switching

LayoutPanel

The LayoutPanel control can be used to implement form layouts and table layouts in a Web page.

Rows and Cells in a Table Layout

Built-in Themes

Collapsible Layout Panels

File Upload and Progress

The UploadBox and UploadProgress controls can be used together to provide file upload functionalities with feedback. The feedback text is also customizable.

Upload Box with Upload Progress

Upload Box

The UploadBox control transfers files to a target location from the local machine. The control includes Browse and Upload buttons to enable users to specify which files are to be uploaded and to initiate the upload.

Upload Box

Integrated Pipeline Mode

The UploadBox control now supports an IIS 7 default pipeline mode, featuring both classic and integrated pipeline modes, without changing any default settings in IIS 7.

Multiple File Upload

Multiple files can be uploaded using multiple UploadBox controls, as shown in the following image.

Upload Multiple Files

The UploadBox control now supports an IIS 7 default pipeline mode, featuring both classic and integrated pipeline modes, without changing any default settings in IIS 7.

Waiting Dialog Box

The Waiting... dialog box notifies users of the state of an initiated process. This control can be used flexibly, either before a server-side callback or before a long client-side operation.

This also enables you to hide forms from user actions while a process is being executed.

Waiting Dialog Box

Custom Text in Waiting Dialog Box

Built-in Styles

Window Control

The Window control allows the creation of dialog box elements that can be dragged and resized.

Window Control

The Window control comes with full design-time support that allows you to populate it with content the same as you would in panels.

Design-Time Support

A wide range of predefined styles are available to instantly customize a window's appearance.

Predefined Styles—Windows

Built-In Dialog Boxes Based on the Window Control

Pop-up Control Container

The PopupControlContainer control is a panel-derived control that allows users to populate it with child controls and pop it up on demand in a page.

Pop-up Control Container with Hyperlinks

Align Pop-up Window with Parent Window

Progress Bar

The ProgressBar control uses AJAX to query and display the progress of an operation.

With a progress bar, you can trigger a long operation using callbacks, save the progress information in a session value, and then use this information to provide progress updates in the progress bar's AJAX server-side events.

Progress Value

Progress Bar with Customized Text

Waiting State

The progress bar can also be made to operate in a waiting state. This is useful when the actual progress percentage of a long operation is not known.

Progress Bar in Waiting State

Predefined Styles—Progress Bar

Rating Control

The Rating control allows users to rate products and services in a familiar 0–5 star rating model, including support for partial stars.

Rating Control

Rotator

The Rotator control lets you create dynamic news scrollers, slide shows, feature highlights, and stock tickers.

Rotator Control

Create templates defining slides and bind the Rotator to any data source.

Choose the rotation type from any one of the four available types. Content Scrolling—Default rotation type, scrolls through slides continually at the same speed.Smooth Scrolling—Changes scrolling speed from high to low through the content display.Random Slide—Random slides are displayed under this type of rotation.Slide Show—Rotator displays slides in a slide show.Auto Play Buttons gives users the ability to play and pause playing the slides.

Create live stock quotes or news headlines using our AJAX-based refresh options. The Rotator control smoothly integrates new content with old, avoiding sudden jumps in slides.

Live Stock Quotes

Live News Headlines

It can also be integrated with tickers to create dynamic news tickers.

Live News Ticker

Uses Internet Explorer's capabilities to provide advanced transition effects like fade and pixelate.

Rotator Transition Effects

Rotator Auto Play Button

Snap Control

The Snap control provides a very lightweight framework that you can use to allow users to move, dock, float, expand, and collapse elements in your Web pages.

Dockable Containers in a Snap Control

Collapsible Dock Conatiners in a Snap Control

The dock and float state of the containers can be persisted in the client machine for a personalized user experience. Plenty of client-side events can be raised to note dock state changes.

Splitter Control

The Splitter control allows you to divide a Web page into distinct, resizable, and optionally collapsible areas with draggable splitters. Splitters can be aligned horizontally or vertically.

There is also support for toolbox-style sliding panes that can be expanded and collapsed by the end user to the sides of the pages.

Splitter Control with Sliding Panes

Built-in Splitter Themes

The splitter can be configured with several resize modes.

End Pane Resize Mode

Adjacent Pane Resize Mode

Proportional Resize Mode

A Panel within the Splitter Shown in Full-Screen Mode

Drag-and-Drop Manager

This is a powerful drag-and-drop framework that allows you to implement rich client-like drag-and-drop functionality in your Web pages. Client-side events are raised during and after a drop to control the user actions.

Dragging an iImage into a Grid Using the Drag-and-Drop Manager

Load on Demand with AJAX

The TreeView control comes with built-in AJAX support.

Load On Demand

This popular feature is ideal for large trees. It lets you first load a tree on startup and then load child nodes on demand from the server through AJAX-style callbacks.

AJAX Load On Demand

Server-Side Events via Callback

When the AutoPostBack and Enable Callback options are enabled, all server-side events can be handled via callbacks instead of postbacks.

Appearance

Several built-in styles let you set up professional-looking trees instantly.

Built-in Tree Styles

Easily associate TreeView or individual tree nodes with custom styles that define the appearance of nodes for different states.

CSS-Applied Tree

Create unique ToolTips for each tree node or one for the whole tree.

TreeView Node ToolTip

Lines indicating a hierarchy can be customized or removed entirely.

Hidden Tree Lines

Display images to the left or right side of a tree node.

Image to the Right of a Tree Node

Add check boxes to individual tree nodes and detect click events on the client or server-side.

Check Boxes in a Tree

Content Template Support

The TreeView control supports embedding for any ASP.NET control, such as a group bar item, inside a tree node.

TreeView Content Template

Context Menu Support

You can expand the TreeView control's functionalities with custom context menus for any tree node.

Menu item clicks can be identified either on the client or server-side.

TreeView Context Menu

Drag-and-Drop Features

TreeView Node Drag-and-drop

The TreeView control supports extensive drag-and-drop features. Nodes can be dragged within a tree or to other trees. Postback and callback events are also available for drag-and-drop.

TreeView Node Drag-and-Drop

Drag-and-drop between TreeViews

You can easily extend the capabilities of your site with drag-and-drop functionality between tree views.

Both server-side and client-side events are available for this as well.

Drag-and-Drop between Tree Views

The TreeView control can automatically expand a collapsed node when the mouse pointer hovers over it while dragging a node.The TreeView control can automatically bring hidden nodes into view when the mouse pointer hovers over the edges of the tree.

Disable Drag-and-drop on Specific Nodes

Easily restrict drag-and-drop on certain nodes through the Dragging Enabled and Dropping Enabled properties.

Edit Node

The TreeView control allows users to edit a node and the appropriate server-side events are also generated via postback or callback.

Edit Node

Expand Effects

Transition Effects

Transition effects can be applied to groupbar items during expand and collapse. Various types of expand and collapse effects can be specified and their durations modified to control transition effects.

GroupBar Transition Effects

Keyboard Support

The TreeView control comes with full support for keyboard navigation. Nodes can be expanded, collapsed, and traversed using the keyboard.

Keyboard Support

Multi-Select Mode

The TreeView control supports a multi-select mode, which allows users to select more than one tree node at a time using the CTRL or SHIFT keys.

TreeView Multi-Select Mode

Navigate Mode

Use the NavigateUrl property to create a link to a specific Web page. The browser will be redirected to the embedded URL when the link is clicked. This is ideal for Help-like applications.

URL Embedded in a Tree Node

Node State Control

You have full control over the default state of a node. It can be set as expanded or collapsed, and checked or unchecked.

TreeView Combo Box

Create custom combo boxes with the TreeView control in a drop-down menu using our GenericDrop-Down control.

TreeView with Combo Box

Client-Side Events

There are several client-side events available.

Node Sorting

TreeView Node Sorting

The TreeView control's Sort function can be used to sort tree nodes based on the hierarchy and the node text.

Sort() is a server-side method that will sort all the nodes and subnodes based on the Text property of the nodes. You can override this by using the TreeViewNodeSorter property. After this method has been applied, the nodes that are added will be sorted automatically.

TreeViewNodeSorter will accept the instance of the class that interfaces with the IComparer. This property is used to override the default node comparison using the Text property of the nodes. Using this property, you can compare any node properties such as node text length, value, and more.