Current filter:
                                You should refresh the page.
                                Support Center

                                How to build a Tree via HierarchicalDataTemplate

                                0

                                This example demonstrates how to display information in a tree from a hierarchical data structure using HierarchicalDataTemplate.

                                • James Gustafson 10.21.2013

                                  Configuration: IDE:Windows Visual Studio 2010 Professional, DevExpress v13.1, OS:Windows 7

                                  I downloaded and ran this example in debug mode. The UI displays correctly, but when I expand all the items (where they expands beyond visible area), I get the following errors in my output console:
                                  System.Windows.Data Error: 40 : BindingExpression path error: 'Progress' property not found on 'object' ''Task' (HashCode=2375986)'. BindingExpression:Path=Row.Progress; DataItem='TreeListRowData' (HashCode=54363863); target element is 'ProgressBar' (Name=''); target property is 'Value' (type 'Double')
                                  ...
                                  System.Windows.Data Error: 40 : BindingExpression path error: 'EndDate' property not found on 'object' ''ProjectStage' (HashCode=51243495)'. BindingExpression:Path=Row.EndDate; DataItem='TreeListRowData' (HashCode=46139827); target element is 'TextBlock' (Name=''); target property is 'Text' (type 'String')
                                  System.Windows.Data Error: 40 : BindingExpression path error: 'State' property not found on 'object' ''ProjectStage' (HashCode=51243495)'. BindingExpression:Path=Row.State; DataItem='TreeListRowData' (HashCode=46139827); target element is 'ComboBoxEdit' (Name=''); target property is 'SelectedItem' (type 'Object')
                                  ...

                                  Also, (Forgive the newbie question -- I have little-to-no .NET, C#, DevEpxress experience):
                                  I have a hierarchical data structure similar to this example. I'd prefer to keep the data bindings/display all in XAML. Is there a way to display the data in a grid view _other_ than a TreeListView -- I read a post somewhere that said you _had_ to use a TreeView, but would like 2nd opinion? eg: Say I want to replace the 'Name' and 'Executor' columns with 'Project', 'Stage', and 'Task'. And instead of expanding the rows to view the data hierarchy details, the next column to the right contained the details. So in this case (which would make no graphical sense) the left-most column would have 'Project: Betaron' and 'Project: Stanton', the next column would have the "Information Gathering, Planning, Design, Development, Testing and Delivery' as sub-rows within the project. The next column would have "Start/end date, completed' etc as sub-rows within the Stage.

                                  I tried using Grid Control Bands but was unsuccessful -- probably a configuration issue on my end. I just wanted to know if this was even possible before i waste too many more cycles on it. Any examples would be greatly appreciated ;)

                                • Hi James,

                                  I see that you've created a separate ticket regarding this issue - Q534797. We will contact you there.

                                  Thanks

                                You must  log in  or  register  to leave comments
                                Select file
                                • MainWindow.xaml
                                • Data.cs
                                • ViewModel.cs
                                Select language
                                • C#
                                • VB.NET
                                Select version
                                • v2011 vol 1.7 - v2013 vol 2.9
                                <Window x:Class="HierarchicalDataTemplateMode.MainWindow"
                                        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                                        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                                        xmlns:dx="http://schemas.devexpress.com/winfx/2008/xaml/core"
                                        xmlns:dxg="http://schemas.devexpress.com/winfx/2008/xaml/grid"
                                        xmlns:dxe="http://schemas.devexpress.com/winfx/2008/xaml/editors"
                                        xmlns:local="clr-namespace:HierarchicalDataTemplateMode"
                                        Title="MainWindow" Height="450" Width="700">
                                    <Window.Resources>
                                        <ResourceDictionary>
                                            <local:ViewModel x:Key="viewModel" />
                                            <local:States x:Key="states" />
                                            <HierarchicalDataTemplate DataType="{x:Type local:ProjectObject}" ItemsSource="{Binding Stages}">
                                                <dx:MeasurePixelSnapper>
                                                    <StackPanel Orientation="Vertical">
                                                        <ContentPresenter x:Name="defaultRowPresenter" Content="{Binding}" ContentTemplate="{Binding View.DefaultDataRowTemplate}" />
                                                        <Border Padding="2" HorizontalAlignment="Stretch" VerticalAlignment="Center" BorderBrush="#FFC3CEDC" BorderThickness="0,1,0,0">
                                                            <ProgressBar Height="5" Minimum="0" Maximum="100" Value="{Binding Row.Progress}" />
                                                        </Border>
                                                    </StackPanel>
                                                </dx:MeasurePixelSnapper>
                                            </HierarchicalDataTemplate>
                                            <HierarchicalDataTemplate DataType="{x:Type local:ProjectStage}" ItemsSource="{Binding Tasks}">
                                                <dx:MeasurePixelSnapper>
                                                    <StackPanel Orientation="Vertical">
                                                        <ContentPresenter x:Name="defaultRowPresenter" Content="{Binding}" ContentTemplate="{Binding View.DefaultDataRowTemplate}" />
                                                        <Border Padding="2" HorizontalAlignment="Stretch" VerticalAlignment="Center" BorderBrush="#FFC3CEDC" BorderThickness="0,1,0,0">
                                                            <ProgressBar Height="5" Minimum="0" Maximum="100" Value="{Binding Row.Progress}" />
                                                        </Border>
                                                    </StackPanel>
                                                </dx:MeasurePixelSnapper>
                                            </HierarchicalDataTemplate>
                                            <ControlTemplate x:Key="ComboBoxStateItemTemplate">
                                                <StackPanel Orientation="Horizontal" Margin="3,0,0,0" Background="Transparent">
                                                    <dx:PixelSnapper>
                                                        <Image Height="16" Width="16" Source="{Binding Path=(dxe:BaseEdit.OwnerEdit).SelectedItem.Image}" />
                                                    </dx:PixelSnapper>
                                                    <TextBlock Margin="2" Text="{Binding Path=(dxe:BaseEdit.OwnerEdit).SelectedItem.TextValue}" VerticalAlignment="Center" />
                                                </StackPanel>
                                            </ControlTemplate>
                                            <DataTemplate DataType="{x:Type local:Task}">
                                                <StackPanel Orientation="Vertical">
                                                    <dx:MeasurePixelSnapper>
                                                        <ContentPresenter x:Name="defaultRowPresenter" Content="{Binding}" ContentTemplate="{Binding View.DefaultDataRowTemplate}" />
                                                    </dx:MeasurePixelSnapper>
                                                    <Border Padding="2" HorizontalAlignment="Stretch" VerticalAlignment="Center" BorderBrush="#FFC3CEDC" BorderThickness="0,1,0,0">
                                                        <Grid HorizontalAlignment="Stretch" VerticalAlignment="Center">
                                                            <Grid.RowDefinitions>
                                                                <RowDefinition />
                                                                <RowDefinition />
                                                            </Grid.RowDefinitions>
                                                            <Grid.ColumnDefinitions>
                                                                <ColumnDefinition Width="Auto" />
                                                                <ColumnDefinition Width="*" />
                                                            </Grid.ColumnDefinitions>
                                                            <StackPanel Margin="2,0" Orientation="Horizontal" Grid.Column="0" Grid.Row="0">
                                                                <TextBlock Text="StartDate:" FontWeight="Bold" />
                                                                <TextBlock Text="{Binding Row.StartDate, StringFormat='MM/dd/yyyy'}" Margin="3,0,0,0" />
                                                            </StackPanel>
                                                            <StackPanel Margin="2,0" Orientation="Horizontal" Grid.Column="0" Grid.Row="1">
                                                                <TextBlock Text="EndDate:" FontWeight="Bold" />
                                                                <TextBlock Text="{Binding Row.EndDate, StringFormat='MM/dd/yyyy'}" Margin="3,0,0,0" />
                                                            </StackPanel>
                                                            <dxe:ComboBoxEdit HorizontalAlignment="Right" VerticalAlignment="Center" MinWidth="100" Foreground="Black" IsTextEditable="False"
                                                                              ItemsSource="{Binding DataSource, Source={StaticResource states}}"
                                                                              DisplayTemplate="{StaticResource ComboBoxStateItemTemplate}"
                                                                              EditNonEditableTemplate="{StaticResource ComboBoxStateItemTemplate}"
                                                                              SelectedItem="{Binding Row.State, Mode=TwoWay}"
                                                                              Grid.Column="1" Grid.RowSpan="2">
                                                                <dxe:ComboBoxEdit.ItemTemplate>
                                                                    <DataTemplate>
                                                                        <StackPanel Orientation="Horizontal">
                                                                            <dx:MeasurePixelSnapper SnapperType="Around">
                                                                                <Image Height="16" Width="16" Source="{Binding Image}" />
                                                                            </dx:MeasurePixelSnapper>
                                                                            <TextBlock Text="{Binding TextValue}" Margin="2" />
                                                                        </StackPanel>
                                                                    </DataTemplate>
                                                                </dxe:ComboBoxEdit.ItemTemplate>
                                                            </dxe:ComboBoxEdit>
                                                        </Grid>
                                                    </Border>
                                                </StackPanel>
                                            </DataTemplate>
                                        </ResourceDictionary>
                                    </Window.Resources>
                                    <Grid>
                                        <dxg:TreeListControl x:Name="treeList" ItemsSource="{Binding DataItems}" DataContext="{StaticResource viewModel}">
                                            <dxg:TreeListControl.Columns>
                                                <dxg:TreeListColumn FieldName="Name" AllowSorting="True" />
                                                <dxg:TreeListColumn FieldName="Executor" AllowSorting="True" />
                                            </dxg:TreeListControl.Columns>
                                            <dxg:TreeListControl.View>
                                                <dxg:TreeListView x:Name="view" TreeDerivationMode="HierarchicalDataTemplate"
                                                                  AllowEditing="True" NavigationStyle="Cell" />
                                            </dxg:TreeListControl.View>
                                        </dxg:TreeListControl>
                                    </Grid>
                                </Window>

                                To start a chat you should create a support ticket


                                If you need additional product information, write to us at info@devexpress.com or call us at +1 (818) 844-3383

                                FOLLOW US

                                DevExpress engineers feature-complete Presentation Controls, IDE Productivity Tools, Business Application Frameworks, and Reporting Systems for Visual Studio, along with high-performance HTML JS Mobile Frameworks for developers targeting iOS, Android and Windows Phone. Whether using WPF, Silverlight, ASP.NET, WinForms, HTML5 or Windows 8, DevExpress tools help you build and deliver your best in the shortest time possible.

                                Copyright © 1998-2014 Developer Express Inc.
                                All trademarks or registered trademarks are property of their respective owners