GlobalOptions.SizeMode Property

Specifies DevExpress Blazor components’ size mode.

Namespace: DevExpress.Blazor.Configuration

Assembly: DevExpress.Blazor.v21.1.dll

Declaration

[DefaultValue(SizeMode.Small)]
public SizeMode SizeMode { get; set; }

Property Value

Type Default Description
SizeMode

Small

A SizeMode enumeration value.

Available values:

Name Description
Small

Small size.

Medium

Medium size.

Large

Large size.

Remarks

Use the SizeMode global option to specify size mode for all resizable Blazor components in your application whose size mode is not defined (set to NULL). An approach used to specify DevExpress Blazor components’ size mode depends on your application’s hosting model.

Blazor Server

Use any of the following approaches:

  • The AddDevExpressBlazor(IServiceCollection, Action<GlobalOptions>) method and dependency injection.

    using Microsoft.Extensions.DependencyInjection;
    
    class Startup {
        public void ConfigureServices(WebHostBuilderContext context, IServiceCollection services) {
            ...
            services.AddDevExpressBlazor(configure => configure.SizeMode = DevExpress.Blazor.SizeMode.Medium);
        }
    }
    
  • The services.Configure method that registers a configuration instance with the specified global option’s value.

      using Microsoft.Extensions.DependencyInjection;
    
      class Startup {
          public void ConfigureServices(WebHostBuilderContext context, IServiceCollection services) {
              ...
              services.Configure<GlobalOptions>((options) => options.SizeMode = SizeMode.Medium); 
          }
      }
    
  • Define the global option’s value in the appsettings.json file.

    { 
        "DevExpress": { 
            "SizeMode": "Medium" 
        } 
    } 
    

    Then use the services.Configure method to register a configuration instance with the specified global option’s value.

    using Microsoft.Extensions.DependencyInjection;
    
    class Startup {
        public void ConfigureServices(WebHostBuilderContext context, IServiceCollection services) {
            ...
            services.Configure<GlobalOptions>(Configuration.GetSection("DevExpress")); 
        }
    }
    

Blazor WebAssembly

Use any of the following approaches:

  • The AddDevExpressBlazor(IServiceCollection, Action<GlobalOptions>) method and dependency injection.

    using Microsoft.Extensions.DependencyInjection;
    
    public class Program {
        public static async Task Main(string[] args) {
            ...
            builder.Services.AddDevExpressBlazor((options) => options.SizeMode = SizeMode.Medium); 
            await builder.Build().RunAsync();
        }
    }
    
  • The services.Configure method that registers a configuration instance with the specified global option’s value.

      using Microsoft.Extensions.DependencyInjection;
    
      public class Program {
            public static async Task Main(string[] args) {
                ...
                builder.Services.Configure<GlobalOptions>((options) => options.SizeMode = SizeMode.Medium);  
                await builder.Build().RunAsync();
            }
        }
    
  • Define the global option’s value in the appsettings.json file.

    { 
        "DevExpress": { 
            "SizeMode": "Medium" 
        } 
    } 
    

    Call the AddDevExpressBlazor(IServiceCollection, Action<GlobalOptions>) method from your project’s Program.Main() method. Use the ConfigurationBinder.Bind method to register a configuration instance with the specified global option’s value.

    using Microsoft.Extensions.Configuration;
    
    public class Program {
        public static async Task Main(string[] args) {
            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            // ...
            builder.Services.AddDevExpressBlazor(options => builder.Configuration.Bind("DevExpress", options));
            await builder.Build().RunAsync();
        }
    }
    

For more information, refer to Size Modes.

See Also