Display Child Elements from DomainContext

[cmr]

Using the Northwind database as an example, how would Products.ProductName be displayed as a child element for Supplier.CompanyName in the RadPanelBar?

The datasource is from an Entity Framework Model which just contains the Supplier and Product tables.  A domain service has been created to utilize this .edmx file.  Basically, how can the main header and sub items be populated using the Entity Framework?  The sample code below is more or less a spin from this help documentation. 

<riaControls:DomainDataSource AutoLoad="True" d:DesignData="{d:DesignInstance my1:Supplier, CreateList=true}" Height="0" LoadedData="supplierDomainDataSource_LoadedData" Name="supplierDomainDataSource" QueryName="GetSuppliersQuery" Width="0">

<riaControls:DomainDataSource.DomainContext>

<my:NorthwindDomainContext />

</riaControls:DomainDataSource.DomainContext>

</riaControls:DomainDataSource>

<telerik:RadPanelBar Height="500" ItemsSource="{Binding ElementName=supplierDomainDataSource, Path=Data}" Name="supplierRadPanelBar" Width="200" >

<telerik:RadPanelBar.ItemTemplate>

<telerik:HierarchicalDataTemplate ItemsSource="{Binding CompanyName}">

<StackPanel>

<TextBlock Text="{Binding Products.ProductName}" />

</StackPanel>

</telerik:HierarchicalDataTemplate>

</telerik:RadPanelBar.ItemTemplate>

</telerik:RadPanelBar>

[Tina Stancheva]

Hello cmr,

If you want to display the CompanyName as a Header in the PanelBarItems and use the Products collection of each supplier as a content of the items, you will need to define two separate data templates. The first one will be hierarchical and its ItemsSource should point to the collection that will be used in the content, in this case - the Products collection.

The second one can be a simple DataTemplate, that displays the ProductName for each product.

<UserControl.Resources>
<DataTemplate x:Key="ProductTemplate">
     <TextBlock Text="{Binding ProductName}"/>
</DataTemplate>

<telerik:HierarchicalDataTemplate ItemsSource="{Binding Products}"
                  ItemTemplate="{StaticResource ProductTemplate}"
                  x:Key="SuppliersTemplate">
      <StackPanel>
          <TextBlock Text="{Binding CompanyName }" />
      </StackPanel>
</telerik:HierarchicalDataTemplate>
</UserControl.Resources>
<Grid>
  <telerik:RadPanelBar Height="500" ItemsSource="{Binding ElementName=supplierDomainDataSource, Path=Data}"
      Name="supplierRadPanelBar" Width="200"
      ItemTemplate="{StaticResource SuppliersTemplate}">

  </telerik:RadPanelBar>
</Grid>
</UserControl>

I also prepared a sample project for you to take a look at. In the example are used the Customer and Order tables of the Northwind database. Also, the Orders for each customer are not initialy loaded. Therefore, in the Selected() event handler of the RadPanelBar is implement custom logic in order to load the appropriate data.

You can take a look at it and let me know if you need further information.

Sincerely yours,
Tina Stancheva
the Telerik team

[cmr]

Fantastic, Tina!  Your suggestion worked like a charm.

[Lantu Datinh]

How about this scenario:

Category contains Productions

--------------------------- Category bar 1--------------------------------------
<RadGrid of Products>
--------------------------- Category bar 2--------------------------------------
--------------------------- Category bar 3--------------------------------------

How can we achieved this?
Please help!

[Tina Stancheva]

Hello Lantu,

You need to pass a collection of items to the HierarchicalDataTemplate.ItemsSource property so in your case you can use a Converter to create a collection of Category objects as the source of the second-level items as well:

    <local:MyConverter x:Key="MyConverter" />
    <DataTemplate x:Key="ProductTemplate">
        <telerik:RadGridView ItemsSource="{Binding Products}" />
    </DataTemplate>

    <telerik:HierarchicalDataTemplate x:Key="CategoryTemplate"
                                      ItemsSource="{Binding Converter={StaticResource MyConverter}}"
                                      ItemTemplate="{StaticResource ProductTemplate}">
        <TextBlock Text="{Binding Name}" />
    </telerik:HierarchicalDataTemplate>

</UserControl.Resources>

public class MyConverter : IValueConverter
{

    #region IValueConverter Members

    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        List<object> childItems = new List<object>();
        childItems.Add(value);
        return childItems;
    }

    public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        return value;
    }

    #endregion
}

I attached a sample project to get you started. Let me know if it helps.

Kind regards,
Tina Stancheva
the Telerik team