DxFilterBuilder.SizeMode Property

Specifies the size of the Filter Builder component and its inner elements.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v25.2.dll

NuGet Package: DevExpress.Blazor

Declaration

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

Property Value

Type	Default	Description
Nullable<SizeMode>	null	The size mode. If the property is not specified (the value is null), the size is determined by the SizeMode global option.

Available values:

Name	Description
Small	Small size.
Medium	Medium size.
Large	Large size.

Remarks

The SizeMode property allows you to apply different size modes to the <DxFilterBuilder> component and its items:

Razor

<div class="outer-container">
    <div class="inner-container">
        <DxFilterBuilder SizeMode="SizeMode.Small">
            <Fields>
                <DxFilterBuilderField FieldName="ProductName" Caption="Product Name" Type="@typeof(string)" />
                <DxFilterBuilderField FieldName="CategoryId" Caption="Category" Type="@typeof(int)" />
            </Fields>
        </DxFilterBuilder>
    </div>
    <div class="inner-container">
        <DxFilterBuilder SizeMode="SizeMode.Medium">
            <Fields>
                <DxFilterBuilderField FieldName="ProductName" Caption="Product Name" Type="@typeof(string)" />
                <DxFilterBuilderField FieldName="CategoryId" Caption="Category" Type="@typeof(int)" />
            </Fields>
        </DxFilterBuilder>
    </div>
    <div class="inner-container">
        <DxFilterBuilder SizeMode="SizeMode.Large">
            <Fields>
                <DxFilterBuilderField FieldName="ProductName" Caption="Product Name" Type="@typeof(string)" />
                <DxFilterBuilderField FieldName="CategoryId" Caption="Category" Type="@typeof(int)" />
            </Fields>
        </DxFilterBuilder>
    </div>
</div>

CSS

.outer-container {
    margin: 20px;
    display: flex;
}
.inner-container {
    padding: 5px;
    border: 1px solid #eeeeee;
}