DxAccordion.DataMappings Property

Specifies data mappings.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v26.1.dll

Declaration

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

Property Value

Type	Description
RenderFragment	A UI fragment to be rendered as Accordion items.

Remarks

You can populate the Accordion component with items from a data source.

Follow the steps below to bind Accordion to data:

1. Use the Data property to specify a data source. You can use different collection types:

   • Flat data (a collection of items organized as a single-level structure)
   • Hierarchical data (a collection of nested items)

2. Add the DataMappings tag to the component’s markup.

3. Create the DxAccordionDataMapping instance and map item properties (HasChildren, NavigateUrl, and so on) to data source fields. Mappings are used to assign data from the source collection to the component’s data model.

   • For flat data collections, use the Key and ParentKey properties to create a hierarchy of items. If the Accordion’s structure is linear, you can omit these properties.

   • For hierarchical data collections, the Children property is required to build the data model.

   You can create multiple DxAccordionDataMapping instances to specify different mappings for different nesting levels. Use the Level property to specify the item level for which data mappings are applied.

Run Demo: Accordion - Data Binding

Flat Data

The following code snippet binds the Accordion to the flat collection of data items. It specifies mappings for the Text, Key, and ParentKey properties.

Razor

<DxAccordion Data="DataSource">
    <DataMappings>
        <DxAccordionDataMapping Text="Name"
                                Key="Id"
                                ParentKey="CategoryId" />
    </DataMappings>
</DxAccordion>

@code {
    List<FlatDataItem> DataSource { get; set; }

    protected override void OnInitialized() {
        IEnumerable<ProductFlat> products = ProductData.Products;
        IEnumerable<ProductCategory> productSubcategories = ProductData.Categories;
        DataSource = new List<FlatDataItem>(Enum.GetValues<ProductCategoryMain>().Select(i => new FlatDataItem() { Name = i.ToString(), Id = i }));
        DataSource.AddRange(products.Select(i => new FlatDataItem() { Name = i.ProductName, Id = i.Id, CategoryId = i.ProductCategoryId }));
        DataSource.AddRange(productSubcategories.Select(i => new FlatDataItem() { Name = i.Subcategory, Id = i.SubcategoryID, CategoryId = i.Category }));
    }
}

FlatDataItem.cs

namespace BlazorDemo.Data {
    public class FlatDataItem {
        public string Name { get; set; }
        public object Id { get; set; }
        public object CategoryId { get; set; }
    }
}

Hierarchical Data

The following code snippet binds the Accordion to the collection of ChemicalElementGroup objects. Each object can have child objects. The code specifies the Children and Text mappings to adjust the Accordion’s data model to the specified data source.

Razor

<DxAccordion Data="@ChemicalElements.Groups">
    <DataMappings>
        <DxAccordionDataMapping Children="Groups"
                                Text="Name"/>
    </DataMappings>
</DxAccordion>

ChemicalElements.cs

using System;
using System.Collections.Generic;

namespace BlazorDemo.Data {
    public static class ChemicalElements {
        private static readonly Lazy<List<ChemicalElementGroup>> chemicalElementGroups = new Lazy<List<ChemicalElementGroup>>(() => {
            List<ChemicalElementGroup> groups = new List<ChemicalElementGroup>() {
                new ChemicalElementGroup("Metals", new List<ChemicalElementGroup>() {
                    new ChemicalElementGroup("Alkali metals"),
                    new ChemicalElementGroup("Alkaline earth metals"),
                    new ChemicalElementGroup("Inner transition elements", new List<ChemicalElementGroup>() {
                        new ChemicalElementGroup("Lanthanides"),
                        new ChemicalElementGroup("Actinides")
                    }),
                    new ChemicalElementGroup("Transition elements"),
                    new ChemicalElementGroup("Other metals")
                }),
                new ChemicalElementGroup("Metalloids"),
                new ChemicalElementGroup("Nonmetals", new List<ChemicalElementGroup>() {
                    new ChemicalElementGroup("Halogens"),
                    new ChemicalElementGroup("Noble gases"),
                    new ChemicalElementGroup("Other nonmetals")
                })
            };
            return groups;
        });

        public static List<ChemicalElementGroup> Groups { get { return chemicalElementGroups.Value; } }
    }
}

Synchronize the Data Source

Mapped fields are not updated automatically when users interact with the Accordion control. To synchronize the data source with the current control state, handle Accordion events and update the data source fields programmatically:

Razor

<DxAccordion Data="@Products"
             SelectionMode="NavigationSelectionMode.Single"
             SelectionChanged="@OnSelectionChanged">
    <DataMappings>
        <DxAccordionDataMapping Text="Name"
                                Selected="IsSelected"
                                Children="Children" />
    </DataMappings>
</DxAccordion>

@code {
    void OnSelectionChanged(AccordionSelectionChangedEventArgs e) {
        foreach(var item in e.DeselectedItems)
            if(item.DataItem is Product deselected)
                deselected.IsSelected = false;
        foreach(var item in e.SelectedItems)
            if(item.DataItem is Product selected)
                selected.IsSelected = true;
    }

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

Employee.cs

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