Ithy Logo

Comprehensive Guide to Customizing the DevExpress MVC 18.2 Toolbar

Enhance your web application's user experience with a tailored toolbar featuring bold text, color options, font sizes, and intuitive separators.

office computer workspace

Key Takeaways

  • Flexible Customization: DevExpress MVC 18.2 allows extensive customization of the toolbar, enabling the addition of essential features like bold text, color selectors, and font size adjustments.
  • Seamless Integration: The customization process integrates server-side configurations with client-side scripting, ensuring a responsive and interactive user interface.
  • Enhanced User Experience: Implementing button separators and styling options not only improves functionality but also enhances the overall aesthetic appeal of the toolbar.

Introduction

Creating a user-friendly and efficient toolbar is paramount for web applications that require text editing capabilities. DevExpress MVC 18.2 offers robust tools to customize toolbars, allowing developers to incorporate essential features such as bold text formatting, color options, font size adjustments, and button separators. This guide provides a step-by-step approach to implementing these customizations, ensuring a seamless and enhanced user experience.

Setting Up the DevExpress MVC HTML Editor

Initial Configuration

Before diving into toolbar customization, ensure that the DevExpress MVC HTML Editor is correctly set up within your project. This involves referencing the necessary DevExpress libraries and configuring the editor in your ASP.NET MVC project.


    @Html.DevExpress().HtmlEditor(settings => {
        settings.Name = "htmlEditor";
        settings.Width = Unit.Percentage(100);
        settings.Height = Unit.Pixel(400);
    }).GetHtml()
    

Customizing Toolbar Commands

Adding Bold, Colors, and Font Size Options

Customizing the toolbar involves adding buttons and controls that allow users to format text according to their preferences. Here's how to integrate bold text formatting, color pickers, and font size selectors into your DevExpress MVC toolbar.

Step 1: Define Custom Toolbar Items

Use the toolbar configuration options provided by DevExpress to add custom items. This includes buttons for bold text, font color selection, font size adjustments, and separators to organize these tools.


    @Html.DevExpress().HtmlEditor(settings => {
        settings.Name = "htmlEditor";
        settings.Width = Unit.Percentage(100);
        settings.Height = Unit.Pixel(400);
        
        // Enable toolbar customization
        settings.ToolbarConfig.Visible = true;
        
        // Add Font Selector
        settings.ToolbarConfig.Items.Add(item => { 
            item.Name = "Font";
            item.Type = HtmlEditorToolbarItemType.Font;
        });
        
        // Add Font Size Selector
        settings.ToolbarConfig.Items.Add(item => { 
            item.Name = "Font_Size";
            item.Type = HtmlEditorToolbarItemType.FontSize;
        });
        
        // Add Bold Button
        settings.ToolbarConfig.Items.Add(item => { 
            item.Name = "Bold";
            item.Type = HtmlEditorToolbarItemType.Bold;
        });
        
        // Add Separator
        settings.ToolbarConfig.Items.Add(item => {
            item.Type = HtmlEditorToolbarItemType.Separator;
        });
        
        // Add Font Color Picker
        settings.ToolbarConfig.Items.Add(item => {
            item.Name = "Text_Color";
            item.Type = HtmlEditorToolbarItemType.FontColorPicker;
        });
        
        // Add Background Color Picker
        settings.ToolbarConfig.Items.Add(item => {
            item.Name = "Background_Color";
            item.Type = HtmlEditorToolbarItemType.BackgroundColorPicker;
        });
    }).GetHtml()
    

Step 2: Styling the Toolbar

Enhance the visual appeal of the toolbar by applying custom CSS styles. This ensures that the toolbar integrates seamlessly with the overall design of your web application.


    .dxHTMLEditor .dx-toolbar {
        background-color: #f4f4f4;
        border-bottom: 1px solid #ccc;
    }
    
    .ddHTMLEditor .dx-toolbar .dx-toolbar-item {
        margin: 0 5px;
    }
    
    .dxHTMLEditor .dx-toolbar .bold-icon {
        background-image: url('/Images/bold-icon.png');
    }
    
    .dxHTMLEditor .dx-toolbar .font-color-icon {
        background-image: url('/Images/font-color-icon.png');
    }
    
    .dxHTMLEditor .dx-toolbar .font-size-icon {
        background-image: url('/Images/font-size-icon.png');
    }
    
    .dxHTMLEditor .dx-toolbar .separator {
        border-right: 1px solid #ccc;
        margin: 0 10px;
        height: 20px;
    }
    

Step 3: Handling Toolbar Events

To ensure interactivity, handle client-side events associated with the toolbar items. This allows for dynamic responses to user actions, such as applying bold formatting or changing font sizes.


    function handleCommandExecuted(s, e) {
        if (e.commandName === 'Bold') {
            // Logic to toggle bold formatting
        } else if (e.commandName === 'FontSize') {
            // Logic to change font size
        } else if (e.commandName === 'FontColor') {
            // Logic to change font color
        }
    }
    

Associate the event handler with the HTML Editor:


    settings.ClientSideEvents.CommandExecuted = "handleCommandExecuted";
    

Implementing Button Separators

Button separators are essential for organizing toolbar items into logical groups, enhancing the usability and readability of the toolbar. Here's how to implement separators effectively.

Adding Separators in the Toolbar Configuration

Incorporate separators between different groups of toolbar items to create a clear distinction. This can be achieved by adding items of type Separator in the toolbar configuration.


    settings.ToolbarConfig.Items.Add(item => {
        item.Type = HtmlEditorToolbarItemType.Separator;
    });
    

Styling Separators

Customize the appearance of separators to match the overall design of your toolbar. This ensures that the separators are both functional and aesthetically pleasing.


    .dxHTMLEditor .dx-toolbar .separator {
        border-right: 1px solid #ccc;
        margin: 0 10px;
        height: 20px;
    }
    

Enhancing Toolbar Functionality with JavaScript

Custom Event Handlers

To extend the functionality of the toolbar beyond the default capabilities, implement custom JavaScript event handlers. These handlers can execute specific actions when toolbar items are interacted with.


    function onCustomizeMenuActions(s, e) {
        // Add Bold button
        e.Actions.push({
            text: "Bold",
            imageClassName: "bold-icon",
            click: function () {
                document.execCommand('bold', false, null);
            }
        });
        
        // Add Font Color button
        e.Actions.push({
            text: "Font Color",
            imageClassName: "font-color-icon",
            click: function () {
                // Logic to change font color
            }
        });
        
        // Add Font Size button
        e.Actions.push({
            text: "Font Size",
            imageClassName: "font-size-icon",
            click: function () {
                // Logic to change font size
            }
        });
        
        // Add a separator
        e.Actions.push({
            isSeparator: true
        });
    }
    

Ensure that this function is referenced in the HTML Editor configuration:


    settings.ClientSideEvents.CustomizeMenuActions = "onCustomizeMenuActions";
    

Full Example Implementation

Server-Side Configuration

The following example demonstrates a complete server-side configuration for customizing the DevExpress MVC HTML Editor toolbar with bold text, color options, font size selectors, and button separators.


    @Html.DevExpress().HtmlEditor(settings => {
        settings.Name = "customHtmlEditor";
        settings.Width = Unit.Percentage(100);
        settings.Height = Unit.Pixel(500);
        
        // Enable toolbar customization
        settings.ToolbarConfig.Visible = true;
        
        // Add Font Selector
        settings.ToolbarConfig.Items.Add(item => { 
            item.Name = "Font";
            item.Type = HtmlEditorToolbarItemType.Font;
        });
        
        // Add Font Size Selector
        settings.ToolbarConfig.Items.Add(item => { 
            item.Name = "Font_Size";
            item.Type = HtmlEditorToolbarItemType.FontSize;
        });
        
        // Add Bold Button
        settings.ToolbarConfig.Items.Add(item => { 
            item.Name = "Bold";
            item.Type = HtmlEditorToolbarItemType.Bold;
        });
        
        // Add Separator
        settings.ToolbarConfig.Items.Add(item => {
            item.Type = HtmlEditorToolbarItemType.Separator;
        });
        
        // Add Font Color Picker
        settings.ToolbarConfig.Items.Add(item => {
            item.Name = "Text_Color";
            item.Type = HtmlEditorToolbarItemType.FontColorPicker;
        });
        
        // Add Background Color Picker
        settings.ToolbarConfig.Items.Add(item => {
            item.Name = "Background_Color";
            item.Type = HtmlEditorToolbarItemType.BackgroundColorPicker;
        });
        
        // Define client-side events
        settings.ClientSideEvents.CommandExecuted = "handleCommandExecuted";
        settings.ClientSideEvents.CustomizeMenuActions = "onCustomizeMenuActions";
    }).GetHtml()
    

Client-Side Scripting

Implement client-side JavaScript to handle interactions with the toolbar items. This ensures that user actions are appropriately processed and reflected in the editor.


    function handleCommandExecuted(s, e) {
        switch(e.commandName) {
            case 'Bold':
                console.log("Bold command executed");
                break;
            case 'FontSize':
                console.log("Font size changed");
                break;
            case 'FontColor':
                console.log("Font color changed");
                break;
            case 'BackgroundColor':
                console.log("Background color changed");
                break;
        }
    }
    
    function onCustomizeMenuActions(s, e) {
        // Custom actions can be added here if needed
    }
    

Final Touches with CSS

Apply additional CSS styles to refine the appearance of the toolbar, ensuring consistency with the application's theme.


    .customHtmlEditor .dx-toolbar {
        background-color: #ffffff;
        border-bottom: 2px solid #e0e0e0;
    }
    
    .customHtmlEditor .dx-toolbar .dx-toolbar-item {
        margin: 0 8px;
    }
    
    .customHtmlEditor .dx-toolbar .bold-icon {
        background-image: url('/Images/custom-bold-icon.png');
    }
    
    .customHtmlEditor .dx-toolbar .font-color-icon {
        background-image: url('/Images/custom-font-color-icon.png');
    }
    
    .customHtmlEditor .dx-toolbar .font-size-icon {
        background-image: url('/Images/custom-font-size-icon.png');
    }
    
    .customHtmlEditor .dx-toolbar .separator {
        border-right: 1px solid #d0d0d0;
        margin: 0 12px;
        height: 24px;
    }
    

Best Practices for Toolbar Customization

Maintain Consistency

Ensure that the customized toolbar aligns with the overall design language of your application. Consistent styling enhances user familiarity and reduces the learning curve.

Optimize for Usability

Organize toolbar items logically, placing the most frequently used tools in easily accessible positions. Use separators to group related functionalities, improving usability and accessibility.

Ensure Responsiveness

Customize the toolbar to be responsive across different devices and screen sizes. This includes adjusting button sizes and ensuring that tooltips or labels are clear and concise.

Test Thoroughly

After customization, rigorously test the toolbar to ensure that all functionalities work as intended. Check for compatibility across different browsers and devices to guarantee a seamless user experience.


Conclusion

Customizing the DevExpress MVC 18.2 toolbar to include bold text formatting, color options, font size selectors, and button separators significantly enhances the functionality and user experience of your web application. By following the step-by-step guide provided, developers can implement a tailored toolbar that not only meets user needs but also aligns with the application's design aesthetic. Proper styling, event handling, and adherence to best practices ensure that the customized toolbar is both functional and visually appealing.

References


Last updated January 21, 2025
Search Again