Adjust GridViewRow height when row is created

[Lorenz]

Hi,

I have a special need where I have 2 gridViews side by side. They have their own data source, but always the same number of rows.
I have to adjust the height for each row, and take the vale of the ighest row.

This is needed to ensure that vertical scrolling is always synchronized.

I tried to work with the RowLoaded event, but a this point, the Height is always "NaN" and ActualHeight is always 0.0.

Do you have an idea how I can perform this? Maybe in another event ?

Thanks,
Ben

[Boris]

Hello Benoit,

The easiest way to set the height for each row, is to use the RowHeight property of RadGridView on both of your grids. 

I attached a sample project that demonstrates how you can set the RowHeight property and scroll two GridViews simultaneously. For more information about the scrolling you check Scrolling two grids forum thread.


Please examine it and let us know how it goes.

Regards,
Boris Penev
Telerik

 

 

[Lorenz]

Hi Boris,

Thank you for your answer.

I think we didn't understand each other. My question was not about scrolling synchronization (that is something which we were able to handle) but reallyabout row height synchronization.
Please see image for more information:
- the two GridViews always have the same number of rows, but the data might be different
- In the example image, for row #8, you can see that the "comment" is over two lines in the left grid when it is over only one line in  the right grid

What we want to do: Adjust the row #8 height so the rows have the same height in both left and right grids.
This should ensure that the rows are always "inline"

I have some ideas to achieve this, but unfortunately, whether it is in ScrollViewer Loaded event or GridView RowLoaded event, the property Height is always "NaN" and the ActualHeight is always 0.0.
Is this the normal behavior? Is there an event in which these properties are available?

Currently my workaround is to retrieve the content element of the row (based only on TextBlocks) and calculate the supposed height using FormattedText control. But this is probably not very safe.

Thanks & Kind regards,
Benoît

 

[Boris]

Hello Benoît,

For the time being there isn't any built-in way to specify each GridViewRow's height.

When the RowLoaded event is triggered initially for all the items in the ItemsSource collection of RadGridView, the actual rows still do not exist in the viewport. That is why the Height and ActualHeight properties of the GridViewRow have these values. In addition the GridView is virtualized by default, which  complicates things because the containers for the rows in the viewport are reused. Turning off the virtualization when you have a lot of items in the ItemsSource in the GridView will lead to degraded performance. However, if you have a small amount of items, then you can to use the Loaded event to update the Height for each row in your second grid. Please keep in mind that this approach will not work when the GridView is virtualized.

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();

        this.clubsGrid.Loaded += clubsGrid_Loaded;
    }

    private void clubsGrid_Loaded(object sender, RoutedEventArgs e)
    {
        ChangeRowSize();
    }

    private void ChangeRowSize()
    {
        var firstGrid = this.clubsGrid as RadGridView;
        var secondGrid = this.clubsGrid2 as RadGridView;

        foreach (var item in firstGrid.ItemsSource as ObservableCollection<Club>)
        {
            var containerFirstGrid = firstGrid.ItemContainerGenerator.ContainerFromIndex(item.RowNumber) as GridViewRow;
            var containerSecondGrid = secondGrid.ItemContainerGenerator.ContainerFromIndex(item.RowNumber) as GridViewRow;

            if (containerFirstGrid != null && containerSecondGrid != null)
            {
                if (containerFirstGrid.ActualHeight != containerSecondGrid.ActualHeight)
                {
                    containerSecondGrid.Height = containerFirstGrid.ActualHeight;
                }
            }
        }
    }
}

To learn how to turn off the virtualization, you can check the UI Virtualization article.

I hope this helps.

Regards,
Boris
Telerik