In order to use the RowDetails feature of UXGridView, we need to ensure that we have successfully bind UXGridView to a collection of data. For example: we are going to show list of Customers by using row details feature of UXGridView such as shown in the following screenshot.

Let’s start by following the step-by-step in Walkthrough: Bind UXGridView to WCF RIA Services using MVVM Pattern article in ClientUI documentation.

By carefully following the step-by-step found in the article, we have completed half way to our goal.

Last step, open Customers.xaml file and specify the template for RowDetailsTemplate property. The following code shows how to create list of Customers in UXGridView using row details.

<Intersoft:UXGridView Name="uXGridView1" ItemsSource="{Binding Path=Items}"
                        Margin="8" AutoGenerateColumns="False"
                        GridLinesVisibility="Horizontal" AreRowDetailsFrozen="True"
                        SelectionUnit="Row" RowDetailsVisibilityMode="VisibleWhenSelected"
                        CanUserPage="True" PageSize="20"
                        Intersoft:DockPanel.IsFillElement="True">
    <Intersoft:UXGridView.Columns>
        <Intersoft:UXGridViewExpanderColumn />
        <Intersoft:UXGridViewTextColumn Header="Customer ID" Binding="{Binding CustomerID}"/>
        <Intersoft:UXGridViewTextColumn Header="Contact Name" Binding="{Binding ContactName}"/>
        <Intersoft:UXGridViewTextColumn Header="Contact Title" Binding="{Binding ContactTitle}"/>
        <Intersoft:UXGridViewTextColumn Header="CompanyName" Binding="{Binding CompanyName}"/>
    </Intersoft:UXGridView.Columns>
    <Intersoft:UXGridView.RowDetailsTemplate>
        <DataTemplate>
            <Grid Height="128">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition/>
                </Grid.ColumnDefinitions>
                <Image HorizontalAlignment="Left" VerticalAlignment="Center"
                        Source="{Binding Path=PhotoPath}" Margin="8,8,8,8"/>
                <Grid Grid.Column="1" Margin="16,8,16,8">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="24"/>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="Auto"/>
                    </Grid.RowDefinitions>
                    <TextBlock HorizontalAlignment="Left" FontSize="16" FontWeight="Normal"
                                Text="{Binding Path=ContactName}" TextWrapping="NoWrap"/>
                    <StackPanel Grid.Row="1" Orientation="Horizontal">
                        <TextBlock Foreground="#FF7D7D7D" Text="{Binding Path=ContactTitle}"
                                    TextWrapping="NoWrap"/>
                        <TextBlock Foreground="#FF7D7D7D" Text=", "/>
                        <TextBlock Foreground="#FF7D7D7D" Text="{Binding Path=CompanyName}"
                                    TextWrapping="NoWrap"/>
                    </StackPanel>
                    <Border Grid.Row="3" Grid.RowSpan="2" Background="#7FF0F0F0" CornerRadius="4"
                        HorizontalAlignment="Right" VerticalAlignment="Bottom">
                        <StackPanel Margin="4">
                            <StackPanel Orientation="Horizontal">
                                <TextBlock Text="Phone : " TextWrapping="NoWrap"/>
                                <TextBlock Text="{Binding Path=Phone}" TextWrapping="NoWrap"/>
                            </StackPanel>
                            <StackPanel Orientation="Horizontal">
                                <TextBlock Text="Fax : " TextWrapping="NoWrap"/>
                                <TextBlock Text="{Binding Path=Fax}" TextWrapping="NoWrap"/>
                            </StackPanel>
                        </StackPanel>
                    </Border>
                </Grid>
            </Grid>
        </DataTemplate>
    </Intersoft:UXGridView.RowDetailsTemplate>
</Intersoft:UXGridView>

Hope this helps.