Virtual rows being disposed/reloaded on RadTabItem change?

1 Answer 25 Views
GridView TabControl
j
Top achievements
Rank 1
j asked on 11 Nov 2022, 05:47 PM

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.

1 Answer, 1 is accepted

Sort by
0
Martin Ivanov
Telerik team
answered on 16 Nov 2022, 11:37 AM

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

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

j
Top achievements
Rank 1
commented on 16 Nov 2022, 10:24 PM

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
Telerik team
commented on 18 Nov 2022, 08:18 AM

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
Top achievements
Rank 1
commented on 18 Nov 2022, 04:00 PM

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
Telerik team
commented on 23 Nov 2022, 08:05 AM

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
Top achievements
Rank 1
commented on 02 Dec 2022, 04:51 PM

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 ScrollViewerStackPanel 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
Top achievements
Rank 1
commented on 02 Dec 2022, 04:52 PM

Thank you for giving this attention Martin.
Martin Ivanov
Telerik team
commented on 05 Dec 2022, 10:28 AM

I am glad to hear that you managed to resolve the issue. And thank you for sharing your solution.
Tags
GridView TabControl
Asked by
j
Top achievements
Rank 1
Answers by
Martin Ivanov
Telerik team
Share this question
or