Grid with Child Elements per Item

6 posts, 0 answers
  1. Frustrated Dev
    Frustrated Dev avatar
    35 posts
    Member since:
    Oct 2006

    Posted 07 Feb 2010 Link to this post

    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!


  2. Vlad
    Admin
    Vlad avatar
    11100 posts

    Posted 08 Feb 2010 Link to this post

    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.
  3. DevCraft banner
  4. Frustrated Dev
    Frustrated Dev avatar
    35 posts
    Member since:
    Oct 2006

    Posted 08 Feb 2010 Link to this post

    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
  5. Sriram
    Sriram avatar
    14 posts
    Member since:
    Apr 2009

    Posted 08 Feb 2010 Link to this post

    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); 

  6. Frustrated Dev
    Frustrated Dev avatar
    35 posts
    Member since:
    Oct 2006

    Posted 08 Feb 2010 Link to this post

    Thanks Sriram,

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

    Thank you,
  7. Sriram
    Sriram avatar
    14 posts
    Member since:
    Apr 2009

    Posted 09 Feb 2010 Link to this post

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