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.ChildContent Property

Specifies an editor button’s content.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.2.dll

NuGet Package: DevExpress.Blazor

#Declaration

C#
[Parameter]
public RenderFragment<RenderFragment> ChildContent { get; set; }

#Property Value

Type Description
RenderFragment<RenderFragment>

Content markup.

#Remarks

The ChildContent parameter allows you to specify custom content for an editor’s command button.

The following code snippet adds a command button to a DxTextBox component. This button renders custom content (like counter) next to the default content specified in the button’s properties (text and icon). Use the @context parameter to specify where the default content should be rendered.

Razor
<DxTextBox Text="Your text">
    <Buttons>
        <DxEditorButton 
              Click="@Like"
              IconCssClass="btn-icon-like"
              Text="Like">
            <ChildContent>
                @*Default content: *@
                @context
                @*Custom content: *@
                <span class="ms-1">@likes</span>
            <ChildContent>
      </DxEditorButton>
    </Buttons>
</DxTextBox>

@code {
    int likes;

    void Like(MouseEventArgs args)
    {
        likes++;
    }
    protected override void OnInitialized()
    {
        likes = 1;
    }
}

<style>
    .btn-icon-like {
        height: 16px;
        width: 16px;
        -webkit-mask-image: url("images/icons/like.svg");
        mask-image: url("images/icons/like.svg");
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        background-color: currentColor;
    }
</style>

Command Button - Child Content

Note

Since ChildContent contains nested markup of its parent class, the template content must conform to HTML semantics.

Note that you can omit the <ChildContent> tag and specify the markup directly in the <DxEditorButton> tag:

Razor
<DxTextBox Text="Your text">
    <Buttons>
        <DxEditorButton 
              Click="@Like"
              IconCssClass="btn-icon-like"
              Text="Like">
                  @context
                  <span class="ms-1">@likes</span>
      </DxEditorButton>
    </Buttons>
</DxTextBox>
See Also