DxAccordionDataMappingBase.Expanded Property

Maps a data source field that specifies whether an Accordion item is expanded.

Namespace: DevExpress.Blazor.Base

Assembly: DevExpress.Blazor.v26.1.dll

Declaration

[DefaultValue(null)]
[Parameter]
public string Expanded { get; set; }

Property Value

Type	Default	Description
String	null	The field name.

Remarks

The Expanded property maps a Boolean field from your data source to the expanded state of Accordion items. When the field value is true, the corresponding item is expanded. Otherwise, the item is collapsed.

The following code snippet maps the IsExpanded field to the initial expanded state of an Accordion item:

Razor

<DxAccordion Data="@Products">
    <DataMappings>
        <DxAccordionDataMapping Text="Name"
                                Expanded="IsExpanded"
                                Children="Children" />
    </DataMappings>
</DxAccordion>

@code {
    List<Product> Products { get; set; } = new() {
        new Product {
            Name = "Desktop UI Controls",
            IsExpanded = true,
            Children = new() {
                new Product { Name = "WinForms" },
                new Product { Name = "VCL (Delphi & C++Builder)" }
            }
        },
        new Product {
            Name = "Utilities",
            Children = new() {
                new Product {
                    Name = "WinForms Skin Editor"
                }
            }
        }
    };
}

Department.cs

public class Product
{
    public string Name { get; set; }
    public bool IsExpanded { get; set; }
    public List<Product> Children { get; set; }
}

When a user expands or collapses an Accordion item, the component does not update the corresponding field in the data source. Handle the following Accordion events to update the data source programmatically:

• AfterCollapse
• AfterExpand