All docs
V21.1
21.2 (EAP/Beta)
21.1
20.2
The page you are viewing does not exist in version 20.2. This link will take you to the root page.
20.1
The page you are viewing does not exist in version 20.1. This link will take you to the root page.
19.2
The page you are viewing does not exist in version 19.2. This link will take you to the root page.
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.

Create Multiple View Variants (.NET 5)

  • 3 minutes to read

This lesson explains how to create multiple customized variants of the same View, and allow a user to choose the desired View variant at runtime. Variants can be applied to List Views and Detail Views. In this lesson, we create two variants of the Contact List View in the Model Editor. We reference the View Variants Module and add the Change Variant Action to switch between these View variants.

Note

Before proceeding, take a moment to review the following lessons:

Step-by-Step Instructions

  1. Add the DevExpress.ExpressApp.ViewVariantsModule NuGet package to the MySolution.Module project. See the following topic for more information on how to install DevExpress NuGet packages: Install DevExpress Controls Using NuGet Packages.

  2. In the module project’s constructor, add the View Variants Module to the ModuleBase.RequiredModuleTypes list:

    File: MySolution.Module\Module.cs

    using DevExpress.ExpressApp.ViewVariantsModule;
    
    namespace MySolution.Module {
        public sealed partial class MySolutionModule : ModuleBase {
            public MySolutionModule() {
                InitializeComponent();
                this.RequiredModuleTypes.Add(typeof(ViewVariantsModule));
            }
            // ...
        }
    }
    
  3. Invoke the Model Editor for the MySolution.Module project. Right-click the Views node and select Add… | ListView.

    Add ListView

  4. For the new node, set the Id property to Contact_ListView_AllColumns and the ModelClass property to Contact.

    Add ListView

  5. Right-click the newly created node and select Generate Content. The Model Editor uses information from the Contact class (the BOModel | Contact node) and its ancestors to generate columns. As a result, Contact_ListView_AllColumns contains all Contact columns.

    Generate View content

  6. Right-click the Views node and select Add… | ListView. For the new node, set the Id property to Contact_ListView_Varied and the ModelClass property to MySolution.Module.BusinessObjects.Contact. Do not generate content for this node.

  7. Expand the newly added Contact_ListView_Varied node, right-click the Variants child node, and select Add… | Variant.

    Generate View content

  8. Set the View property to Contact_ListView, and set the Id and Caption properties to Multiple Columns.

    Set Variant Properties

  9. Right-click the Variants node and select Add… | Variant. For the new node, set the View property to Contact_ListView_AllColumns, and set the Id and Caption properties to All columns.

    Add All Columns Variant

  10. Navigate to the NavigationItems | Items | Default | Items | Contact node. Set its View property to Contact_ListView_Varied.

    Set Default View for the Navigation Item

  11. Run the Blazor Application. Select the Contact item. The Contact List View contains the Change Variant Action. The Change Variant Action includes items specified in the Model Editor.

    Result

Additional Information

Specify Variant Sort Order

You can use the Index property to specify the sort order of variants in the Change Variant Action drop-down list. Additionally, you can set the Current property of the Variants node to specify the default variant.

Add View Variants to the Navigation Control

Invoke the Model Editor and set the GenerateRelatedViewVariantsGroup property of the NavigationItems node to true to add View variants to the navigation control.

Add View Variants to the Navigation Control

As a result, the Contact navigation item exposes child items for each View variant.

View Variants in the Navigation Control