Column Width synchronization between two GrdiView's

[sergito]

Hello,

My scenario:

I have two grids and splitter between them.

First grid (at the top) has varied count of rows - depends on inserted entries (rows) by user.
Second grid (at the bottom) is responsible for display summary in reference to the first grid.
I can't do this in First grid footer because I have 6 rows with summary in second grid (always 6 rows).

First grid and second grid has the same columns with the same UniqueNames.

I need synchronize width of thes columns in two grids.
for ex. If first column of the first grid has content which expands this column to ActualWidth = 77, first column from the second grid should has also the same width even if content is smaller then in the first column of the first grid. 

And vice versa:

case 1:

First column in first grid has content which expands this column to ActualWidth = 77
First column in second grid has content which expands this column to ActualWidth = 66

Expected: First column in second grid should expands to the same Width like in first column in first grid.

case 2:

First column in first grid has content which expands this column to ActualWidth = 55
First column in second grid has content which expands this column to ActualWidth = 88

Expected: First column in first grid should expands to the same Width like in first column in second grid.

Above these two grids I have DataPicker which allows me to change range of data and Button which is responsible for loading new data to these grids.

I tried to handle with this using GridView.DataLoaded event but unfortunatelly I think that refreshing layout of columns going happen after this event so I can't find a good place where I can intercept info about "the real display width" of every column in these grids.

[Yoan]

Hi,

The closest solution that meets your requirements is to bind the Column's Width property to a property in your ViewModel. Please check the attached project for a reference.

You can find this forum thread helpful as well.


Regards,
Yoan
the Telerik team

[sergito]

Thank you,

Works great :)

I have resolved this issue attaching to SizeChanged event in column headers and it is work but your solution imho is better.

I can't resize my columns by mouse. They have IsResizable = false so theirs width resizes only in reference to content.
Using your solution or my solution, width only grows. 
Is there a way to shirnk column width ?

For example:

Content in first column of first grid gives me width = 100 px.
Content in first column of second grid gives me width = 60 px but using your solution this column resizes to width = 100 px. OK :)

After reload data:

Content in first column of first grid gives me width = 75 px but earlier this column has width = 100 px so width is still the same (100 px)
Content in first column of second grid gives me width = 60 px but using your solution this column resizes to width = 100 px. OK :)

Base on content in these columns (no matter in which grid) I can shrink column to width = 75 px, but I can't because before reloading data they have width = 100.
How I can shrink them ?

Regards,
Lukas Szumylo

[Yoan]

Hi Lukas,

I have modified the sample project in order to meet your requirements. Please give it a try and let me know if it fits in your scenario.

All the best,
Yoan
the Telerik team