Is it possible yet to stack columns in WPF RadGridView?

[Jason]

This is a question someone asked a long time ago here:

I would like to display the columns of a DataRow in more than one row of the GridView.

Something like

HeaderRow            Last Name        First Name
                                Phone                Email

Row 1                    Bill                    Smith
                                719-999-9999 [e-mail]

Row 2                    Joe                    Brown
                                203-000-0000 [e-mail]

Can this be done?  I have done this in WinForms RadGridView in the past using an HtmlViewDefinition, and I was hoping WPF had the same sort of option.

Thanks

[Dilyan Traykov]

Hello Jason,

What I can suggest to achieve such a layout would be to define a custom Header for the column, something like this, for example:

                    <telerik:GridViewDataColumn.Header>
                        <StackPanel>
                            <TextBlock Padding="5" Text="Last Name" />
                            <Border BorderThickness="0 1 0 0" BorderBrush="White" />
                            <TextBlock Padding="5" Text="Phone" />
                        </StackPanel>
                    </telerik:GridViewDataColumn.Header>

Then you can use a similar approach for defining the CellTemplate:

                    <telerik:GridViewDataColumn.CellTemplate>
                        <DataTemplate>
                            <StackPanel>
                                <TextBlock Padding="5" Text="{Binding LastName}" />
                                <Border BorderThickness="0 1 0 0" BorderBrush="Black" />
                                <TextBlock Padding="5" Text="{Binding Phone}" />
                            </StackPanel>
                        </DataTemplate>
                    </telerik:GridViewDataColumn.CellTemplate>

For your convenience, I've prepared a small sample project to demonstrate what I have in mind. Can you please have a look and let me know if a similar approach would work for you or if I have misunderstood your requirement in any way?

Regards,
Dilyan Traykov
Progress Telerik

[Jason]

Hello Dilyan,

 

This is great with two exceptions.  First, I noticed the filter only works with the first (top) header item.  Is it possible to add a filter option for each header item?  Second, I have yet to find a way to add margin (top and bottom) between each row.  Assuming these two items are achievable, I think this will be perfect for my needs.

 

Thank you!

[Dilyan Traykov]

Hello Jason,

To be able to filter on each property, the easier approach would be to introduce a new calculated property which is the concatenation of the properties, and set this as the FilterMemberPath. If this does not work for you, you would need to create a custom filtering control and tailor it to suit your requirement.

As for adding a margin between the rows, one way to do it would be by modifying the custom CellTemplate and adding the margin to the TextBlocks or StackPanel. Here's an example:

If this is not what you had in mind, can you please visually represent the desired result and I will gladly try to demonstrate how you can achieve it?

 

[Jason]

I've attached a redacted version of what is in use currently.  This is the most current evolution of an older WinForms app.  I am very familiar with the WinForms RadGridView, but I am not as much with the WPF version.  This is ideally how the grid rows should appear to the user.

With respect to the filtering, I will look into the options you have provided me.

 

Thanks

[Dilyan Traykov]

Hello Jason,

Thank you for the provided image.

To achieve a similar result, you can specify a Margin and a border for the GridViewRow element. For example:

        <!-- add BasedOn="{StaticResource GridViewRowStyle}" if you're using the NoXaml binaries -->
        <Style TargetType="telerik:GridViewRow">
            <Setter Property="Margin" Value="0 0 0 20" />
            <Setter Property="BorderBrush" Value="LightGray" />
            <Setter Property="BorderThickness" Value="2" />
        </Style>

For your convenience, I've updated the sample project to demonstrate this. Please let me know if a similar style allows you to achieve the expected result at your end.

[Jason]

That did the trick!  I will continue to play with filtering options accordingly, but I am all set here.  Thanks for your help, Dilyan!

 

-Jason