Skip to main content
BuyLog In
Blazor
Search in…
Docs > Get Started > Enable Interactive Render Mode
All docs
V24.1
Blazor Components
Prerequisites
Supported Browsers
Get Started
Install Components and Project Templates
Create a Project
Set Up NuGet Packages
Register DevExpress Resources
Add Components to the Application
Enable Interactive Render Mode
Upgrade to a New Version
Demos
Examples
Videos
Common Concepts
Components
Styling and Themes
Security Considerations
Troubleshooting
Blazor & WinForms App UI Framework (Powered by EF Core)
Maintenance Mode
API Reference
Download CHM

Enable Interactive Render Mode

  • 2 minutes to read

The .NET 8 UI framework allows you to create applications that render content in static server-side render mode (static SSR). In this mode, components are rendered on the server and returned to the client without any interactivity.

Although most DevExpress Blazor components are interactive, you can use the following components in static render mode with limitations.

  • Accordion to display a single-level structure or an accordion with initially expanded groups.
  • Drawer in permanently visible mode.
  • Form Layout excluding collapsible and tabbed groups.
  • Grid to display static data in a single page.
  • Grid Layout
  • Loading Panel to indicate progress with streaming rendering.
  • Menu to display one level of a hierarchy.
  • Pivot Grid to display static data in a single page.
  • Stack Layout
  • TreeView to display a single-level tree or a tree with initially expanded nodes.
  • Wait Indicator to indicate progress with streaming rendering.

Enable interactivity for an individual component, a page, or the entire application to allow DevExpress components to execute scripts and display data without limitations.

Prerequisites

To enable interactivity, make sure that the required services and configuration are added in the Program.cs file:

builder.Services.AddRazorComponents()
.AddInteractiveServerComponents()
.AddInteractiveWebAssemblyComponents();
...
app.MapRazorComponents<App>()
.AddInteractiveServerRenderMode()
.AddInteractiveWebAssemblyRenderMode();

Enable Interactivity for a Component

If you specify interactive render mode for a DevExpress component, it can cause the following error: Cannot pass the parameter 'X' to component 'Y' with rendermode 'InteractiveServerRenderMode'. The reason is that an interactive component cannot contain non-serializable parameters, such as render fragments.

To solve the issue, wrap the DevExpress component in a parent component that has serializable parameters only. The following code sample demonstrates how to add an interactive DxAccordion component in a static page.

  1. Wrap the DxAccordion component in another component (WrapperComponent) that does not have parameters.

    <DxAccordion> ... </DxAccordion>

  2. Add WrapperComponent to a static page.

    @using MyProject.Components.Pages
...
<WrapperComponent @rendermode="InteractiveServer" />

Refer to the following topic for more information: Child component with a serializable parameter

Enable Interactivity on a Razor Page

Add the @rendermode directive on the page to enable interactivity.

@rendermode InteractiveServer

Enable Interactivity for The Entire Application

Specify the @rendermode directive in HeadOutlet and Routes components to enable interactivity for the entire application.

<head>
    @* ... *@
    <HeadOutlet @rendermode="InteractiveAuto" />
</head>
<body>
    <Routes @rendermode="InteractiveAuto" />
    @* ... *@
</body>

Refer to the following topic for more information: Apply a render mode to the entire app