DxRibbonGroup.ChildContent Property

Specifies group nested items.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.2.dll

NuGet Package: DevExpress.Blazor

Declaration

C#

[Parameter]
public RenderFragment ChildContent { get; set; }

Property Value

Type	Description
RenderFragment	Nested items.

Remarks

A ribbon group can contain the following nested items:

• Button, Split Button (DxRibbonItem)
• Spin Edit (DxRibbonSpinEditItem<TValue>)
• Color Picker (DxRibbonColorPaletteItem)
• ComboBox (DxRibbonComboBoxItem<TData, TValue>)

Blazor automatically generates the ChildContent property when you specify tabs between <DxRibbonGroup>…<DxRibbonGroup> tags:

Razor

<DxRibbon>
    <DxRibbonTab Text="Home">
        <DxRibbonGroup Text="Clipboard">
            <ChildContent>
                <DxRibbonItem Text="Undo" IconCssClass="rb-icon rb-icon-undo" SplitDropDownButton="true">
                    <DxRibbonItem Text="Redo" />
                </DxRibbonItem>
                <DxRibbonItem Text="Paste" IconCssClass="rb-icon rb-icon-paste" SplitDropDownButton="true">
                    <DxRibbonItem Text="Copy" />
                    <DxRibbonItem Text="Cut" />
                </DxRibbonItem>
            </ChildContent>
        </DxRibbonGroup>
    </DxRibbonTab>
</DxRibbon>

Note

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

You can omit the <ChildContent> tag and specify the markup directly in the <DxRibbonGroup> tag:

Razor

<DxRibbon>
    <DxRibbonTab Text="Home">
        <DxRibbonGroup Text="Clipboard">
            <DxRibbonItem Text="Undo" IconCssClass="rb-icon rb-icon-undo" SplitDropDownButton="true">
                <DxRibbonItem Text="Redo" />
            </DxRibbonItem>
            <DxRibbonItem Text="Paste" IconCssClass="rb-icon rb-icon-paste" SplitDropDownButton="true">
                <DxRibbonItem Text="Copy" />
                <DxRibbonItem Text="Cut" />
            </DxRibbonItem>
        </DxRibbonGroup>
    </DxRibbonTab>
</DxRibbon>