Grid with Child Elements per Item

[Frustrated Dev]

Hello,

I am using the Telerik GridView control. I am trying to define a GridView that will recreate the image found here (and attached): http://i891.photobucket.com/albums/ac118/aparanoidandroid/orders.png

In an attempt to recreate this, I have added the following code:

<telerik:RadGridView x:Name="myGridView" AutoGenerateColumns="False">
  <telerik:RadGridView.Columns>
    <telerik:GridViewDataColumn Header="Order #"
      DataMemberBinding="{Binding OrderNumber}" />
    <telerik:GridViewDataColumn Header="Details">
      <telerik:GridViewDataColumn.CellTemplate>
        <DataTemplate>
          <StackPanel Orientation="Vertical">
        <StackPanel Orientation="Horizontal">
          <TextBlock Text="Ordered On: " />
          <TextBlock Text="{Binding OrderDate}" />
        </StackPanel>

            <StackPanel Orientation="Horizontal">
              <TextBlock Text="Placed By: " />
          <TextBlock Text="{Binding OrderUserName}" />
        </StackPanel>
      </StackPanel>
        </DataTemplate>
      </telerik:GridViewDataColumn.CellTemplate>
    </telerik:GridViewDataColumn>

    <telerik:GridViewDataColumn Header="Received"
      DataMemberBinding="{Binding IsReceived}" TextAlignment="Center">
      <telerik:GridViewDataColumn.CellTemplate>
        <DataTemplate>
          <CheckBox IsChecked="{Binding IsReceived}" />
        </DataTemplate>
      </telerik:GridViewDataColumn.CellTemplate>
    </telerik:GridViewDataColumn>

    <telerik:GridViewDataColumn Header="Packed"
      DataMemberBinding="{Binding IsPacked}" TextAlignment="Center">
      <telerik:GridViewDataColumn.CellTemplate>
        <DataTemplate>
          <CheckBox IsChecked="{Binding IsPacked}" />
        </DataTemplate>
      </telerik:GridViewDataColumn.CellTemplate>
    </telerik:GridViewDataColumn>

    <telerik:GridViewDataColumn Header="Shipped"
      DataMemberBinding="{Binding IsShipped}" TextAlignment="Center">
      <telerik:GridViewDataColumn.CellTemplate>
        <DataTemplate>
          <CheckBox IsChecked="{Binding IsShipped}" />
        </DataTemplate>
      </telerik:GridViewDataColumn.CellTemplate>
    </telerik:GridViewDataColumn>
  </telerik:RadGridView.Columns>
</telerik:RadGridView>

                                                                    
However, I am not sure how to display the order details. The order details are the "shirts", "shoes", "socks", etc. rows displayed in the image. You will notice that each of these items spans the length of the checkbox fields. In addition, the information in these rows must be saved back to a database. And, each order must be selectable.

I'm totally lost on how to implement this. My main concern is getting the UI defined at this point.

Thank you for your help!

[Vlad]

Hi Frustrated Dev,

You've missed these examples:
http://demos.telerik.com/silverlight/#GridView/RowDetails
http://demos.telerik.com/silverlight/#GridView/CustomRowLayout

Regards,
Vlad
the Telerik team

Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Follow the status of features or bugs in PITS and vote for them to affect their priority.

[Frustrated Dev]

This really doesn't help much. I have a dynamic list of child elements. I need to display those child elements in rows for each order as shown in the picture. How do I create a dynamic list within a row with the Telerik Grid control?

Thank you

[Sriram]

You can Use Template column and design your colum as you like. for dynamic you need to build datatemplate dynamically assign it for the template column Hint. Design Xaml Markup in your code

GridViewDataColumn templateColumn = new GridViewDataColumn();
templateColumn.Header = "Birthday";

StringBuilder CellTemp = new StringBuilder();
CellTemp.Append("<DataTemplate ");
CellTemp.Append("xmlns='http://schemas.microsoft.com/winfx/");
CellTemp.Append("2006/xaml/presentation' ");
CellTemp.Append("xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml' ");

//Be sure to replace "YourNamespace" and "YourAssembly" with your app's
//actual namespace and assembly here
CellTemp.Append("xmlns:local = 'clr-namespace:YourNamespace");
CellTemp.Append(";assembly=YourAssembly'>");

CellTemp.Append("<Grid>");
CellTemp.Append("<Grid.Resources>");
CellTemp.Append("<local:DateTimeConverter x:Key='DateConverter' />");
CellTemp.Append("</Grid.Resources>");
CellTemp.Append("<TextBlock ");
CellTemp.Append("Text = '{Binding Birthday, ");
CellTemp.Append("Converter={StaticResource DateConverter}}' ");
CellTemp.Append("Margin='4'/>");
CellTemp.Append("</Grid>");
CellTemp.Append("</DataTemplate>");

StringBuilder CellETemp = new StringBuilder();
CellETemp.Append("<DataTemplate ");
CellETemp.Append("xmlns='http://schemas.microsoft.com/winfx/");
CellETemp.Append("2006/xaml/presentation' ");
CellETemp.Append("xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml' ");
CellETemp.Append("xmlns:basics='clr-namespace:System.Windows.Controls;");
CellETemp.Append("assembly=System.Windows.Controls' >");
CellETemp.Append("<basics:DatePicker ");
CellETemp.Append("SelectedDate='{Binding Birthday, Mode=TwoWay}' />");
CellETemp.Append("</DataTemplate>");

templateColumn.CellTemplate =
    (DataTemplate)XamlReader.Load(CellTemp.ToString());
templateColumn.CellEditingTemplate =
    (DataTemplate)XamlReader.Load(CellETemp.ToString());
targetGridView.Columns.Add(templateColumn);

[Frustrated Dev]

Thanks Sriram,

Just out of curiosity, which event should I build my templateColumn in?

Thank you,

[Sriram]

You Can Build Template in Constructor of the class ie., UserControl,Page,ChildWindow, etc Initialize data template after InititalizeComponents() Method..