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

Children Selector

  • 2 minutes to read

This topic describes how to bind the AccordionControl to data if your data source contains objects of different types.

The table below shows the required properties:

Member Description
AccordionControl.ItemsSource Specifies the path to a collection of accordion items.
AccordionControl.ChildrenSelector Allows choosing the item’s children based on custom logic.

Complete the following steps to configure the binding:

  1. Specify the AccordionControl.ItemsSource property to bind the AccordionControl to data:

    <dxa:AccordionControl Name="accordion" ItemsSource="{Binding MyData.Categories}"/>
    
    public class ViewModel {
        public Data MyData { get; set; }
        public ViewModel() {
            MyData = new Data();
        }
    }
    public class Data {
        public List<Category> Categories { get; set; }
        public Data() {
            Categories = GetCategories();
        }
        private static List<Category> GetCategories() { 
            // ... 
        }
    }
    public class Category {
        public string CategoryName { get; set; }
        public string Description { get; set; }
        public List<Item> Items { get; set; }
    }
    public class Item {
        public string ItemName { get; set; }
        public string Description { get; set; }
    }
    
  2. Create a class that implements the IChildrenSelector interface and assign its instance to the AccordionControl.ChildrenSelector property:

    <dxa:AccordionControl Name="accordion" ItemsSource="{Binding MyData.Categories}" 
            ChildrenSelector="{StaticResource mySelector}"/>
    
    public class MySelector : IChildrenSelector {
        public IEnumerable SelectChildren(object item) {
            if(item is Category) {
                return ((Category)item).Items;
            } else {
                return null;
            }
        }
    }
    
  3. Create a data template for each data source type to display the required information in accordion item headers:

    <dxa:AccordionControl Name="accordion" ItemsSource="{Binding MyData.Categories}" 
            ChildrenSelector="{StaticResource mySelector}">
        <dxa:AccordionControl.Resources>
            <DataTemplate DataType="{x:Type local:Category}">
                <TextBlock Text="{Binding CategoryName}"/>
            </DataTemplate>
            <DataTemplate DataType="{x:Type local:Item}">
                <TextBlock Text="{Binding ItemName}"/>
            </DataTemplate>
        </dxa:AccordionControl.Resources>
    </dxa:AccordionControl>
    

The image below shows the result:

AccordionDataBindingChildrenSelector

#Example