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

  • 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")
            ChangeCase(e.parameter);
    }
     
    // 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);
                    break;
                case "lowercase":
                    textNodes[i].nodeValue = textNodes[i].nodeValue.toLowerCase();
                    break;
                case "uppercase":
                    textNodes[i].nodeValue = textNodes[i].nodeValue.toUpperCase();
                    break;
                case "camelize":
                    textNodes[i].nodeValue = camelize(textNodes[i].nodeValue.toLowerCase());
                    break;
            }
        }
        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.push(elements[i]);
                else
                    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: http://www.devexpress.com/Downloads/NET/

  • 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

    Benefits

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

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

  • 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/

  • 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:

    image

    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" />
        <Toolbars>
            <dx:HtmlEditorToolbar>
                <Items>
                    <dx:ToolbarUndoButton>
                    </dx:ToolbarUndoButton>
                    <dx:ToolbarRedoButton>
                    </dx:ToolbarRedoButton>
                    <dx:ToolbarJustifyLeftButton BeginGroup="True">
                    </dx:ToolbarJustifyLeftButton>
                    <dx:ToolbarJustifyCenterButton>
                    </dx:ToolbarJustifyCenterButton>
                    <dx:ToolbarJustifyRightButton>
                    </dx:ToolbarJustifyRightButton>
                    <dx:ToolbarJustifyFullButton>
                    </dx:ToolbarJustifyFullButton>
                    <dx:ToolbarDropDownMenu BeginGroup="true" CommandName="InsertDateTime" ToolTip="Insert Date and Time">
                        <Image Url="~/Content/Demo/date-icon.png" Height="16px" Width="16px">
                        </Image>
                        <Items>
                            <dx:ToolbarMenuItem Text="MM/dd/yyyy" Value="%m/%d/%y">
                            </dx:ToolbarMenuItem>
                            <dx:ToolbarMenuItem Text="yyyy-MM-dd" Value="%y-%m-%d">
                            </dx:ToolbarMenuItem>
                            <dx:ToolbarMenuItem Text="Month dd, yyyy" Value="%mf %d, %y">
                            </dx:ToolbarMenuItem>
                            <dx:ToolbarMenuItem Text="Day of Week, Month dd, yyyy" Value="%df, %mf %d, %y">
                            </dx:ToolbarMenuItem>
                            <dx:ToolbarMenuItem Text="h:mm AM" Value="%h:%M %p" BeginGroup="true">
                            </dx:ToolbarMenuItem>
                            <dx:ToolbarMenuItem Text="h:mm:ss AM" Value="%h:%M:%s %p">
                            </dx:ToolbarMenuItem>
                            <dx:ToolbarMenuItem Text="MM/dd/yyyy h:mm AM" Value="%m/%d/%y %h:%M %p" BeginGroup="true">
                            </dx:ToolbarMenuItem>
                            <dx:ToolbarMenuItem Text="yyyy-MM-dd h:mm:ss AM" Value="%y-%m-%d %h:%M:%s %p">
                            </dx:ToolbarMenuItem>
                        </Items>
                    </dx:ToolbarDropDownMenu>
                </Items>
            </dx:HtmlEditorToolbar>
        </Toolbars>
    </dx:ASPxHtmlEditor>
    

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

  • Video: ASP.NET Menu Scrolling Feature Preview (coming in 2010 vol 2)

    Check out this video of the upcoming ASP.NET Menu Scrolling Feature:

    Video: ASP.NET Menu Scrolling Feature

    This useful menu scrolling feature will simplify those large menus.

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

    Are you looking forward to this feature? 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: http://www.devexpress.com/Downloads/NET/

  • ASP.NET MVC 2 Web Application Project Template for VS 2008/2010 (coming soon in v2010 vol 2)

    Check out this great new project template coming out in the DXperience 2010 vol 2 release.

    A new ASP.NET MVC 2 Web Application project template will make your life easier and help you boost your start with MVC application development.

    Here’s a screenshot of the ‘DevExpress ASP.NET MVC 2 Web Application’ project template. The project template will be available for both C# and VB.NET:

    MVC_Project_Template

    This project template works like the standard ASP.NET MVC Web Application template available in Visual Studio 2008/2010. However, it goes further by giving you a  solution and project of a simple web application that is ready to use our ASP.NET MVC extensions.

    MVC_Template_Solution 

    The created project contains all the necessary web project files, assembly references, and code entries you'd normally add to your new MVC projects.

    As I promised in the Getting Started with ASP.NET MVC Extensions video, this project template significantly reduces the setup cost and pain of the steps mentioned here. Now there's no need to manually modify your project.

    How’s it work?

    In essence, the project's Web.Config, Site.Master, and Site.Css files are extended with the following entries:

    Web.Config

    • Default settings for our web controls

    MVC_Template_WebConfig_Options

    • Assembly references

    MVC_Template_WebConfig_Assemblies

    • Registration of required namespaces

    MVC_Template_WebConfig_Namespaces

    • ASPxHttpHandlerModule and ASPxUploadProgressHttpHandler registration

    MVC_Template_WebConfig_HandlersModules

    Site.Master

    • Script file and theme file attachments

    MVC_Template_SiteMaster

    Site.Css

    • Style adjustments based on theme settings

    image

    Note: To enable using ASP.NET MVC 2 project templates in Visual Studio 2008, make sure you have installed ASP.NET MVC 2 RTM. To learn more, visit the Microsoft download page here.

    That's it, plain and simple.

    The DXperience 2010 vol 2 release is expected to release later this year around late October or early November time frame.

    Are you as excited as I am about this upcoming release? Drop me a line below. 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!

  • New ASP.NET MVC HTML Editor Extension - v2010 vol 2

    Check out the new ASP.NET MVC HTML Editor Extension coming out in the next DXperience v2010 vol 2 release.

    The DevExpress HtmlEditor is 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.

    DevExpress ASP.NET MVC HTML Editor

    Features

    • HTML code entered into the HtmlEditor's HTML View can be automatically validated and transformed into the XHTML 1.0 Transitional compliant markup. The HtmlEditor exposes several options, allowing you to control which automatic transformations are required.
    • Use the AllowScript, AllowIFrames and AllowFormElements properties to control whether tags and attributes of some predefined types - scripts, IFRAME and form elements - are allowed within the editor's HTML code.
    • The UpdateDeprecatedElements and UpdateBoldItalic properties specify the necessity of replacing deprecated elements with their valid analogs and converting the B and I elements into the STRONG and EM elements, respectively.
    • The EnterMode property allows you to specify the editor's behavior when the ENTER key is pressed by an end-user - you can choose between a paragraph or line break rendering.
    • If the Design View is active within the HtmlEditor, a specific context menu can be displayed for end-users, which is controlled by the editor's AllowContextMenu property.
    • With the AllowHtmlView and AllowPreview properties, the HtmlEditor's functionality can be further customized for your end-users.

     

    Custom CSS

    The HtmlEditor extension provides the Custom CSS feature that enables your custom format, defined by custom CSS classes, to be exposed to end-users and applied to the content selected within the editor. Using the Custom CSS feature, content logical elements (such as titles, headers, text blocks, etc) can be formatted using individual formatting styles, which are defined by names of the associated CSS class and HTML tag.

    Use the CssFiles property to specify CSS files that contain definitions of custom CSS classes. An "Apply CSS" dropdown editor enables you to list available custom CSS styles and make them available to end-users.

    The screenshot below shows custom styles that are defined for the content text elements such as the article title, headers, the main content text and image titles. To apply any of the predefined styles to the text selected within the Design View, choose the desired style item within the "Apply CSS" bar item:

    DevExpress ASP.NET MVC HTML Editor - Custom CSS

    Spell Checking

    The HTML Editor extension will feature a built-in spell checker control that can be used within the HtmlEditor's Design View to check the spelling of the editor's content. Spell checking is performed based on the selected dictionary (ISpell and OpenOffice dictionaries are supported), culture and grammar.

    DevExpress ASP.NET MVC HTML Editor - Spell Checking

    Tables

    The HTML Editor Extension will provide support for HTML table operations. The HtmlEditor allows end-users to create, customize, and delete tables and their elements.

    DevExpress ASP.NET MVC HTML Editor - Tables

     

    The upcoming ASP.NET MVC HTML Editor extension provides a great set of built-in features. Are you as excited as I am about this upcoming release? 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: http://www.devexpress.com/Downloads/NET/

     

  • Video: Getting Started with ASP.NET MVC Extensions

    Check out this ‘Getting Started with DevExpress ASP.NET MVC Extensions’ video:

    image

    Watch the video and you’ll learn how to setup a new Visual Studio ASP.NET MVC project to use the DevExpress ASP.NET MVC Extensions.

    You can also follow along the steps in this video by reading this knowledgebase article:

    How to Start Using DevExpress Extensions in an MVC Web Application

    Some of the steps to setup a new DevExpress MVC Extensions project will get easier in the next release, DXperience v2010 vol 2. More on that later.

    Watch the ‘Getting Started with DevExpress ASP.NET MVC Extensions’ video. 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: http://www.devexpress.com/Downloads/NET/

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-2016 Developer Express Inc.
All trademarks or registered trademarks are property of their respective owners