How to improve the GridView's load times

[TSRG - IT]

Hi guys,

I have a user control which contains a RadPanelBar with 5 RadPanelBarItems and within each item is a grid (total 5 grids). The issue I am having is that that the grids take around 3-4 seconds to render. Each grid consists of about 10 rows, 16-17 columns, 1-2 groupings. The RadPanelItems are set to expanded by default. Each grid has a row loaded event handler attached and data is bound in XAML via CollectionViewSource objects. I've checked out the degraded performance section in the help file so I tried setting the Grid's Rows, RadPanelBar, RadPanelBarItems and GridView to fixed sizes. I'm binding to an ObservableCollection of BindingLists so not sure if this affects performance. Not using converters, cell templates or alternate row style.

I've used JetBrains dotTrace performance to determine which functions are taking the longest to load. I've managed to narrow it down to the MeasureOverride function from the GridViewCellsPanel class, specifically it goes down to the GenerateAndMeasureChildrenForRealizedColumns() -> GenerateChildren() functions. My question is that is there anyway I can do to reduce the load times of these grids? This app supercedes our old app which was written in C# WinForms, however loads instantaneously. I've attached a screenshot of my grids setup (the rest of the grids require me to scroll down the view).

Cheers,

Tim.

[Vlad]

Hi,

 As far as I can see from the screenshot all grids are measured with infinity - no vertical scrollbar. Please specify height for the grids or panel items. 

Kind regards,
Vlad
the Telerik team

[TSRG - IT]

Hi Vlad,

Thank you for your reply. What I am trying to do now is set the RadGridView's ColumnWidth="*" to get an even distribution of column widths, however when contained within the RadPanelBarItem the width stretches more than the width of the screen. I also found this thread from 2009 which says that there was a bug with the RadPanelBarItem measuring with infinite width: http://www.telerik.com/community/forums/wpf/panelbar/radpanelbaritem-content-width.aspx just not sure if this was related?

Is it possible to have even column widths without fixed RadPanelBarItem widths given that our users have varying screen sizes?

Cheers,

Tim.

[Petar Mladenov]

Hi Timothy Lin,

Instead of setting a fixed width of the RadPanleBarItem, you can bind its MaxWidth to the ActualWidth of the RadPanelBar like so :

<telerik:RadPanelBar x:Name="Panelbar">
            <telerik:RadPanelBarItem Header="BAR ITEM 1" MaxWidth="{Binding ActualWidth, ElementName=Panelbar}">

                <telerik:RadGridView x:Name="GridView" ColumnWidth="*" >
                    <telerik:RadGridView.Columns>
                        <telerik:GridViewDataColumn Header="AAAAAAAAAAAA" />
                        <telerik:GridViewDataColumn Header="BBBBBBBBB" />
                        <telerik:GridViewDataColumn Header="CCCCCC" />
                        <telerik:GridViewDataColumn Header="DDD" />
                    </telerik:RadGridView.Columns>

                </telerik:RadGridView>
            </telerik:RadPanelBarItem>
        </telerik:RadPanelBar>

Hope this helps you and fits in your scenario. If it doesn`t , feel free to ask and we will assist you further.

All the best,
Petar Mladenov
the Telerik team

[Suhas]

Hi Petar,

I had the same issue with placing the RadGridview in Radpanelitembar. If i set the Height to RadGridview, UI is not Freezing but i don't want that to be harcoded in Xaml. Do you have any other way of setting the Height?

Code is here:

<telerik:RadPanelBar x:Name="Panelbar">
<telerik:RadPanelBarItem  VerticalAlignment="Stretch" HorizontalAlignment="Stretch" IsExpanded="True" >


                                <telerik:RadGridView x:Name="Docdyngrid"  IsReadOnly="True" Height="300" EnableRowVirtualization="True"   EnableColumnVirtualization="True"  ShowColumnFooters="True" SelectionUnit="FullRow" SelectionMode="Extended" AutoGenerateColumns="False" ItemsSource="{Binding CrossResultsTagDocCollection}" Margin="0,5,0,0">
                                    <telerik:RadGridView.Columns>
                                        <!--<telerik:GridViewSelectColumn Width="25" >
                                        </telerik:GridViewSelectColumn>-->
                                        <telerik:GridViewDataColumn DataMemberBinding="{Binding Name}" Header="{ui:SPEResources Id=Link_Name}">
                                            <telerik:GridViewDataColumn.AggregateFunctions>
                                                <telerik:CountFunction Caption="{ui:SPEResources Id=Total_Objects}"   />
                                            </telerik:GridViewDataColumn.AggregateFunctions>
                                        </telerik:GridViewDataColumn>
                                        <telerik:GridViewDataColumn DataMemberBinding="{Binding Description}" Header="{ui:SPEResources Id=Link_Description}"/>
                                        <telerik:GridViewDataColumn DataMemberBinding="{Binding ClassDefinitionUID}" Header="{ui:SPEResources Id=Link_Class}"/>
                                        <telerik:GridViewDataColumn DataMemberBinding="{Binding Classification}" Header="{ui:SPEResources Id=Link_Classification}"/>
                                    </telerik:RadGridView.Columns>
                                </telerik:RadGridView>



                </telerik:RadPanelBarItem>
                <telerik:RadPanelBarItem  VerticalAlignment="Stretch" HorizontalAlignment="Stretch" IsExpanded="True" >


                                <telerik:RadGridView x:Name="TagDyn" IsReadOnly="True" Height="300" EnableRowVirtualization="True"   EnableColumnVirtualization="True" ShowColumnFooters="True" SelectionUnit="FullRow" SelectionMode="Extended" AutoGenerateColumns="False" ItemsSource="{Binding CrossResultsTagDocCollection}" Margin="0,5,0,0">
                                    <telerik:RadGridView.Columns>
                                        <!--<telerik:GridViewSelectColumn Width="25" >
                                        </telerik:GridViewSelectColumn>-->
                                        <telerik:GridViewDataColumn DataMemberBinding="{Binding Name}" Header="{ui:SPEResources Id=Link_Name}">
                                            <telerik:GridViewDataColumn.AggregateFunctions>
                                                <telerik:CountFunction Caption="{ui:SPEResources Id=Total_Objects}"   />
                                            </telerik:GridViewDataColumn.AggregateFunctions>
                                        </telerik:GridViewDataColumn>
                                        <telerik:GridViewDataColumn DataMemberBinding="{Binding Description}" Header="{ui:SPEResources Id=Link_Description}"/>
                                        <telerik:GridViewDataColumn DataMemberBinding="{Binding ClassDefinitionUID}" Header="{ui:SPEResources Id=Link_Class}"/>
                                        <telerik:GridViewDataColumn DataMemberBinding="{Binding Classification}" Header="{ui:SPEResources Id=Link_Classification}"/>
                                    </telerik:RadGridView.Columns>
                                </telerik:RadGridView>



                </telerik:RadPanelBarItem>
                </telerik:RadPanelBar>

In above code i hard coded the height=300 for RadGridview, But this is getting under the the Outer control on some resoultions and making scrolling impossible.I attached the image for reference.

 ​

 

 

[Dimitrina]

Hello,

You can apply a Style targeting RadGridView control and set a Height that way. You can also refer to the common topic about Setting a Theme (Using Implicit Styles).

Regards,
Dimitrina
Telerik