ComponentOne FlexGrid for UWP
Features / Row Details Template
In This Topic
    Row Details Template
    In This Topic

    FlexGrid provides the flexibility to show additional information about each row through a row details template. A row details template is an empty data template that can be added to a row for displaying details. You can embed text, UI elements, and data-bound controls such as InputPanel in the row details template. For each row in a grid, you can insert a data template to present its summary, or enlist details in other controls such as text box, without affecting the dimensions of the grid. You can also use this template to create hierarchical grids displaying grouped data.

    The following image shows details of each row displayed in a row details template.

    To add row details template in FlexGrid

    1. Add C1FlexGrid control to the XAML designer and set the name of the control as grid.
    2. In XAML code, create three columns inside the <Grid> tag to display some data fields such as Product ID, Product Name and Order Date.
      XAML
      Copy Code
      <FlexGrid:C1FlexGrid.Columns>
          <FlexGrid:Column Header="Product ID" Binding="{Binding ProductId}" Width="75" />
          <FlexGrid:Column Header="Product Name" Binding="{Binding ProductName}" Width="150" />
          <FlexGrid:Column Header="Order Date" Binding="{Binding OrderDate}" Width="300" />
      </FlexGrid:C1FlexGrid.Columns>
      
    3. Create a row details template to include an Image control and six TextBlock controls within a StackPanel.
      XAML
      Copy Code
      <FlexGrid:C1FlexGrid.RowDetailsTemplate>
          <DataTemplate>
              <StackPanel Background="GhostWhite">
                  <Image HorizontalAlignment="Left" Name="img"
                         Source="{Binding ImgSource}"  Height="64" Margin="10" />
                  <Grid Margin="0, 10">
                      <Grid.ColumnDefinitions>
                          <ColumnDefinition Width="Auto" />
                          <ColumnDefinition Width="*" />
                      </Grid.ColumnDefinitions>
                      <Grid.RowDefinitions>
                          <RowDefinition Height="Auto" />
                          <RowDefinition Height="Auto" />
                          <RowDefinition Height="Auto" />
                      </Grid.RowDefinitions>
                      <TextBlock Text="Product ID: " FontWeight="Bold" />
                      <TextBlock Text="{Binding ProductId}" Grid.Column="1" />
                      <TextBlock Text="Product Name: " FontWeight="Bold" Grid.Row="1" />
                      <TextBlock Text="{Binding ProductName}" Grid.Column="1" Grid.Row="1" />
                      <TextBlock Text="Order Date: " FontWeight="Bold" Grid.Row="2" />
                      <TextBlock Text="{Binding OrderDate}" Grid.Column="1" Grid.Row="2" />
                  </Grid>
              </StackPanel>
          </DataTemplate>
      </FlexGrid:C1FlexGrid.RowDetailsTemplate>
      
    4. Right-click on the project name and select Add|New Folder from the menu to add a folder named Resources.
    5. Add images to the Resources folder.
    6. Switch to the Code view and create a class, ProductDetails, to add data in the FlexGrid.
      Public Class ProductDetails
          Public Property ProductId() As Integer
              Get
                  Return m_ProductId
              End Get
              Set
                  m_ProductId = Value
              End Set
          End Property
          Private m_ProductId As Integer
          Public Property ProductName() As String
              Get
                  Return m_ProductName
              End Get
              Set
                  m_ProductName = Value
              End Set
          End Property
          Private m_ProductName As String
          Public Property OrderDate() As DateTime
              Get
                  Return m_OrderDate
              End Get
              Set
                  m_OrderDate = Value
              End Set
          End Property
          Private m_OrderDate As DateTime
          Public Property ImgSource() As ImageSource
              Get
                  Return m_ImgSource
              End Get
              Set
                  m_ImgSource = Value
              End Set
          End Property
          Private m_ImgSource As ImageSource
      End Class
      
      public class ProductDetails
      {
          public int ProductId { get; set; }
          public string ProductName { get; set; }
          public DateTime OrderDate { get; set; }
          public ImageSource ImgSource { get; set; }
      }
      
    7. Create a list of products, add data to it and bind the FlexGrid control with the list using ItemsSource property.
      'Create a list
      Dim users As New List(Of ProductDetails)()
      'Add items to the list
      users.Add(New ProductDetails() With {
        .ProductId = 101,
        .ProductName = "Beverages",
        .OrderDate = New DateTime(1971, 7, 23, 8, 0, 20),
        .ImgSource = New BitmapImage(New Uri("ms-appx:///Resources/Beverage.png"))
      })
      users.Add(New ProductDetails() With {
        .ProductId = 102,
        .ProductName = "Condiments",
        .OrderDate = New DateTime(1974, 1, 17, 12, 30, 10),
        .ImgSource = New BitmapImage(New Uri("ms-appx:///Resources/Condiments.png"))
      })
      users.Add(New ProductDetails() With {
        .ProductId = 103,
        .ProductName = "Confections",
        .OrderDate = New DateTime(1991, 9, 2, 2, 42, 45),
        .ImgSource = New BitmapImage(New Uri("ms-appx:///Resources/Confections.png"))
      })
      users.Add(New ProductDetails() With {
        .ProductId = 104,
        .ProductName = "Poultry",
        .OrderDate = New DateTime(1991, 10, 24, 6, 20, 49),
        .ImgSource = New BitmapImage(New Uri("ms-appx:///Resources/Poultry.png"))
      })
      'Populate the grid
      grid.ItemsSource = users
      
      //Create a list
      List<ProductDetails> users = new List<ProductDetails>();
      
      //Add items to the list
      users.Add(new ProductDetails() { ProductId = 101, ProductName = "Beverages",
        OrderDate = new DateTime(1971, 7, 23, 8, 0,20),
        ImgSource = new BitmapImage(new Uri("ms-appx:///Resources/Beverage.png"))});
      users.Add(new ProductDetails() { ProductId = 102, ProductName = "Condiments",
        OrderDate = new DateTime(1974, 1, 17, 12,30,10),
        ImgSource = new BitmapImage(new Uri("ms-appx:///Resources/Condiments.png"))});
      users.Add(new ProductDetails() { ProductId = 103, ProductName = "Confections",
        OrderDate = new DateTime(1991, 9, 2, 2,42,45),
        ImgSource = new BitmapImage(new Uri("ms-appx:///Resources/Confections.png"))});
      users.Add(new ProductDetails() { ProductId = 104, ProductName = "Poultry",
        OrderDate = new DateTime(1991, 10, 24, 6,20,49),
        ImgSource = new BitmapImage(new Uri("ms-appx:///Resources/Poultry.png"))});
      
      //Populate the grid
      grid.ItemsSource = users;