Size Modes

• Dec 01, 2020
• 3 minutes to read

You can apply different size modes to DevExpress Blazor components and their elements.

Components That Support Size Modes

Component	Resizable part(s)	Related API
Button	Entire component	SizeMode
Calendar	Navigation buttons displayed in the component’s header. Today and Clear buttons.	SizeMode
ComboBox	Input box and drop-down button	SizeMode
Date Edit	Input box and drop-down button	SizeMode
Data Grid	Compatible data editors in the Edit Form. Pager and the page size selector. The header‘s inner components (data editors, toolbar items).	InnerComponentSizeMode
Form Layout	Resizable components (for example, data editors or buttons) in Form Layout’s items	ItemSizeMode
List Box	Entire component	SizeMode
Memo	Entire component	SizeMode
Pager	Entire component	SizeMode
Scheduler	The Today button, view navigator, and view visible interval. View selector (if displayed). The Appointment form‘s data editors that support size modes.	InnerComponentSizeMode
Spin Edit	Entire component	SizeMode
TagBox	Input box and drop-down button	SizeMode
Text Box	Entire component	SizeMode
Time Edit	Input box and drop-down button	SizeMode
Toolbar	Toolbar items	ItemSizeMode

Apply a Size Mode

You can set up size modes at the following levels:

• Individual components (for example, ComboBox, Spin Edit, Pager).
• All compatible components in a container (for example, Data Grid, Form Layout).
• All compatible components in an application.

Individual Components

To specify a control’s size, use the SizeMode property (DxButton.SizeMode, DxComboBox.SizeMode, and so on). If you do not modify this property, the component uses the SizeMode global option (the default is Small).

Note

For the complete list of components that support size modes and related API members, refer the section above.

The code below applies different size modes to ComboBox components.

<DxComboBox Data="@Cities"
            NullText="Select City ..."
            @bind-Value="@Value"
            SizeMode="SizeMode.Small">
</DxComboBox>

<DxComboBox Data="@Cities"
            NullText="Select City ..."
            @bind-Value="@Value"
            SizeMode="SizeMode.Normal">
</DxComboBox>

<DxComboBox Data="@Cities"
            NullText="Select City ..."
            @bind-Value="@Value"
            SizeMode="SizeMode.Large">
</DxComboBox>

@code {
    IEnumerable<string> Cities = new List<string>() {
        "London",
        "Berlin",
        "Paris",
    };

    string Value = null;
    string Value { get => Value; set { Value = value; InvokeAsync(StateHasChanged); } }
}

Container Components

To specify the size of all resizable components in a container component, use the InnerComponentSizeMode property (for Data Grid, and Scheduler) or ItemSizeMode (for Form Layout and Toolbar). If you do not modify these properties, the components in the container use the SizeMode global option (the default is Small).

The code below applies the Medium size mode to all the resizable components located in the Data Grid.

<DxDataGrid DataAsync="@ForecastService.GetForecastAsync"
            PageSize="5"
            PagerPageSizeSelectorVisible="true"
            InnerComponentSizeMode="SizeMode.Medium">
    <HeaderTemplate>
        <DxToolbar ItemRenderStyleMode="ToolbarRenderStyleMode.Plain">
            <DxToolbarItem Text="New" BeginGroup="true" IconCssClass="grid-toolbar-new" />
            <DxToolbarItem Text="Edit" IconCssClass="grid-toolbar-edit" Enabled="true" />
            <DxToolbarItem Text="Delete" IconCssClass="grid-toolbar-delete" Enabled="false" />
            <DxToolbarItem Text="Documentation" 
                           NavigateUrl="https://docs.devexpress.com/Blazor/401086/data-grid" 
                           BeginGroup="true"
                           Alignment="ToolbarItemAlignment.Right" 
                           IconCssClass="grid-toolbar-document" 
                           target="_blank" />
            <DxDataGridColumnChooserToolbarItem Alignment="ToolbarItemAlignment.Right" />
        </DxToolbar>
    </HeaderTemplate>
    <Columns>
        ...
    </Columns>
</DxDataGrid>

Entire Application

Use the SizeMode application-wide option to specify the size mode for all resizable Blazor components. Individual control settings override this option.

To specify DevExpress Blazor components’ size mode, use the AddDevExpressBlazor(IServiceCollection, Action<GlobalOptions>) method and dependency injection. The code sample depends on your application’s hosting model.

• Blazor Server

  using Microsoft.Extensions.DependencyInjection;
  
  class Startup {
      public void ConfigureServices(WebHostBuilderContext context, IServiceCollection services) {
          ...
          services.AddDevExpressBlazor(configure => configure.SizeMode = DevExpress.Blazor.SizeMode.Medium);
      }
  }
  

• Blazor WebAssembly

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

For more ways to specify the SizeMode global option’s value, see the option’s description.