DxDataGrid<T>.InnerComponentSizeMode Property

Specifies the size of the Data Grid’s inner components.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v21.1.dll

Declaration

[Parameter]
[DefaultValue(null)]
public SizeMode? InnerComponentSizeMode { get; set; }

Property Value

Type Default Description
Nullable<SizeMode>

null

A SizeMode enumeration value.

Available values:

Name Description
Small

Small size.

Medium

Medium size.

Large

Large size.

Remarks

Use the InnerComponentSizeMode property to specify the size mode for the following Data Grid components:

  • Data editors that are displayed in the Edit Form and support size modes
  • Data editors that are displayed in templates and support size modes
  • The pager and page size selector
  • The header‘s inner components (data editors, toolbar items)

The following size modes are available:

Size mode

Description

Not specified (NULL)

Data Grid’s inner components inherit their sizes from grid’s parent component. For example, if grid is in Form Layout, grid’s inner component size is controlled by the ItemSizeMode property.
If the parent component’s size mode is not specified, Data Grid’s inner component size is specified by the SizeMode global option.

Large

The size of Data Grid’s inner components is large.

Medium

The size of Data Grid’s inner components is medium.

Small

The size of Data Grid’s inner components is small.

The code below applies the Medium size mode to all the Data Grid’s resizable inner components.

<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>

Data Grid - Inner component size

For more information, refer to Size Modes.

Run Demo: Data Grid - Toolbar

See Also