Mehul Harry's DevExpress Blog

This Blog


Mehul Harry is the DevExpress Web Program Manager. Follow him on twitter: @Mehulharry

Subscribe (RSS, Email)


August 2010 - Posts

  • Committing To ASP.NET MVC - New DevExpress Extensions (coming soon in v2010 vol 2)

    If you’re serious about developing with the ASP.NET MVC framework then you’ll love this announcement! DevExpress is throwing major support for ASP.NET MVC by offering you many new DevExpress ASP.NET MVC Extensions. And you’ll be happy to hear that the current DevExpress Extensions are also extending their functionality.

    New ASP.NET MVC Extensions

    The first release of DevExpress ASP.NET MVC Extensions, while exciting, was limited to just 5 extensions.

    Why? We wanted to make sure that you, our customers, wanted more for ASP.NET MVC from us. And your response was overwhelmingly, “Yes, please, give us more!”

    So, in the DXperience v2010 volume 2 release, you’re getting a ton great new ASP.NET MVC Extensions to help you leverage your ASP.NET MVC web projects.

    Editors MVC Extensions

    Check out these 20 new Editor Extensions that will make editing in ASP.NET MVC web projects easier:

    Built-In Validation

    First, the ASP.NET MVC Editor Extensions will support Built-In Validation. This provides you a built-in means to perform powerful validation on the Editor’s data. This means that you’ll have access to:

    • Automatically triggered editor validation
    • Required field
    • Regular expression
    • Customizable error frame containing the error description.
      MVC-Editors-BuiltIn Validation
    • Model Validation - Editors can be seamlessly integrated into the ASP.NET MVC 2 validation infrastructure (model-based validation is demonstrated)

    ComboBox Editor Extension

    The ComboxBox Extension combines the functionality of a single-line text editor, button editor and dropdown list editor. The ComboxBox Extension gives you:

    • Incremental filtering (StartsWith, Contains, None);
    • Loading items on demand via callbacks;
    • Multi-column mode (if items are taken from a data source);
    • Display value formatting

    DateEdit Editor Extension

    The DateEdit Extension combines the functionality of a single-line text editor, button editor and dropdown calendar. The DateEdit Extension will support:

    • Masked input support
    • Display value formatting
    • Prompt text displaying

    DropDownEdit Editor Extension

    The DropDownEdit Extension contains an edit box to display the editor value and a specific button, which opens a dropdown window whose content can be templated.

    • Allows defining its value based upon the value(s) of another control(s) integrated into the editor's dropdown window template.

    SpinEdit Editor Extension

    The SpinEdit Extension enables your end-users to edit numeric values with ease.  And it also gives you these features:

    • Small and large increment spin buttons to adjust the numerical value
    • Float and integer editing modes
    • Minimum and maximum allowed values
    • Display value formatting
    • Prompt text displaying

    TextBox Editor Extension

    The TextBox Extension is a single-line input editor with the following highlighted features:

    • Display value formatting
    • Masked input support

    Even More MVC Editor Extensions

    And there’s even more Editor Extensions that will be available to you. Check out this list:

    • BinaryImage
    • Button
    • ButtonEdit
    • Calendar
    • CheckBox
    • ColorEdit
    • HyperLink
    • Image
    • Label
    • ListBox
    • Memo
    • ProgressBar
    • RadioButton
    • RadioButtonList
    • TimeEdit


    Navigation MVC Extensions

    A website also needs to have navigational elements like our current Menu Extension. And with the DXperience v2010 volume 2 release, we’re adding the following navigational extensions:

    PopupControl Extension

    The PopupControl Extension makes it incredibly easy for you to display popup windows and hints on your web pages. And it gives you these great features:

    • Data Binding
    • Modal Mode
    • Templates
    • Client-Side Events
    • Client-Side Functionality 

    Splitter Extension

    The Splitter Extension’s panes can have different contents inside, including other extensions. The Splitter separators are used to resize the controls. And it comes with these built-in features:

    • Controls Resizing
    • Scrolling
    • Fullscreen Mode
    • Client-Side Events
    • Client-Side Functionality 

    UploadControl Extension

    The UploadControl Extension allows end-user files to be uploaded to the web application's server. And it supports:

    • Multi-File Upload
    • Callbacks

    TreeView Extension

    As of this writing, the extension is still getting the finishing touches in development. But I’m sure you won’t mind the early exciting news.

    The TreeView Extension displays a hierarchical collection of labeled items. And it’ll support

    • Data binding (to declarative hierarchical data sources)
    • Node content: text or text with image
    • Single node selection
    • Multiple node checking, recursive checking
    • Node templates

    CallbackPanel Extension

    The CallbackPanel Extension is a lightweight MVC Extension which allows its content to be dynamically updated via callbacks, preventing undesirable whole page postbacks.


    Rich-Text Html Editing

    HtmlEditor Extension

    And last but not least, you’ll be able to give you end-users a Rich-text WYSIWYG HTML editor extension for ASP.NET MVC. Its intuitive user interface enables even inexperienced users to edit HTML page content with ease. And it comes with these great features built-in:

    • Predefined tools for different content formatting (modifying fonts, paragraphs, inserting images and links, etc)
    • Support for custom toolbars and toolbar items
    • Three views to modify and preview the content - Design View, Html View, Preview
    • Customizable automatic content validation and transformation into the XHTML 1.0 Transitional compliant markup
    • Customizable response to ENTER key presses
    • Custom CSS  
    • Built-in Spell Checker (
    • Tables Support 

    We have some enthusiastic goals for ASP.NET MVC in the next release but the resources/time may not make it. Everyone’s working flat out to ensure that you get a quality release with all the new features and extensions mentioned above.

    What do you think about the new DevExpress Extensions for ASP.NET MVC in the DXperience v2010 volume 2 release? Drop me a line below and thanks!

    Follow MehulHarry on Twitter

    DXperience? What's That?

    DXperience is the .NET developer's secret weapon. Get full access to a complete suite of professional components that let you instantly drop in new features, designer styles and fast performance for your applications. Try a fully-functional version of DXperience for free now:

  • New Features For ASP.NET MVC 2.0 Extensions (coming in v2010 vol 2)

    Check out this list of the new features for the DevExpress Extensions for ASP.NET MVC 2.0 coming out in the DXperience v2010 volume 2 release:

    New Features

    The current set of ASP.NET MVC Extensions (i.e. GridView, Menu, NavBar, TabControl/PageControl, and RoundPanel) are getting some big features. Let’s dive in:

    Semantic HTML Rendering For More Extensions

    The TabControl and PageControl extensions will support semantic HTML rendering.

    Lightweight semantic HTML rendering has some big advantages:

    • Performance is increased because the amount of HTML output is reduced.
    • Accessibility is improved because screen readers understand semantic HTML
    • SEO is also improved because search engines also prefer semantic HTML

    In fact, 3 of the current DevExpress MVC Extensions render semantic HTML. The Pager, Menu and NavBar extensions render HTML using list items and CSS styling instead of tables. Other extensions like the GridView also get benefits because they make use of the Pager extension internally.

    GridView Extensions Gets Stronger

    The GridView ASP.NET MVC Extension is getting some powerful and useful new features:

    • LINQ Server Mode - Using a specific method, the GridView can be easily bound to 'LINQ to SQL Classes' and work with large amounts of data using server mode (by loading data in small portions, on demand)
    • Filter Row - A specific Filter Row UI element that allows end-users to filter grid data by entering text within its cells or picking values from its dropdown lists.
    • Focused Row - End-users can move row focus via mouse clicks.
    • Row Selection - End-users can select or de-select data rows by checking or unchecking corresponding check boxes displayed within a command column.
    • Exporting Data - The GridView's data can be exported to a file or stream in the following formats: PDF, XLS, XLSX, RTF

    Menu MVC Extension

    The same great menu scrolling feature available in the ASPxMenu will also be available in the DevExpress ASP.NET MVC Menu Extension:

    • Item Scrolling - Submenu item scrolling is supported to accommodate lengthy submenus within the browser window boundaries.

    TabControl MVC Extension

    The Tab Scrolling and Multiple-Tabs feature described here will also be part of the DevExpress ASP.NET MVC TabControl Extension:

    • Tab Scrolling - If the control's size doesn't allow all tabs to be visible within the tab header at one time, specific scroll buttons can be displayed to scroll tabs within the tab header.
    • Multi-Row Tab Header - Tabs can be displayed in several rows within the tab header. Multi-row tab's representation works only when the tab header is positioned on the control's top or bottom.

    These features will be part of the DXperience v2010 volume 2 release due to be released within 1-2 months.

    You can download, install and try the DevExpress ASP.NET MVC Extensions now.

    What do you think of the DevExpress ASP.NET MVC Extensions? Drop me a line below with your thoughts. Thank you.

    Follow MehulHarry on Twitter

    DXperience? What's That?

    DXperience is the .NET developer's secret weapon. Get full access to a complete suite of professional components that let you instantly drop in new features, designer styles and fast performance for your applications. Try a fully-functional version of DXperience for free now:

  • DevExpress Extensions For ASP.NET MVC 2.0 - Quick Summary

    image_thumb[2]Check out this quick summary of the current DevExpress Extensions for ASP.NET MVC 2.0 framework.

    MVC Extensions – Free to DXperience Universal, Enterprise, and ASP.NET Edition customers

    In the DXperience v2010 vol 1 release, we introduced the following 5 native ASP.NET MVC Extensions:

    1. GridView
    2. Menu
    3. NavBar
    4. TabControl/PageControl
    5. RoundPanel

    These ‘native MVC’ extensions:

    • use .NET Framework 3.5
    • latest jQuery version
    • support Semantic rendering (in 3 extensions: Menu, NavBar, & Pager)
    • support Visual Studio 2010 and MVC 2.0 framework
    • produce no ViewState
    • and they’re FREE for existing customers!

    Demo site launched

    Check out to see some of the great features of the DevExpress ASP.NET MVC Extensions.

    Beta Stage

    The DevExpress ASP.NET MVC Extensions are still in the beta stage because we wanted to gauge your interest. And based on your tremendous reaction, we’ve got some exciting news for the DXperience v2010 vol 2 release. More on that in a future post.

    Getting Started Video

    Check out this DevExpress MVC Project setup video that helps you with the current version of DXperience v2010 vol 1 release:

    Video: DevExpress MVC Project Setup

    Getting Started Improved

    While the above video is helpful, you’ll no longer need it for the next release, DXperience v2010 vol 2 because we’re introducing handy VS2010 project templates that take care of the initial setup:

    DevExpress MVC Project Templates

    Knowledgebase Articles

    The ASP.NET team has also created the following knowledgebase articles to help you get started with DevExpress ASP.NET MVC Extensions:

    Why you should use DevExpress ASP.NET MVC Extensions

    In designing the native ASP.NET MVC extensions, the team wanted to leverage what had already been written for our ASP.NET controls, but avoiding issues like viewstate.

    This re-use and redesign means that they used the underlying robust and tested infrastructure of our rich webforms controls and ensured that the APIs and properties (both client- and server-side) were very similar.

    Check out the DevExpress Extensions for ASP.NET MVC 2.0 framework with your DXperience download. Then drop me a line below with your thoughts, thanks!

    Follow MehulHarry on Twitter

    DXperience? What's That?

    DXperience is the .NET developer's secret weapon. Get full access to a complete suite of professional components that let you instantly drop in new features, designer styles and fast performance for your applications. Try a fully-functional version of DXperience for free now:

  • New ASP.NET GridLookup Control (coming in v2010 vol 2)

    ASP.NET GridLookup Control

    Check out the new ASP.NET GridLookup control that’s coming out in the next major release of DXperience v2010 vol 2. The new control is called the ASPxGridLookup.

    The ASPxGridLookup editor combines the functionality of the ASPxDropDownEdit and ASPxGridView controls to allow end-users to easily select values from a dropdown grid containing lookup items.

    The ASPxGridView control is seamlessly embedded into the editor's dropdown window, providing the editor with a powerful customizable data-processing and data-representation functionality.

    In fact, this control addresses the follow customer suggestions with one excellent new control:

    S19281 ASPxCheckComboBox Add a new editor with multi-select
    S19816 ASPxComboBox Provide support for using the XpoDataSource, LinqServerModeDataSource working in server mode as the editor's data source
    CS62920 ASPxComboBox Ability to customize the dropdown rows using templates
    S30288 ASPxListBox/ASPxComboBox    Add the ability to sort data


    Several iterations ago, we had already created the ASPxDropDownEdit control. You, our customers, were able to use the ASPxDropDownEdit control to nest the ASPxGridView (or another control) in the ASPxDropDownEdit's drop down template. However, this approach requires a lot of additional code to:

    • synchronize size of the grid and the dropdown area
    • implement interaction between selection in the grid and text in the ASPxDropDownEdit's input

    To implement the filtering functionality was a major task and you were left without the functionality that you needed. Which is why the ASPxDropDownEdit could not be used for the suggestions requested above.

    New ASP.NET GridLookup Is Versatile

    The ASPxGridLookup solves all the suggestions and requirements mentioned above by providing a full new controls that supports the same great ASP.NET features as our other ASP.NET controls: Themes, Cross-Browser compatibility, Client-side events and functionality, and more!

    The ASPxGridLookup contains an instance of the ASPxGridView in it's dropdown area. And the ASPxGridLookup gives you all the advantages of the ASPxGridView, like: MultiSelect, ServerMode, Templates, Sorting, Grouping and so on.

    Selection modes

    One of the major data-processing features adopted from the ASPxGridView is allowing your end-users to select multiple list items within the dropdown grid. The selection behavior is controlled by the editor's SelectionMode property that can be set to Single (only one item can be selected within the editor) or Multiple (multiple items can be selected within the editor) value:

    Grid Lookup Multi-Selection
    The ASPxGridLookup supports single and multiple selection through the SelectionMode property. Your end-users can select items by clicking check boxes within the dropdown grid or by entering product names separated with a semicolon into the editor's edit box.

    The ASPxGridLookup also supports interaction between the text input and the grid's selection. Therefore, when a row is selected, its text goes to the ASPxGridLookup's input automatically.

    And in both selection modes the row text creates and applies the TextFormatString to the row values. When SelectionMode=Multiple, the text of many selected rows gets joined in the input using a special separator from the MultiTextSeparator property.

    When used together, all these features provide end-users with easy-to-use capabilities of searching and selecting the required data.

    Filtering With Server Mode

    The ASPxGridLookup supports the grid's server mode functionality allowing the editor to efficiently work with large data sources by loading data in small portions, on demand. To work in server mode, the ASPxGridLookup editor should be bound to a data source of the XpoDataSource or LinqServerModeDataSource type. For example, here the ASPxGridLookup is filtering against a 20,000 record database table:

    Grid Lookup ServerMode
    In the demo above, the ASPxGridLookup's incremental filtering works in the "StartsWith" mode (due to the IncrementalFilteringMode property setting) and the "FirstName LastName (Phone)" format is used to enter search strings and to represent the selected item's value within the edit box (due to the TextFormatString property setting).

    The ASPxGridLookup provides filtering for it’s built-in ASPxGridView rows using the following modes:

    • Contains - to satisfy filtration, the row must contain all the typed words anywhere in its fields (only fields are indicated in the MultiTextSeparator). The order of words does not matter.
    • StartsWith - row satisfies the filtration, only if the row text begins with filter. This mode provides the autocomplete feature.
    • None (this is a default value)

    Only the row field that is mentioned in TextFormatString property will participate in the filtering.

    Hosting the ASPxGridView internally (inside the dropdown window to display list items), the ASPxGridLookup editor gives you the capability to use a powerful data-processing functionality provided by the grid control.


    The ASPxGridLookup control exposes the embedded ASPxGridView's powerful data representation functionality including support for templates. So, the ASPxGridLookup provides you with the capability to define templates for different elements of the built-in grid (such as data rows, data cells, etc):
    Grid Lookup ItemTemplate

    The image above shows how the layout of the editor's list items can be modified by creating a template for the dropdown grid's data rows via the Templates.DataRow property.

    DropDown Sized Automatically

    The ASPxGridLookup automatically adjusts its dropdown size depending on the ASPxGridView size.

    Included In DXperience v2010 vol 2

    The ASP.NET GridLookup control, ASPxGridLookup, is part of the DXperience v2010 volume 2 release.

    The new ASPxGridLookup is a fantastic control that combines the best of several ASP.NET controls to meet your requirements. I’m excited by the demos I’ve seen on this control. If you’re a DXperience Subscription customer, you’ll have access to the DXperience v2010 volume 2 beta in the coming weeks.

    Are you looking forward the ASPxGridLookup control? Drop me a line below with your thoughts. Thanks!

    DXperience? What's That?

    DXperience is the .NET developer's secret weapon. Get full access to a complete suite of professional components that let you instantly drop in new features, designer styles and fast performance for your applications. Try a fully-functional version of DXperience for free now:

    Follow MehulHarry on Twitter

  • ASP.NET HTML Editor - Client-Side Selection (coming in v2010 vol 2)

    Check out this new client-side selection feature of our ASP.NET HTML Editor, the ASPxHtmlEditor:

    ASP.NET Html Editor Client-Side Selection

    The client-side selection feature of the ASPxHtmlEditor has been around for a while but was not exposed publicly until a handy suggestion came up. So the DevExpress ASP.NET team has improved and exposed these new client-side selection API.

    The demo above shows the client-side selection with the new custom dropdown menu feature too. The dropdown menu changes the capitalization of the selected text using client-side Java-script:

    // Event handler
    function OnCustomCommand(s, e) {
        if (e.commandName == "ChangeCase")
    // Change case functionality
    function ChangeCase(value) {
        var selection = HtmlEditor.GetSelection();
        var selectedElements = selection.GetElements();
        var textNodes = findAllTextNodes(selectedElements);
        for (var i = 0; i < textNodes.length; i++) {
            switch (value) {
                case "capitalize":
                    var sentenceEndExp = /\.+\s*$/;
                    var emptyStringExp = /\s*/;
                    var prevText = getPreviousText(textNodes[0]);
                    var capitalizeFirstLetter = emptyStringExp.test(prevText) || sentenceEndExp.test(prevText);
                    textNodes[i].nodeValue = capitalize(textNodes[i].nodeValue.toLowerCase(), capitalizeFirstLetter);
                case "lowercase":
                    textNodes[i].nodeValue = textNodes[i].nodeValue.toLowerCase();
                case "uppercase":
                    textNodes[i].nodeValue = textNodes[i].nodeValue.toUpperCase();
                case "camelize":
                    textNodes[i].nodeValue = camelize(textNodes[i].nodeValue.toLowerCase());
        HtmlEditor.ExecuteCommand(ASPxClientCommandConsts.SAVESTATEUNDOREDOSTACK_COMMAND, null);
    function findAllTextNodes(elements) {
        var nodes = [];
        if (elements) {
            for (var i = 0; i < elements.length; i++) {
                if (elements[i].nodeType == 3)
                    nodes = nodes.concat(findAllTextNodes(elements[i].childNodes));
        return nodes;
    function getPreviousText(element) {
        var prevElement = element.previousSibling;
        return (prevElement && prevElement.nodeType == 3) ? getPreviousText(prevElement) + prevElement.nodeValue : "";
    function capitalize(text, capitalizeFirstLetter) {
        var text = text.replace(/(\.|\?|\!)+\s+\S+/g, function (word) {
            return word.charAt(0) + " " + word.charAt(2).toUpperCase() + word.substring(3).toLowerCase();
        if (capitalizeFirstLetter)
            text = text.replace(/\S+/, function (word) {
                return word.charAt(0).toUpperCase() + word.substring(1).toLowerCase();
        return text;
    function camelize(text) {
        return text.replace(/\S+/g, function (word) {
            return word.charAt(0).toUpperCase() + word.substring(1).toLowerCase();

    This feature will be part of the DXperience v2010 vol 2 release later this year.

    Follow MehulHarry on Twitter

    DXperience? What's That?

    DXperience is the .NET developer's secret weapon. Get full access to a complete suite of professional components that let you instantly drop in new features, designer styles and fast performance for your applications. Try a fully-functional version of DXperience for free now:

  • ASP.NET Treelist Keyboard Navigation (available now in v2010 vol 1)

    Check out the ASP.NET TreeList’s keyboard navigation feature that is available to you now in the DXperience 2010 vol 1 release:

    ASP.NET TreeList Keyboard Navigation


    The ASPxTreeList’s keyboard support allows you and your users to control the ASPxTreeList's primary navigation operations (such as accessing the control within the form, moving focus through its nodes, node selection and expanding/collapsing, paging) quickly and effectively using a keyboard.

    In addition, enabling keyboard support within the ASPxTreeList helps you more easily create web pages that conform to accessibility guidelines.

    How To Use

    To enable keyboard navigation, set the ASPxTreeList's KeyboardSupport property to true. This activates the following features:

    • Access Key - The ASPxTreeList control can be easily accessed (focused) by using a user-defined keyboard shortcut. This shortcut is composed by combining the preset CTRL+SHIFT combination with a single character string specified via the AccessKey property. For example, setting the access key of a TreeList control to the string "T" indicates that an end-user can navigate to the grid by pressing CTRL+SHIFT+T.
    • Focused Node - The Focused Node feature is automatically activated, regardless of the corresponding feature property setting (SettingsBehavior.AllowFocusedNode). Focus can be moved between nodes by using the UP and DOWN ARROW keys. The LEFT and RIGHT ARROW keys can also be used to move node focus, but these keys initially try to collapse/expand a node and, if it's impossible, only then do they move focus. Moving focus from the ultimate (first or last) node within a page changes the page within the ASPxTreeList, if possible.
    • Node Selection - The SPACE key can be used to mark a focused node as selected/unselected. This works if selection can be applied to a node - that is, if the SettingsSelection.Enabled property is enabled. If the SettingsSelection.Recursive property is disabled, multiple nodes can be easily selected, by moving row focus using the ARROW keys (UP/DOWN or LEFT/RIGHT) while holding down the SHIFT key.
    • Expanding/Collapsing Nodes - The PLUS and MINUS keys can be respectively used to expand and collapse nodes. In addition, node collapsing and expanding can be performed using the LEFT and RIGHT ARROW keys.
    • Paging - The SHIFT+PAGE UP and SHIFT+PAGE DOWN key combinations can be used to go to the next/previous grid page.

    The ASP.NET Treelist’s keyboard feature is available now in your DXperience v2010 vol 1 release.

    Drop me a line below if you love useful keyboard features like this one. Thanks!

    Follow MehulHarry on Twitter

    DXperience? What's That?

    DXperience is the .NET developer's secret weapon. Get full access to a complete suite of professional components that let you instantly drop in new features, designer styles and fast performance for your applications. Try a fully-functional version of DXperience for free now:

  • ASP.NET Scheduler - Custom Tooltip (available in v2010 vol 1)

    Check out this slick custom tooltip feature of our ASP.NET Scheduler, the ASPxScheduler:

    ASPxScheduler New Custom Tooltip feature

    Using the ASPxScheduler’s custom tooltip feature, you can customize how a tooltip appears when a mouse cursor hovers over a scheduler's selected area or a selected appointment.

    In this screenshot above, a custom form is displayed instead of the default tooltip. Rounded edges effect is accomplished via the built-in functionality, other tooltip characteristics can be easily adjusted as well.

    Another option is a tooltip that is displayed during the appointment’s drag operation:

    ASPxScheduler New Custom Tooltip (on drag) feature

    This feature is available now in the DXperience v2010 vol 1 release.

    Are you using the custom tooltips feature in the ASPxScheduler? Drop me a line below with your thoughts. Thanks.

    Follow MehulHarry on Twitter

    Want to experience a better Visual Studio?

    Install CodeRush by downloading the free lite version here: CodeRush Xpress

    Or better yet, try the full blown package free for 30 days – CodeRush and Refactor Pro Download!

  • Video: ASP.NET Tab Scrolling and Multi-Row Feature Preview (coming in 2010 vol 2)

    Check out this sneak peek video on the upcoming ASP.NET Tab control’s new scrolling and multi-row features:

    Video: ASP.NET Tab Scrolling and Multi-row

    These highly requested features will help you display a large amount of tabs easily.

    This feature is part of the DXperience 2010 vol 2 release which is due in late October/early November 2010 timeframe.

    Drop me a line below with your thoughts on the upcoming tab scrolling and multi-row features. Thanks!

    Follow MehulHarry on Twitter

    DXperience? What's That?

    DXperience is the .NET developer's secret weapon. Get full access to a complete suite of professional components that let you instantly drop in new features, designer styles and fast performance for your applications. Try a fully-functional version of DXperience for free now:

  • ASP.NET HTML Editor DropDown Item Picker (coming in v2010 vol 2)

    Check out this upcoming dropdown item picker feature of the ASPxHtmlEditor in the DXperience 2010 vol 2 release:


    You will be able to extend the ASPxHtmlEditor’s toolbars with dropdown item pickers and populate them with data.

    A dropdown item picker represents a button with a dropdown, containing a list of items available for selection. To select an item, users can hover the mouse pointer over a button or click it, to open its dropdown list and then click an item within the list. In this demo, you can insert smilies and special symbols to the editor's content, via corresponding dropdown item pickers.

    In ASPxHtmlEditor toolbars, a dropdown item picker is represented by a ToolbarCustomItemPickerDropDownButton toolbar item. This item provides a number of options that allow you to customize the appearance and behavior of a dropdown item picker. The most important options include:

    • Items. Use this collection to add items to a dropdown list.
    • ColumnCount. Use this property to specify the number of columns into which items are arranged within a dropdown list.
    • ItemHeight and ItemWidth. Use these properties to adjust the item size.
    • ImagePosition. You can display a caption and/or an image within a list item. The element to display is determined automatically, based upon a list item's Text and Image-Url property values. To customize a list item's image alignment, use an item picker's ImagePosition property. Also, a list item can be assigned a tooltip and value via the ToolTip and Value properties, respectively.
    • ButtonImageMode and Image. By default, the ButtonImageMode property is set to UseItemPickerImage. This indicates that a dropdown button displays the recently selected item's image (see the Insert Smiley item picker), to allow users to select this item by clicking the button, rather than opening a dropdown and selecting the item again. You can opt to disable this mode and display a specific image in the button (see the Insert Special Symbol item picker). To accomplish this, set the ButtonImageMode property to UseButtonImage and provide an image via an item picker's Image property. To specify the initially selected item, use an item picker's SelectedItemIndex property.
    • CommandName. Use this property to associate a command name with an item picker. You can use this command name to respond to item picker clicks on the client side via the editor's CustomCommand client event handler. In this demo, the OnCommandExecute JavaScript function is designated as the CustomCommand client event handler (see the demo's .ASPX markup file). Each time a list item or dropdown button is clicked, the selected item's value (specified via its Value property) is passed as a parameter to the OnCommandExecute function. Then, this function passes the value to the InsertSmiley or InsertSpecialSymbol function, which handles clicks within a corresponding item picker.

    And for you source code geeks, here is how the ASPxHtmlEditor is defined in the ASPX code with the custom dropdown item pickers:

    <dx:ASPxHtmlEditor ID="DemoHtmlEditor" runat="server" Height="350px" ClientInstanceName="HtmlEditor">
        <ClientSideEvents CustomCommand="OnCommandExecute" />
                    <dx:ToolbarBoldButton BeginGroup="true"></dx:ToolbarBoldButton>
                    <dx:ToolbarDropDownItemPicker BeginGroup="True" CommandName="InsertSmiley" SelectedItemIndex="0"
                        ImagePosition="Left" ToolTip="Insert Smiley" ColumnCount="4" ItemHeight="24"
                        ItemWidth="24" ClickMode="ExecuteSelectedItemAction">
                            <dx:ToolbarItemPickerItem Image-Url="~/Content/Smilies/11.png" Value="11#Smile#:)"
                            <dx:ToolbarItemPickerItem Image-Url="~/Content/Smilies/1.png" Value="1#Angry#:@"
                            <dx:ToolbarItemPickerItem Image-Url="~/Content/Smilies/2.png" Value="2#Embarrassed#:$"
                            <dx:ToolbarItemPickerItem Image-Url="~/Content/Smilies/3.png" Value="3#Cool#H" ToolTip="Cool">
                            </dx:ToolbarItemPickerItem><dx:ToolbarItemPickerItem Image-Url="~/Content/Smilies/4.png" Value="4#Crying#:'("
                            <dx:ToolbarItemPickerItem Image-Url="~/Content/Smilies/5.png" Value="5#Unsatisfied#=/"
                            <dx:ToolbarItemPickerItem Image-Url="~/Content/Smilies/6.png" Value="6#Scared#6"
                            <dx:ToolbarItemPickerItem Image-Url="~/Content/Smilies/7.png" Value="7#Angel#A" ToolTip="Angel">
                            </dx:ToolbarItemPickerItem><dx:ToolbarItemPickerItem Image-Url="~/Content/Smilies/8.png" Value="8#Big Smile#:D"
                                ToolTip="Big Smile"></dx:ToolbarItemPickerItem>
                            <dx:ToolbarItemPickerItem Image-Url="~/Content/Smilies/9.png" Value="9#Kisses#:*"
                            <dx:ToolbarItemPickerItem Image-Url="~/Content/Smilies/10.png" Value="10#Sleep#|-)"
                            <dx:ToolbarItemPickerItem Image-Url="~/Content/Smilies/12.png" Value="12#Sad#:("
                            <dx:ToolbarItemPickerItem Image-Url="~/Content/Smilies/13.png" Value="13#Surprise#:O"
                            <dx:ToolbarItemPickerItem Image-Url="~/Content/Smilies/14.png" Value="14#Stick out tongue#:P"
                                ToolTip="Stick out tongue"></dx:ToolbarItemPickerItem>
                            <dx:ToolbarItemPickerItem Image-Url="~/Content/Smilies/15.png" Value="15#Huh?#:^"
                            <dx:ToolbarItemPickerItem Image-Url="~/Content/Smilies/16.png" Value="16#Wink#;)"
                    <dx:ToolbarDropDownItemPicker CommandName="InsertSpecialSymbol" ClickMode="ShowDropDown"
                        ColumnCount="6" ToolTip="Insert Special Symbol" ItemHeight="34" ItemWidth="34">
                        <Image Width="16px" Height="16px">
                            <dx:ToolbarItemPickerItem Value="&alpha;" Text="&alpha;" ToolTip="Greek small letter alpha"></dx:ToolbarItemPickerItem>
                            <dx:ToolbarItemPickerItem Value="&beta;" Text="&beta;" ToolTip="Greek small letter beta"></dx:ToolbarItemPickerItem>
                            <dx:ToolbarItemPickerItem Value="&pi;" Text="&pi;" ToolTip="Greek small letter pi"></dx:ToolbarItemPickerItem>
                            <dx:ToolbarItemPickerItem Value="&rho;" Text="&rho;" ToolTip="Greek small letter rho"></dx:ToolbarItemPickerItem>
                            <dx:ToolbarItemPickerItem Value="&phi;" Text="&phi;" ToolTip="Greek small letter phi"></dx:ToolbarItemPickerItem>
                            <dx:ToolbarItemPickerItem Value="&Omega;" Text="&Omega;" ToolTip="Omega sign"></dx:ToolbarItemPickerItem>
                            <dx:ToolbarItemPickerItem Value="&pound;" Text="&pound;" ToolTip="Pound"></dx:ToolbarItemPickerItem>
                            <dx:ToolbarItemPickerItem Value="&cent;" Text="&cent;" ToolTip="Cent"></dx:ToolbarItemPickerItem>
                            <dx:ToolbarItemPickerItem Value="&yen;" Text="&yen;" ToolTip="Yen"></dx:ToolbarItemPickerItem>
                            <dx:ToolbarItemPickerItem Value="&euro;" Text="&euro;" ToolTip="Euro"></dx:ToolbarItemPickerItem>
                            <dx:ToolbarItemPickerItem Value="&fnof;" Text="&fnof;" ToolTip="Latin small f with hook"></dx:ToolbarItemPickerItem>
                            <dx:ToolbarItemPickerItem Value="&alefsym;" Text="&alefsym;" ToolTip="Alef symbol"></dx:ToolbarItemPickerItem>
                            <dx:ToolbarItemPickerItem Value="&copy;" Text="&copy;" ToolTip="Copyright sign"></dx:ToolbarItemPickerItem>
                            <dx:ToolbarItemPickerItem Value="&reg;" Text="&reg;" ToolTip="Registered sign"></dx:ToolbarItemPickerItem>
                            <dx:ToolbarItemPickerItem Value="&trade;" Text="&trade;" ToolTip="Trademark sign"></dx:ToolbarItemPickerItem>
                            <dx:ToolbarItemPickerItem Value="&deg;" Text="&deg;" ToolTip="Degree sign"></dx:ToolbarItemPickerItem>
                            <dx:ToolbarItemPickerItem Value="&mdash;" Text="&mdash;" ToolTip="Em dash"></dx:ToolbarItemPickerItem>
                            <dx:ToolbarItemPickerItem Value="&plusmn;" Text="&plusmn;" ToolTip="Plus-minus sign"></dx:ToolbarItemPickerItem>
                            <dx:ToolbarItemPickerItem Value="&frac14;" Text="&frac14;" ToolTip="Common fraction one quarter"></dx:ToolbarItemPickerItem>
                            <dx:ToolbarItemPickerItem Value="&frac12;" Text="&frac12;" ToolTip="Common fraction one half"></dx:ToolbarItemPickerItem>
                            <dx:ToolbarItemPickerItem Value="&frac34;" Text="&frac34;" ToolTip="Common fraction three quarters"></dx:ToolbarItemPickerItem>
                            <dx:ToolbarItemPickerItem Value="&sum;" Text="&sum;" ToolTip="N-ary summation"></dx:ToolbarItemPickerItem>
                            <dx:ToolbarItemPickerItem Value="&radic;" Text="&radic;" ToolTip="Square root"></dx:ToolbarItemPickerItem>
                            <dx:ToolbarItemPickerItem Value="&infin;" Text="&infin;" ToolTip="Infinity"></dx:ToolbarItemPickerItem>
            <DropDownItemPickerItemStyle Font-Size="20px"></DropDownItemPickerItemStyle>

    Drop me a line below with your thoughts on the upcoming ASPxHtmlEditor’s dropdown item pickers. Thanks!

    Follow MehulHarry on Twitter

    DXperience? What's That?

    DXperience is the .NET developer's secret weapon. Get full access to a complete suite of professional components that let you instantly drop in new features, designer styles and fast performance for your applications. Try a fully-functional version of DXperience for free now:

  • ASP.NET HTML Editor DropDown Menu (coming in v2010 vol 2)

    Check out this upcoming dropdown menu feature of the ASPxHtmlEditor in the DXperience 2010 vol 2 release:


    You will be able to define custom dropdown menus and their items by extending the toolbars of the ASPxHtmlEditor.

    Here’s the source code that defines the dropdown menu and it’s items:

    <dx:ASPxHtmlEditor ID="DemoHtmlEditor" runat="server" Height="300px" ClientInstanceName="HtmlEditor">
        <ClientSideEvents CustomCommand="OnCommandExecute" />
                    <dx:ToolbarJustifyLeftButton BeginGroup="True">
                    <dx:ToolbarDropDownMenu BeginGroup="true" CommandName="InsertDateTime" ToolTip="Insert Date and Time">
                        <Image Url="~/Content/Demo/date-icon.png" Height="16px" Width="16px">
                            <dx:ToolbarMenuItem Text="MM/dd/yyyy" Value="%m/%d/%y">
                            <dx:ToolbarMenuItem Text="yyyy-MM-dd" Value="%y-%m-%d">
                            <dx:ToolbarMenuItem Text="Month dd, yyyy" Value="%mf %d, %y">
                            <dx:ToolbarMenuItem Text="Day of Week, Month dd, yyyy" Value="%df, %mf %d, %y">
                            <dx:ToolbarMenuItem Text="h:mm AM" Value="%h:%M %p" BeginGroup="true">
                            <dx:ToolbarMenuItem Text="h:mm:ss AM" Value="%h:%M:%s %p">
                            <dx:ToolbarMenuItem Text="MM/dd/yyyy h:mm AM" Value="%m/%d/%y %h:%M %p" BeginGroup="true">
                            <dx:ToolbarMenuItem Text="yyyy-MM-dd h:mm:ss AM" Value="%y-%m-%d %h:%M:%s %p">

    Drop me a line below with your thoughts on the upcoming ASPxHtmlEditor’s dropdown menu feature. Thanks!

    Follow MehulHarry on Twitter

    DXperience? What's That?

    DXperience is the .NET developer's secret weapon. Get full access to a complete suite of professional components that let you instantly drop in new features, designer styles and fast performance for your applications. Try a fully-functional version of DXperience for free now:


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 or call us at +1 (818) 844-3383


DevExpress engineers feature-complete Presentation Controls, IDE Productivity Tools, Business Application Frameworks, and Reporting Systems for Visual Studio, Delphi, HTML5 or iOS & Android development. 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-2018 Developer Express Inc.
All trademarks or registered trademarks are property of their respective owners