Skip to main content

DxEditorButton.Position Property

Specifies the button’s position in the editor.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.2.dll

NuGet Package: DevExpress.Blazor

Declaration

[DefaultValue(EditorButtonPosition.Right)]
[Parameter]
public EditorButtonPosition Position { get; set; }

Property Value

Type Default Description
EditorButtonPosition Right

A EditorButtonPosition enumeration value.

Available values:

Name Description
Left

The button is placed at the left edge of the editor.

Right

The button is placed at the right edge of the editor.

Remarks

The following code snippet adds two custom buttons to the Date Edit to different positions.

<DxDateEdit @bind-Date="@DateTimeValue"
            CssClass="dx-demo-editor-width">
    <Buttons>
        <DxEditorButton IconCssClass="editor-icon editor-icon-chevron-left-small"
                        Tooltip="Previous day"
                        Position="@EditorButtonPosition.Left"
                        Click="@(_ => OnChangeDayButtonClick(false))" />
        <DxEditorButton IconCssClass="editor-icon editor-icon-chevron-right-small"
                        Tooltip="Next day"
                        Position="@EditorButtonPosition.Right"
                        Click="@(_ => OnChangeDayButtonClick(true))" />
    </Buttons>
</DxDateEdit>

@code{
    DateTime DateTimeValue { get; set; } = DateTime.Today;
        void OnChangeDayButtonClick(bool isAdd) {
            DateTimeValue = DateTimeValue.AddDays(isAdd ? 1 : -1);
        }
}

Date Edit - Two Command Buttons

Run Demo: Editors - Command Buttons

See Also