Children Path

  • 2 minutes to read

This topic describes how to bind the AccordionControl to data if all objects in your data source are the same type.

The table below shows the required properties:

Member Description
AccordionControl.ItemsSource Specifies the path to a collection of accordion items.
AccordionControl.ChildrenPath Specifies the path to the property that contains an accordion item's children.
AccordionControl.DisplayMemberPath Specifies the path to the property whose value the accordion item's header displays.

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 AppMenu.MenuItems}"/>
    
    class ViewModel {
        public Menu AppMenu { get; set; }
        public ViewModel() {
            AppMenu = new Menu();
        }
    }
    public class Menu {
        public List<MenuItem> MenuItems { get; set; }
        public Menu() {
            MenuItems = GetMenuItems();
        }
        private static List<MenuItem> GetMenuItems() { 
            // ...
        }
    }
    public class MenuItem {
        public string Caption { get; set; }
        public List<MenuItem> SubItems { get; set; }
    }
    
  2. Specify the AccordionControl.ChildrenPath property to build the accordion item hierarchy:

    <dxa:AccordionControl Name="accordion" ItemsSource="{Binding AppMenu.MenuItems}" 
        ChildrenPath="SubItems"/>
    
  3. Specify the AccordionControl.DisplayMemberPath property to display the required information in accordion item headers:

    <dxa:AccordionControl Name="accordion" ItemsSource="{Binding AppMenu.MenuItems}" 
        ChildrenPath="SubItems" 
        DisplayMemberPath="Caption"/>
    

The image below shows the result:

AccordionDataBindingChildrenPath

Example