Grid Clipping and slow loading

7 posts, 0 answers
  1. Dr.YSG
    Dr.YSG avatar
    210 posts
    Member since:
    Dec 2009

    Posted 13 Jan 2010 Link to this post

    The first grid in this usercontrol has only 5 rows and it fully displays and loads quickly.

    The second grid in this usercontrol has 440 rows (9 colums mostly text and doubles and one boolean) all coming from data binding in MVVM.

    It takes about 20 seconds to display (SL4 running on high end WinXP box), lots of memory. Dual Core.

    It also clips about about 21 rows.

    The usercontrol is inside of a RadPane which is in a dockable RadSplitGroup.

    <UserControl
                 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                 xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
                 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
                 mc:Ignorable="d"
                 xmlns:data="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data"
                 xmlns:t="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.GridView"
                 xmlns:blood="clr-namespace:BloodHound2"
                 x:Class="BloodHound2.GridView"
                 DataContext="{Binding DataLens, Source={StaticResource Locator}}"
                 >
        <StackPanel>
            <blood:ViewPanelControl/>
            <t:RadGridView
                x:Name="ClusterGrid"
                ItemsSource="{Binding ClusterData, Mode=OneWay}"
                AutoGenerateColumns="False"
                Visibility="{Binding ClusterDisplay, Converter={StaticResource Bool2Visible}, Mode=TwoWay}"
            >
               <t:RadGridView.Columns>
                   <t:GridViewDataColumn DataMemberBinding="{Binding ID}" Header="ID"/>
                   <t:GridViewDataColumn DataMemberBinding="{Binding Selected}" Header="Selected"/>
                   <t:GridViewDataColumn DataMemberBinding="{Binding Longitude}" Header="Longitude"/>
                   <t:GridViewDataColumn DataMemberBinding="{Binding Latitude}" Header="Latitude"/>       
                   <t:GridViewDataColumn DataMemberBinding="{Binding PassengersAvg}" Header="Passengers Avg"/>
                   <t:GridViewDataColumn DataMemberBinding="{Binding YearAvg}" Header="Year Avg"/>       
                   <t:GridViewDataColumn DataMemberBinding="{Binding DeathsAvg}" Header="Deaths Avg"/>
                   <t:GridViewDataColumn DataMemberBinding="{Binding VesselAvg}" Header="Vessel Avg"/>
                   </t:RadGridView.Columns>
            </t:RadGridView>
            <t:RadGridView
                x:Name="EventGrid"
                ItemsSource="{Binding EventData, Mode=OneWay}"
                AutoGenerateColumns="False"
                Visibility="{Binding EventDisplay, Converter={StaticResource Bool2Visible}, Mode=OneWay}" ScrollViewer.VerticalScrollBarVisibility="Visible"
            >
               <t:RadGridView.Columns>
                   <t:GridViewDataColumn DataMemberBinding="{Binding ID}" Header="ID"/>
                   <t:GridViewDataColumn DataMemberBinding="{Binding Selected}" Header="Selected"/>
                   <t:GridViewDataColumn DataMemberBinding="{Binding Count}" Header="Count"/>
                   <t:GridViewDataColumn DataMemberBinding="{Binding Longitude}" Header="Longitude"/>
                   <t:GridViewDataColumn DataMemberBinding="{Binding Latitude}" Header="Latitude"/>       
                   <t:GridViewDataColumn DataMemberBinding="{Binding Passengers}" Header="Passengers"/>
                   <t:GridViewDataColumn DataMemberBinding="{Binding Year}" Header="Year"/>       
                   <t:GridViewDataColumn DataMemberBinding="{Binding Deaths}" Header="Deaths"/>
                   <t:GridViewDataColumn DataMemberBinding="{Binding Vessel}" Header="Vessel"/>
                   </t:RadGridView.Columns>
            </t:RadGridView>
        </StackPanel>
    </UserControl>

  2. Vlad
    Admin
    Vlad avatar
    11100 posts

    Posted 14 Jan 2010 Link to this post

    Hello Dr.YSG,

    Grid inside StackPanel or ScrollViewer will be measured with infinity height and all rows will be created at once since there will be no rows virtualization.

    Greetings,
    Vlad
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  3. DevCraft banner
  4. Dr.YSG
    Dr.YSG avatar
    210 posts
    Member since:
    Dec 2009

    Posted 14 Jan 2010 Link to this post

    Thank you Vlad.

    Now I understand the problem. But is there a solution? I want a stretchable RadPane with a GridView inside of it. So what layout control should I use to get both virtualization and stretchablity? Not Stack. Not ScrollView...

    But the layout container should not be fixed width either, it should stretch both vertically and horizontally if the user wants the RadPane to be larger.


  5. Vlad
    Admin
    Vlad avatar
    11100 posts

    Posted 19 Jan 2010 Link to this post

    Hi Dr.YSG,

    You do not have to do anything special - you can check the attached project for reference.

    Greetings,
    Vlad
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  6. Dr.YSG
    Dr.YSG avatar
    210 posts
    Member since:
    Dec 2009

    Posted 19 Jan 2010 Link to this post

    Yes, I see that you can directly embed a GridView in a RadPane. But that was not my original question. I need to embed a UserControl into a RadPane that is composed of a StackPanel that has three sub-parts (another usercontrol, and two GridViews).

    If I cannot use a StackPanel, then what can I use?
  7. Vlad
    Admin
    Vlad avatar
    11100 posts

    Posted 19 Jan 2010 Link to this post

    Hi Dr.YSG,

    You can use Grid with desired RowDefinitions.

    Regards,
    Vlad
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  8. Dr.YSG
    Dr.YSG avatar
    210 posts
    Member since:
    Dec 2009

    Posted 19 Jan 2010 Link to this post

    Good. you gave me something that works, but I can only use Grid, (Star spacing) I can't use Gridlines.

    The reason I wanted the stackpanel to work, is that each of these sub-components, (user-control, GridView1, GridView2) have their visibility controlled by the ViewModel. They can appear or disappear. What is not used by one, will be used by the other. That is perfect for StackPanels.

    A Grid with Fixed RowDefinitions would not do this (it would reserve space).
    What I have found is that even with Auto RowDefinitions (as shown below) your MeasureOverride function is grabbing all the space and there is no virtualization or scrolling.

    It is only if I have a Grid with no row definitions (everything in the first row) and thus *-Rowdefition, that I get a virtualization to work.

    But this is a lot better than no virtualization and no scrolling. so thank you for your help.

    Here is what I tried with auto row definitions:

    <UserControl xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
                 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
                 xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
                 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
                 mc:Ignorable="d" 
                 xmlns:data="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data" 
                 xmlns:t="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.GridView" 
                 xmlns:blood="clr-namespace:BloodHound2" 
                 x:Class="BloodHound2.NewGridView" 
                 DataContext="{Binding DataLens, Source={StaticResource Locator}}" d:DesignWidth="824" d:DesignHeight="281"
        <Grid> 
            <Grid.RowDefinitions> 
                <RowDefinition Height="Auto" MinHeight="27"/> 
                <RowDefinition Height="Auto" MinHeight="00"/> 
                <RowDefinition Height="Auto" MinHeight="00"/> 
            </Grid.RowDefinitions> 
            <t:RadGridView x:Name="EventGrid" 
                           ItemsSource="{Binding EventData, Mode=OneWay}" 
                           AutoGenerateColumns="False" Grid.RowSpan="1" Grid.Row="2" 
                           Visibility="{Binding EventDisplay, Converter={StaticResource Bool2Visible}, Mode=OneWay}"
                <t:RadGridView.Columns> 
                    <t:GridViewDataColumn DataMemberBinding="{Binding ID}" 
                                          Header="ID" /> 
                    <t:GridViewDataColumn DataMemberBinding="{Binding Selected}" 
                                          Header="Selected" /> 
                    <t:GridViewDataColumn DataMemberBinding="{Binding Count}" 
                                          Header="Count" /> 
                    <t:GridViewDataColumn DataMemberBinding="{Binding Longitude}" 
                                          Header="Longitude" /> 
                    <t:GridViewDataColumn DataMemberBinding="{Binding Latitude}" 
                                          Header="Latitude" /> 
                    <t:GridViewDataColumn DataMemberBinding="{Binding Passengers}" 
                                          Header="Passengers" /> 
                    <t:GridViewDataColumn DataMemberBinding="{Binding Year}" 
                                          Header="Year" /> 
                    <t:GridViewDataColumn DataMemberBinding="{Binding Deaths}" 
                                          Header="Deaths" /> 
                    <t:GridViewDataColumn DataMemberBinding="{Binding Vessel}" 
                                          Header="Vessel" /> 
                </t:RadGridView.Columns> 
            </t:RadGridView> 
            <t:RadGridView x:Name="ClusterGrid" 
                           ItemsSource="{Binding ClusterData, Mode=OneWay}" 
                           AutoGenerateColumns="False" Grid.RowSpan="1" Grid.Row="1" 
                           Visibility="{Binding ClusterDisplay, Converter={StaticResource Bool2Visible}, Mode=TwoWay}"
                <t:RadGridView.Columns> 
                    <t:GridViewDataColumn DataMemberBinding="{Binding ID}" 
                                          Header="ID" /> 
                    <t:GridViewDataColumn DataMemberBinding="{Binding Selected}" 
                                          Header="Selected" /> 
                    <t:GridViewDataColumn DataMemberBinding="{Binding Longitude}" 
                                          Header="Longitude" /> 
                    <t:GridViewDataColumn DataMemberBinding="{Binding Latitude}" 
                                          Header="Latitude" /> 
                    <t:GridViewDataColumn DataMemberBinding="{Binding Count}" 
                                          Header="Count" /> 
                    <t:GridViewDataColumn DataMemberBinding="{Binding PassengersWeight}" 
                                          Header="PassengersWeight" /> 
                    <t:GridViewDataColumn DataMemberBinding="{Binding LocWeight}" 
                                          Header="LocWeight" /> 
                    <t:GridViewDataColumn DataMemberBinding="{Binding PassengersWeight}" 
                                          Header="PassengersWeight" /> 
                    <t:GridViewDataColumn DataMemberBinding="{Binding YearWeight}" 
                                          Header="YearWeight" /> 
                    <t:GridViewDataColumn DataMemberBinding="{Binding DeathsWeight}" 
                                          Header="DeathsWeight" /> 
                    <t:GridViewDataColumn DataMemberBinding="{Binding VesselWeight}" 
                                          Header="VesselWeight" /> 
                </t:RadGridView.Columns> 
            </t:RadGridView> 
            <blood:ViewPanelControl Grid.RowSpan="1" /> 
        </Grid> 
    </UserControl> 

Back to Top
DevCraft banner