Virtual rows being disposed/reloaded on RadTabItem change?

[j]

I am using RadTabItem s. One of them has a RadGridView. EnableRowVirtualization on the grid is set to true as it is by default.

When you change to another tab then change back to the tab with this grid, it is very slow. I am testing with about 2,000 rows. I set EnableRowVirtualization to false and loading and clearing the grid is a little slower, but it's quicker to switch back into the tab with the grid.

It seems to me that switching in and out of this tab when row virtualization is enabled, the grid is disposing and reloading the rows. Loading and clearing the grid with virtualization enabled is faster, but changing tabs is significantly slower than when it's disabled.

I have looked through all the attributes of RadGridView and tried setting a few of them with no luck.

I am trying to figure out if there is some setting/attribute for the RadGridView or RadTabItem I can configure to have tabbing as quick and it is when row virtualization is disabled.

[Martin Ivanov]

Hello J,

The RadTabControl will reload the content area each time you change the selected tab. To avoid this behavior and keep the tab contents if it was previously selected, then you can set the IsContentPreserved property of RadTabControl to True. I hope that helps.

<telerik:RadTabControl IsContentPreserved="True" />

Regards,
Martin Ivanov
Progress Telerik

[j]

Martin,

Thank you for your comment.

It sounds like this is exactly what I need, however I tried this and it doesn't seem to change anything. Is it because the grid is a few layers down within the tab? Or could it be because each of my tabs has it's own xaml file and binding?

[Martin Ivanov]

Without seeing your setup I cannot tell what is happening. This said, can you send over some xaml showing your layouts in the tabs? Or even better a project demonstrating the issue?

[j]

The tab setup xaml

<UserControl>
...
<Grid>
...
		<ScrollViewer
			HorizontalScrollBarVisibility="Auto"
			VerticalScrollBarVisibility="Disabled"
			Grid.Row="1"
			Grid.Column="2">
			<telerik:RadTabControl
				TabStripPlacement="Bottom"
				MaxWidth="500"
				IsContentPreserved="True">
				<telerik:RadTabItem ... >

				<telerik:RadTabItem>
					<telerik:RadTabItem.Header>
						<TextBlock
							Text="Results" />
					</telerik:RadTabItem.Header>
					<telerik:RadTabItem.Content>
						<local:ResultsView
							Margin="5"
							DataContext="{Binding InspViewModel.ResultsViewModel}" />
					</telerik:RadTabItem.Content>
				</telerik:RadTabItem>

				<telerik:RadTabItem ... >

			</telerik:RadTabControl>
		</ScrollViewer>
...
</Grid>
</UserControl>

 

 

 

The tab xaml

<UserControl>
...
<Grid>
...
<Grid>
...
<Grid>

				<telerik:RadGridView
					Grid.Row="5"
					Margin="0,0,0,0"
					RowHeight="30"
					MinWidth="410"
					CanUserDeleteRows="False"
					CanUserReorderColumns="False"
					CanUserSortColumns="True"
					CanUserSortGroups="False"
					CanUserSelect="False"
					IsReadOnly="True"
					AutoGenerateColumns="False"
					ShowGroupPanel="False"
					IsFilteringAllowed="False"
					RowIndicatorVisibility="Collapsed"
					EnableRowVirtualization="True"
					EnableColumnVirtualization="True"
					EnableColumnGroupsVirtualization="True"
					SelectionUnit="FullRow"
					SelectionMode="Single"
					AlternationCount="2"
					ScrollViewer.HorizontalScrollBarVisibility="Auto"
					ScrollViewer.VerticalScrollBarVisibility="Auto"
					ItemsSource="{Binding ResultData}">
					<telerik:RadGridView.Columns>
						<telerik:GridViewDataColumn
							DataMemberBinding="{Binding DisplayValue, StringFormat=N4}"
							Header="Value"
							Width="Auto"
							TextAlignment="Left" />
						<telerik:GridViewDataColumn
							Header="Result"
							Width="Auto"
							TextAlignment="Left">
							<telerik:GridViewDataColumn.CellTemplate>
								<DataTemplate>
									<TextBlock
										HorizontalAlignment="Stretch"
										VerticalAlignment="Stretch"
										Text="{Binding Status}">
										<TextBlock.Style>
											<Style
												TargetType="TextBlock">
												<Style.Triggers>
													<DataTrigger
														Binding="{Binding Status}"
														Value="{x:Static interface:InspStatus.P}">
														<Setter
															Property="Background"
															Value="DarkGreen" />
													</DataTrigger>
													<DataTrigger
														Binding="{Binding Status}"
														Value="{x:Static interface:InspStatus.F}">
														<Setter
															Property="Background"
															Value="DarkRed" />
													</DataTrigger>
													<DataTrigger
														Binding="{Binding Status}"
														Value="{x:Static interface:InspStatus.M}">
														<Setter
															Property="Background"
															Value="Yellow" />
														<Setter
															Property="Foreground"
															Value="Black" />
													</DataTrigger>
													<DataTrigger
														Binding="{Binding Status}"
														Value="{x:Static interface:InspStatus.N}">
														<Setter
															Property="Background"
															Value="Gray" />
													</DataTrigger>
												</Style.Triggers>
											</Style>
										</TextBlock.Style>
									</TextBlock>
								</DataTemplate>
							</telerik:GridViewDataColumn.CellTemplate>
						</telerik:GridViewDataColumn>
						<telerik:GridViewDataColumn
							x:Name="DateColumn"
							DataMemberBinding="{Binding Time}"
							Header="DateRun"
							Width="Auto"
							TextAlignment="Left" />
						<telerik:GridViewDataColumn
							DataMemberBinding="{Binding CName}"
							Header="C"
							Width="Auto"
							TextAlignment="Left" />
					</telerik:RadGridView.Columns>
				</telerik:RadGridView>

</Grid>
</Grid>
</Grid>
</UserControl>

 

[Martin Ivanov]

Thank you for the code snippets. I've used them to assemble a runnable project, but I couldn't recreate the issue. Feel free to modify the attached project in order to reproduce the slow performance, and attach it here.

Also, you can take a peek at the Performance Tips and Tricks article from the RadGridView help documentation.

[j]

I was able to fix this problem! The Tips and Tricks you shared second point:

 

• Placing RadGridView in panels/controls which measure it with infinity disables the UI virtualization mechanism of the control and can greatly impact performance when dealing with large amounts of data. Examples of such panels include ScrollViewer, StackPanel and Grid with a definition with Width/Height set to Auto.

 

was what helped me. My RadGridView is within a ScrollViewer. I set RadGridView MaxHeight="1000" and now there is no long delay when changing back to the tab when there is lots of data in RadGridView.

[j]

Thank you for giving this attention Martin.

[Martin Ivanov]

I am glad to hear that you managed to resolve the issue. And thank you for sharing your solution.