Blogs

This Blog

Subscribe (RSS, Email)

Mehul Harry's DevExpress Blog

JavaScript, HTML 5, ASP.NET, DevExpress, ASP.NET MVC & WebForms, and News - Mehul Harry's DevExpress blog

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:

image

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" />
    <Toolbars>
        <dx:HtmlEditorToolbar>
            <Items>
                <dx:ToolbarUndoButton></dx:ToolbarUndoButton>
                <dx:ToolbarRedoButton></dx:ToolbarRedoButton>
                <dx:ToolbarBoldButton BeginGroup="true"></dx:ToolbarBoldButton>
                <dx:ToolbarItalicButton></dx:ToolbarItalicButton>
                <dx:ToolbarUnderlineButton></dx:ToolbarUnderlineButton>
                <dx:ToolbarStrikethroughButton></dx:ToolbarStrikethroughButton>
                <dx:ToolbarDropDownItemPicker BeginGroup="True" CommandName="InsertSmiley" SelectedItemIndex="0"
                    ImagePosition="Left" ToolTip="Insert Smiley" ColumnCount="4" ItemHeight="24"
                    ItemWidth="24" ClickMode="ExecuteSelectedItemAction">
                    <Items>
                        <dx:ToolbarItemPickerItem Image-Url="~/Content/Smilies/11.png" Value="11#Smile#:)"
                            ToolTip="Smile"></dx:ToolbarItemPickerItem>
                        <dx:ToolbarItemPickerItem Image-Url="~/Content/Smilies/1.png" Value="1#Angry#:@"
                            ToolTip="Angry"></dx:ToolbarItemPickerItem>
                        <dx:ToolbarItemPickerItem Image-Url="~/Content/Smilies/2.png" Value="2#Embarrassed#:$"
                            ToolTip="Embarrassed"></dx:ToolbarItemPickerItem>
                        <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#:'("
                            ToolTip="Crying"></dx:ToolbarItemPickerItem>
                        <dx:ToolbarItemPickerItem Image-Url="~/Content/Smilies/5.png" Value="5#Unsatisfied#=/"
                            ToolTip="Unsatisfied"></dx:ToolbarItemPickerItem>
                        <dx:ToolbarItemPickerItem Image-Url="~/Content/Smilies/6.png" Value="6#Scared#6"
                            ToolTip="Scared"></dx:ToolbarItemPickerItem>
                        <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#:*"
                            ToolTip="Kisses"></dx:ToolbarItemPickerItem>
                        <dx:ToolbarItemPickerItem Image-Url="~/Content/Smilies/10.png" Value="10#Sleep#|-)"
                            ToolTip="Sleep"></dx:ToolbarItemPickerItem>
                        <dx:ToolbarItemPickerItem Image-Url="~/Content/Smilies/12.png" Value="12#Sad#:("
                            ToolTip="Sad"></dx:ToolbarItemPickerItem>
                        <dx:ToolbarItemPickerItem Image-Url="~/Content/Smilies/13.png" Value="13#Surprise#:O"
                            ToolTip="Surprise"></dx:ToolbarItemPickerItem>
                        <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?#:^"
                            ToolTip="Huh?"></dx:ToolbarItemPickerItem>
                        <dx:ToolbarItemPickerItem Image-Url="~/Content/Smilies/16.png" Value="16#Wink#;)"
                            ToolTip="Wink"></dx:ToolbarItemPickerItem>
                    </Items>
                </dx:ToolbarDropDownItemPicker>
                <dx:ToolbarDropDownItemPicker CommandName="InsertSpecialSymbol" ClickMode="ShowDropDown"
                    ColumnCount="6" ToolTip="Insert Special Symbol" ItemHeight="34" ItemWidth="34">
                    <Image Width="16px" Height="16px">
                    </Image>
                    <Items>
                        <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>
                    </Items>
                </dx:ToolbarDropDownItemPicker>
            </Items>
        </dx:HtmlEditorToolbar>
    </Toolbars>
    <StylesEditors>
        <DropDownItemPickerItemStyle Font-Size="20px"></DropDownItemPickerItemStyle>
    </StylesEditors>
</dx:ASPxHtmlEditor>

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: http://www.devexpress.com/Downloads/NET/

Published Aug 20 2010, 08:04 AM by
Bookmark and Share

Comments

Uwe Keim

That is _not_ source code, this is HTML markup :-)

August 20, 2010 11:33 AM

Mehul Harry (DevExpress)

@Uwe,

Ha! Web devs might disagree with you. Even Microsoft calls it source code :)

How to View HTML Source Code for Web Pages in Internet Explorer

support.microsoft.com/.../176222

August 20, 2010 6:40 PM

Mathias Karcher

If this were also available as a standalone control, I'd be a happy camper :) This relates to my as-of-yet TBD suggestion #S135408.

February 9, 2011 3:19 AM

Mehul Harry (DevExpress)

Mathias,

Thanks, I'll keep an eye on that. You can still use the ASPxMenu as a workaround. :)

February 9, 2011 5:04 AM

About Mehul Harry (DevExpress)

Mehul Harry is an ASP.NET technical evangelist at Developer Express. You can reach him directly at mharry@DevExpress.com. You can also follow him on Twitter: http://twitter.com/mehulharry
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, Silverlight, ASP.NET, WinForms, HTML5 or Windows 8, DevExpress tools help you build and deliver your best in the shortest time possible.

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