[Solved] Column width changes after scrolling

[Yuri]

Hi,

I've got a RadDataGrid with programmatically generated columns (each derived from DataGridTemplateColumn).
The columns have SizeMode = DataGridColumnSizeMode.Auto set for them.

I encounter 2 issues:

#1
When the grid is displayed, the visible rows contain only items of relatively small width (the rest of the rows, I presume, are virtualized).
But when I scroll down in the grid, the rows containing broader content start being rendered, and the width of all the columns is readjusted.
Functionally, there is nothing with this behaviour, but I think it's a bad UX.

My question is whether there is any way to have the column widths calculated in advance according to the widest content?
I don't foresee any significant amount of data being displayed, so I may consider giving up on virtualization altogether, if that's the price to be paid.


#2
The headers for these columns are also populated in code:
    StackPanel stackPanel = new StackPanel { Margin = new Thickness(3, 0, 3, 0), HorizontalAlignment = HorizontalAlignment.Stretch };
    TextBlock dateString = new TextBlock { Text = date.ToString("dd MMM yyyy"), HorizontalAlignment = HorizontalAlignment.Center, TextAlignment = TextAlignment.Center };
    stackPanel.Children.Add(dateString);
    TextBlock timeString = new TextBlock { Text = date.ToString("HH:mm"), HorizontalAlignment = HorizontalAlignment.Center, TextAlignment = TextAlignment.Center};
    stackPanel.Children.Add(timeString);
    dataColumn.Header = stackPanel;

The problem is that I get them always aligned to the left, whatever I try.
How can I get them centered?

Any advice on these 2 issues will be appreciated.

[Ivaylo Gergov]

Hello Yuri,

Thank you for contacting us.

Straight to your questions:

1. This behavior is expected by design because our RadDataGrid uses virtualization. Switching off the virtualization will cause significantly more memory usage and loading time. Therefore, we do not provide such an option. The only way to avoid resizing in this scenario is to have fixed width for the columns.
2. By default, the column headers in RadDataGrid have HorizontalContentAlignment="Left". In order to change this, you can use the DataGridTemplateColumn.HeaderStyle property and apply a style like this:
   
   Style headerStyle = new Style() { TargetType = typeof(DataGridColumnHeader) };

   headerStyle.Setters.Add(new Setter { Property = HorizontalContentAlignmentProperty , Value = HorizontalAlignment.Center });

   this.grid.Columns[0].HeaderStyle = headerStyle;

   


 
Let me know if this helps.

 

Regards,
Ivaylo Gergov
Telerik