Size Modes

  • 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

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

Toolbar

Toolbar items

ItemSizeMode

Apply a Size Mode

You can set up size modes at the following levels:

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-SelectedItem="@SelectedItem"
            SizeMode="SizeMode.Small">
</DxComboBox>

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

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

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

    string selectedItem = null;
    string SelectedItem { get => selectedItem; set { selectedItem = 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.