All docs
V20.1
20.1
19.2
19.1
The page you are viewing does not exist in version 19.1. This link will take you to the root page.
18.2
The page you are viewing does not exist in version 18.2. This link will take you to the root page.
18.1
The page you are viewing does not exist in version 18.1. This link will take you to the root page.
17.2
The page you are viewing does not exist in version 17.2. This link will take you to the root page.

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

  • 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 Module project, create a View Controller.
  2. In the overridden OnActivated method, access the WebRichTextViewModeController and deactivate it:
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);
    }
}

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:

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);
        }
    }
}

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 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.
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; });
        }
    }
}

Spreadsheet Editor

Enable Reading View Mode

Enable Reading View Mode when you display large Spreadsheet documents.

  1. In the ASP.NET 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.
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;
    }
}