Ways to Improve the Performance of ASP.NET Web Forms Office Module Editors

• Feb 16, 2023
• 4 minutes to read

Rich Text Editor

Display a Label Control Instead of ASPxRichEdit in View Mode

The Label is a lightweight control that allows you to display HTML-formatted text. Use this control instead of ASPxRichEdit to reduce the View’s load time. Note that the Label and ASPxRichEdit controls show content differently, for example, Label does not support anchors.

The following steps show how to replace the ASPxRichEdit with a Label in a Detail View in View mode:

1. In the ASP.NET Web Forms Module project, create a View Controller.
2. In the overridden OnActivated method, access the WebRichTextViewModeController and deactivate it:

C#

using DevExpress.ExpressApp;
using DevExpress.ExpressApp.Office.Web;
// ...
public class ViewModeRichEditController : ObjectViewController<DetailView, Document> {
    protected override void OnActivated() {
        base.OnActivated();
        Frame.GetController<WebRichTextViewModeController>()?.Active.SetItemValue("LabelMode", false);
    }
    protected override void OnDeactivated() {
        base.OnDeactivated();
        Frame.GetController<WebRichTextViewModeController>()?.Active.SetItemValue("LabelMode", true);
    }
}

VB.NET

Imports DevExpress.ExpressApp
Imports DevExpress.ExpressApp.Office.Web
' ...
Public Class ViewModeRichEditController
    Inherits ObjectViewController(Of DetailView, Document)
    Protected Overrides Sub OnActivated()
        MyBase.OnActivated()
        Frame.GetController(Of WebRichTextViewModeController)()?.Active.SetItemValue("LabelMode", False)
    End Sub
    Protected Overrides Sub OnDeactivated()
        MyBase.OnDeactivated()
        Frame.GetController(Of WebRichTextViewModeController)()?.Active.SetItemValue("LabelMode", True)
    End Sub
End Class

If you display this Detail View and a List View side-by-side, set the DetailView.ViewEditMode property to View. The following Controller demonstrates how to do this:

C#

using DevExpress.ExpressApp;
using DevExpress.ExpressApp.Web.SystemModule;
// ...
public class CustomMasterDetailModeController : WebMasterDetailModeController {
    protected override void SetupViewEditMode(DetailView view) {
        if(View.Id != "Document_ListView") {
            base.SetupViewEditMode(view);
        }
    }
}

VB.NET

Imports DevExpress.ExpressApp  
Imports DevExpress.ExpressApp.Web.SystemModule  
' ...
Public Class CustomMasterDetailModeController  
    Inherits WebMasterDetailModeController  
    Protected Overrides Sub SetupViewEditMode(ByVal _view As DetailView)  
        If View.Id <> "Document_ListView" Then  
            MyBase.SetupViewEditMode(_view)  
        End If  
    End Sub  
End Class  

Hide the Ribbon Control in Edit Mode and Show it when Executing an Action

Implement this approach when you display List and Detail Views side-by-side and want to hide the ASPxRichTextPropertyEditor‘s Ribbon highlighted in the image below:

This approach also demonstrates how to create an Action that shows the Ribbon.

1. In the ASP.NET Web Forms Module project, create a View Controller.
2. In the Controller’s constructor, create a SimpleAction and subscribe to its Execute event.
3. In the overridden OnActivated method, set the MenuManagerType property to None for each ASPxRichTextPropertyEditor the View displays.
4. In the Action.Execute event handler, call the SetRibbonMode method to show a Ribbon control for each ASPxRichTextPropertyEditor the View displays.

C#

using DevExpress.ExpressApp;
using DevExpress.ExpressApp.Actions;
using DevExpress.ExpressApp.Office.Web;
using DevExpress.Persistent.Base;
using DevExpress.Web.ASPxRichEdit;
// ...
public class ShowRibbonController : ObjectViewController<ListView, Document> {
    public ShowRibbonController() {
        SimpleAction showRibbonAction = new SimpleAction(this, "ShowRibbon", PredefinedCategory.Edit);
        showRibbonAction.Execute += Action_Execute;
    }
    protected override void OnActivated() {
        base.OnActivated();
        foreach(var editor in View.EditView.GetItems<ASPxRichTextPropertyEditor>()) {
            editor.MenuManagerType = WebMenuManagerType.None;
        }
    }
    private void Action_Execute(object sender, SimpleActionExecuteEventArgs e) {
        foreach(var editor in View.EditView.GetItems<ASPxRichTextPropertyEditor>()) {
            editor.SetRibbonMode(RichEditRibbonMode.OneLineRibbon);
            // optionally, you can display only the Home tab to speed up Ribbon loading
            //editor.ASPxRichEditControl.RibbonTabs.ForEach(rt => { if(!(rt is DevExpress.Web.ASPxRichEdit.RERHomeTab)) rt.Visible = false; });
        }
    }
}

VB.NET

Imports DevExpress.ExpressApp
Imports DevExpress.ExpressApp.Actions
Imports DevExpress.ExpressApp.Office.Web
Imports DevExpress.Persistent.Base
Imports DevExpress.Web.ASPxRichEdit
' ...
Public Class ShowRibbonController
    Inherits ViewController(Of ListView)
    Public Sub New()
        TargetObjectType = GetType(YourBusinessObjectType)
        Dim action As SimpleAction = New SimpleAction(Me, "ShowRibbon", PredefinedCategory.Edit)
        AddHandler action.Execute, AddressOf Action_Execute
    End Sub
    Protected Overrides Sub OnActivated()
        MyBase.OnActivated()
        For Each editor In View.EditView.GetItems(Of ASPxRichTextPropertyEditor)()
            editor.MenuManagerType = WebMenuManagerType.None
        Next
    End Sub
    Private Sub Action_Execute(ByVal sender As Object, ByVal e As SimpleActionExecuteEventArgs)
        For Each editor In View.EditView.GetItems(Of ASPxRichTextPropertyEditor)()
            editor.SetRibbonMode(RichEditRibbonMode.OneLineRibbon)
            ' optionally, you can display only the Home tab to speed up Ribbon loading
            ' editor.ASPxRichEditControl.RibbonTabs.ForEach(Function(rt)
            ' If Not (TypeOf rt Is DevExpress.Web.ASPxRichEdit.RERHomeTab) Then rt.Visible = False
            ' End Function)
        Next
    End Sub
End Class

Spreadsheet Editor

Note

XAF does not support the Spreadsheet editor for ASP.NET Core Blazor applications.

Enable Reading View Mode

Enable Reading View Mode when you display large Spreadsheet documents.

1. In the ASP.NET Web Forms Module project, create a View Controller.
2. In the overridden OnActivated method, access the ASPxSpreadsheetPropertyEditor‘s control as described in How to: Access the Spreadsheet Control.
3. Set ASPxSpreadsheet‘s Mode property to Reading.

C#

using System;
using DevExpress.ExpressApp;
using DevExpress.ExpressApp.Office.Web;
using DevExpress.Web.ASPxSpreadsheet;
// ...
public class CustomASPxSpreadsheetController : ViewController<DetailView> {
    protected override void OnActivated() {
        base.OnActivated();
        foreach (ASPxSpreadsheetPropertyEditor editor in View.GetItems<ASPxSpreadsheetPropertyEditor>()) {
            if (editor.ASPxSpreadsheetControl != null) {
                CustomizeSpreadsheetControl(editor.ASPxSpreadsheetControl);
            }
            else {
                editor.ControlCreated += Editor_ControlCreated;
            }
        }
    }
    void Editor_ControlCreated(object sender, EventArgs e) {
        ASPxSpreadsheet spreadsheet = ((ASPxSpreadsheetPropertyEditor)sender).ASPxSpreadsheetControl;
        CustomizeSpreadsheetControl(spreadsheet);
    }
    void CustomizeSpreadsheetControl(ASPxSpreadsheet spreadsheetControl) {
        spreadsheetControl.SettingsView.Mode = SpreadsheetViewMode.Reading;
    }
}

VB.NET

Imports System
Imports DevExpress.ExpressApp
Imports DevExpress.ExpressApp.Office.Web
Imports DevExpress.Web.ASPxSpreadsheet
' ...
Public Class CustomASPxSpreadsheetController
    Inherits ViewController(Of DetailView)
    Protected Overrides Sub OnActivated()
        MyBase.OnActivated()
        For Each editor As ASPxSpreadsheetPropertyEditor In View.GetItems(Of ASPxSpreadsheetPropertyEditor)()
            If editor.ASPxSpreadsheetControl IsNot Nothing Then
                CustomizeSpreadsheetControl(editor.ASPxSpreadsheetControl)
            Else
                AddHandler editor.ControlCreated, AddressOf Editor_ControlCreated
            End If
        Next editor
    End Sub
    Private Sub Editor_ControlCreated(ByVal sender As Object, ByVal e As EventArgs)
        Dim spreadsheet As ASPxSpreadsheet = DirectCast(sender, ASPxSpreadsheetPropertyEditor).ASPxSpreadsheetControl
        CustomizeSpreadsheetControl(spreadsheet)
    End Sub
    Private Sub CustomizeSpreadsheetControl(ByVal spreadsheetControl As ASPxSpreadsheet)
        spreadsheetControl.SettingsView.Mode = SpreadsheetViewMode.Reading
    End Sub
End Class