Skip to main content

DevExpress v24.2 Update — Your Feedback Matters

Our What's New in v24.2 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

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

C#
[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.

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