How to add a static child node

[Rajesh]

Hi there,

  My customer would like to have a "HardCoded" text as one of the child node.

I have a RadTreeview with 3 to 4 level deep of treeview items. First 3 levels are dynamically populated. At the end I would like to have
"HardCoded" text as another treeview item. Something like this.

AccountWkb -> AccountInformation -> Balances (My ViewModel has a observable collection of property for each Items.)
AccountWkb -> OtherOrders -> MutualFund

Now I would like to add a "HardCoded" text as another treeview item.
For E.g Output should be

AccountWkb -> AccountInformation -> Balances -> Fields
AccountWkb -> OtherOrders -> MutualFund -> Fields

<UserControl.Resources>

    <ResourceDictionary>
        <Style x:Key="RADTreeViewItemStyle" TargetType="telerik:RadTreeViewItem">
            <Setter Property="HorizontalAlignment" Value="Left"/>
            <Setter Property="HorizontalContentAlignment" Value="Left" />
            <Setter Property="VerticalContentAlignment" Value="Center" />
            <Setter Property="CheckState" Value="Off" />
            <Setter Property="BorderThickness" Value="1" />
            <Setter Property="Padding" Value="1 0 5 0" />
            <Setter Property="IsDropAllowed" Value="True" />
            <Setter Property="ItemsOptionListType" Value="Default" />
            <Setter Property="IsEnabled" Value="True" />
            <Setter Property="MinHeight" Value="24" />
            <Setter Property="Template" Value="{StaticResource TreeViewItemDefaultTemplate}" />
            <Setter Property="ItemsPanel">
                <Setter.Value>
                    <ItemsPanelTemplate>
                        <telerik:TreeViewPanel VerticalAlignment="Bottom" />
                    </ItemsPanelTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <telerik:ContainerBindingCollection x:Name="BindingsCollections">
            <telerik:ContainerBinding PropertyName="IsSelected" Binding="{Binding IsSelected, Mode=TwoWay}"/>
            <telerik:ContainerBinding PropertyName="IsExpanded" Binding="{Binding IsExpanded, Mode=TwoWay}"/>
            <telerik:ContainerBinding PropertyName="IsLoadOnDemandEnabled" Binding="{Binding IsLoadOnDemandEnabled, Mode=TwoWay}"/>
        </telerik:ContainerBindingCollection>

        <telerik:HierarchicalDataTemplate x:Key="AvailableFieldTemplate">
            <TextBlock Text="{Binding Name}"/>
        </telerik:HierarchicalDataTemplate>

        <telerik:HierarchicalDataTemplate x:Key="FunctionTemplate"
                                      telerik:ContainerBinding.ContainerBindings="{StaticResource BindingsCollections}"
                                      ItemTemplate="{StaticResource AvailableFieldTemplate}"
                                      ItemsSource="{Binding AvailableFields}" >

            <TextBlock Text="{Binding Name}"/>
        </telerik:HierarchicalDataTemplate>

        <telerik:HierarchicalDataTemplate x:Key="FeatureTemplate"
                                      telerik:ContainerBinding.ContainerBindings="{StaticResource BindingsCollections}"
                                      ItemTemplate="{StaticResource FunctionTemplate}"
                                      ItemsSource="{Binding Functions}" >

            <TextBlock Text="{Binding Name}"/>
        </telerik:HierarchicalDataTemplate>

        <telerik:HierarchicalDataTemplate x:Key="ApplicationTemplate"
                                      telerik:ContainerBinding.ContainerBindings="{StaticResource BindingsCollections}"
                                      ItemTemplate="{StaticResource FeatureTemplate}"
                                      ItemsSource="{Binding Features}">

            <TextBlock Text="{Binding Name}"/>
        </telerik:HierarchicalDataTemplate>

    </ResourceDictionary>
</UserControl.Resources>

<Grid x:Name="LayoutRoot" >
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!--<StackPanel>-->
            <telerik:RadTreeView x:Name="LocationsView_RadTreeView" VerticalAlignment="Top" ItemContainerStyle="{StaticResource RADTreeViewItemStyle}"
                                 ItemsSource="{Binding RelativeSource={RelativeSource AncestorType=uc:BaseMainView}, Path=DataContext.FieldEditorViewModel.SelectedProductCatalog, Mode=TwoWay}"
                                 ItemTemplate="{StaticResource ApplicationTemplate}" SelectionMode="Single"
                                 IsLoadOnDemandEnabled="True" LoadOnDemand="LocationsView_RadTreeView_LoadOnDemand"
                                 IsExpandOnSingleClickEnabled="True" SelectedItem="{Binding Path=SelectedItem, Mode=TwoWay}" ScrollViewer.VerticalScrollBarVisibility="Auto">
            </telerik:RadTreeView>
        <!--</StackPanel>-->
    </Grid>
</Grid>

(So when I expand the "Balances" node or "MutualFund" node, it should populate "Fields" as its sub node. So that I can populate list of fields for respective location.)

I have attached my Xaml where I defined my RadTreeview.
Also I have attached a screen shot of how my location should look like.

Myself and my customer will highly appreciate your timely help.

Thanks in advance.

[Tina Stancheva]

Hello Rajesh,

The best approach would be to add the static items the same way you dynamically generate the other items. As you haven't sent your LoadOneDemand event handler implementation, I'm not sure what logic you have set up to load the items in the RadTreeView. However, you can check for the Level of the expanded item. If its value indicates that this is the last dynamically generated level in the hierarchy (for example the 4th level which will be a RadTreeViewItem with Level property of 3 as the Levels are counted from 0), then you can add the static items. For example, if the RadTreeViewItems represent a DataItem object, you can use a similar logic:

private void LocationsView_RadTreeView_LoadOnDemand(object sender, Telerik.Windows.RadRoutedEventArgs e)
{
    RadTreeViewItem expandedItem = e.OriginalSource as RadTreeViewItem;
    if (expandedItem != null)
    {
        if (expandedItem.Level < 3)
        {
            DataItem dataItem = expandedItem.Item as DataItem;
            if (dataItem == null) return;
            for (int j = 0; j < 3; j++)
            {
                DataItem child = new DataItem { Header = String.Format("{0}.{1}", dataItem.Header, j), IsLoadOnDemandEnabled = true };
                dataItem.Children.Add(child);
            }
        }
        else
        {
            DataItem dataItem = expandedItem.Item as DataItem;
            if (dataItem == null) return;
            dataItem.Children.Add(new DataItem("Fields"));
            dataItem.Children.Add(new DataItem("Footers"));
        }

    }
}

Or you can use a custom ValueConverter to create the last level of static items as demonstrated in the attached sample. Basically in this approach, you pass an empty collection of business items to the ItemsSource of a HierarchicalDataTemplate and add the items (Fields, Footers) in it in the Convert() method in the converter class.

The approach you choose to implement should really be based on the requirements and specifics of your application. You only need to have in mind that the RadTreeView and the RadTreeViewItems expect hierarchical data and you need to pass a collection of business items to display the children of any level. So even if your real data doesn't contain a collection of children for the last level, you'll need to create a one (even if it is a mock-up/temp collection) to display one more level of items.

Regards,
Tina Stancheva
the Telerik team

[Rajesh]

Thanks much!

Your sample code really helped me to understand to take a direction.

I used the Value converter approach to solve my issue.

Your suggestion really helped me.