alternatives to GridView with many small columns

3 posts, 0 answers
  1. Ron
    Ron avatar
    2 posts
    Member since:
    Nov 2011

    Posted 06 Dec 2011 Link to this post

    Hello all,

    I am currently investigating what software to use for our application and the Telerik Gridview/toolset looks very promising, but I do have one major issue: performance. The drawing of so many columns is terribly slow. See the files below which contain a dummy setup (the columns don't really denote the same info ;-) which show the (especially horizontal) scrolling to be too slow. (In real life the columns are of course generated dynamically). I browsed the internet and it seems to be a common problem. In worst case there will be over 4000 columns in a row, but that is not a problem with the column virtualization. Another problem then is the header grouping (with one frozen column), but that is another issue and I can work around that problem.

    I know there is an option/behaviour to delay the redraw of the columns after the scroll action, but the redraw itself is too slow for our application. After profiling I found one of the bottlenecks (MeasureOverride), but I am unsure that that is the actual reason.

    We have tried it with the Silverlight and WPF Telerik controls and both show a slowdown in the horizontal (and vertical) scroll.
    Is there any way to speed things up/do things differently so:
    - we have that much data (or even more) on screen
    - we are able to edit every cell

    On another note, we don't really understand why the Wpf solution is so slow, as drawing about 10000 objects on screen should not be that much of a problem for current computers. I can imagine with Silverlight, because that is software rendering, and I guess Wpf is software rendering as well.

    Don't get me wrong: We really like the Telerik controls and would love to use them in our production code. However, this functionality is essential to our application and we would have to look for alternatives if similar functionality would not be possible.

    Best regards,
    Ron Klomp-Kempkens
    Advitrae Group B.V.

    Xaml file:
                     xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
                     x:Class="SilverlightFO.TestGridSpeed2"
                     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:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
                     d:DesignWidth="640" d:DesignHeight="480"
                     Title="TestGridSpeed Page">
        <Grid x:Name="LayoutRoot">
            <telerik:RadGridView Name="mainGrid" EnableColumnVirtualization="True" EnableRowVirtualization="True" AutoGenerateColumns="False">
                <telerik:RadGridView.Columns>
                    <telerik:GridViewDataColumn DataMemberBinding="{Binding Code1}" Width="200" />
                    <telerik:GridViewDataColumn DataMemberBinding="{Binding Code1}" Width="200" />
                    <telerik:GridViewDataColumn DataMemberBinding="{Binding Code1}" Width="200" />
                    <telerik:GridViewDataColumn DataMemberBinding="{Binding Code1}" Width="200" />
                    <telerik:GridViewDataColumn DataMemberBinding="{Binding T1}" Width="30" />
                    <telerik:GridViewDataColumn DataMemberBinding="{Binding T1}" Width="30" />
                    <telerik:GridViewDataColumn DataMemberBinding="{Binding T1}" Width="30" />
                    <telerik:GridViewDataColumn DataMemberBinding="{Binding T1}" Width="30" />
                    <telerik:GridViewDataColumn DataMemberBinding="{Binding T1}" Width="30" />
                    <telerik:GridViewDataColumn DataMemberBinding="{Binding T1}" Width="30" />
                    <telerik:GridViewDataColumn DataMemberBinding="{Binding T1}" Width="30" />
                    <telerik:GridViewDataColumn DataMemberBinding="{Binding T1}" Width="30" />
                    <telerik:GridViewDataColumn DataMemberBinding="{Binding T1}" Width="30" />
                    <telerik:GridViewDataColumn DataMemberBinding="{Binding T1}" Width="30" />
                    <telerik:GridViewDataColumn DataMemberBinding="{Binding T1}" Width="30" />
                    <telerik:GridViewDataColumn DataMemberBinding="{Binding T1}" Width="30" />
                    <telerik:GridViewDataColumn DataMemberBinding="{Binding T1}" Width="30" />
                    <telerik:GridViewDataColumn DataMemberBinding="{Binding T1}" Width="30" />
                    <telerik:GridViewDataColumn DataMemberBinding="{Binding T1}" Width="30" />
                    <telerik:GridViewDataColumn DataMemberBinding="{Binding T1}" Width="30" />
                    <telerik:GridViewDataColumn DataMemberBinding="{Binding T1}" Width="30" />
                    <telerik:GridViewDataColumn DataMemberBinding="{Binding T1}" Width="30" />
                    <telerik:GridViewDataColumn DataMemberBinding="{Binding T1}" Width="30" />
                    <telerik:GridViewDataColumn DataMemberBinding="{Binding T1}" Width="30" />
                    <telerik:GridViewDataColumn DataMemberBinding="{Binding T1}" Width="30" />
                    <telerik:GridViewDataColumn DataMemberBinding="{Binding T1}" Width="30" />
                    <telerik:GridViewDataColumn DataMemberBinding="{Binding T1}" Width="30" />
                    <telerik:GridViewDataColumn DataMemberBinding="{Binding T1}" Width="30" />
                    <telerik:GridViewDataColumn DataMemberBinding="{Binding T1}" Width="30" />
                    <telerik:GridViewDataColumn DataMemberBinding="{Binding T1}" Width="30" />
                    <telerik:GridViewDataColumn DataMemberBinding="{Binding T1}" Width="30" />
                    <telerik:GridViewDataColumn DataMemberBinding="{Binding T1}" Width="30" />
                    <telerik:GridViewDataColumn DataMemberBinding="{Binding T1}" Width="30" />
                    <telerik:GridViewDataColumn DataMemberBinding="{Binding T1}" Width="30" />
                    <telerik:GridViewDataColumn DataMemberBinding="{Binding T1}" Width="30" />
                    <telerik:GridViewDataColumn DataMemberBinding="{Binding T1}" Width="30" />
                    <telerik:GridViewDataColumn DataMemberBinding="{Binding T1}" Width="30" />
                    <telerik:GridViewDataColumn DataMemberBinding="{Binding T1}" Width="30" />
                    <telerik:GridViewDataColumn DataMemberBinding="{Binding T1}" Width="30" />
                    <telerik:GridViewDataColumn DataMemberBinding="{Binding T1}" Width="30" />
                    <telerik:GridViewDataColumn DataMemberBinding="{Binding T1}" Width="30" />
                    <telerik:GridViewDataColumn DataMemberBinding="{Binding T1}" Width="30" />
                    <telerik:GridViewDataColumn DataMemberBinding="{Binding T1}" Width="30" />
                    <telerik:GridViewDataColumn DataMemberBinding="{Binding T1}" Width="30" />
                    <telerik:GridViewDataColumn DataMemberBinding="{Binding T1}" Width="30" />
                    <telerik:GridViewDataColumn DataMemberBinding="{Binding T1}" Width="30" />
                    <telerik:GridViewDataColumn DataMemberBinding="{Binding T1}" Width="30" />
                    <telerik:GridViewDataColumn DataMemberBinding="{Binding T1}" Width="30" />
                    <telerik:GridViewDataColumn DataMemberBinding="{Binding T1}" Width="30" />
                    <telerik:GridViewDataColumn DataMemberBinding="{Binding T1}" Width="30" />
                    <telerik:GridViewDataColumn DataMemberBinding="{Binding T1}" Width="30" />
                    <telerik:GridViewDataColumn DataMemberBinding="{Binding T1}" Width="30" />
                    <telerik:GridViewDataColumn DataMemberBinding="{Binding T1}" Width="30" />
                    <telerik:GridViewDataColumn DataMemberBinding="{Binding T1}" Width="30" />
                    <telerik:GridViewDataColumn DataMemberBinding="{Binding T1}" Width="30" />
                    <telerik:GridViewDataColumn DataMemberBinding="{Binding T1}" Width="30" />
                    <telerik:GridViewDataColumn DataMemberBinding="{Binding T1}" Width="30" />
                    <telerik:GridViewDataColumn DataMemberBinding="{Binding T1}" Width="30" />
                    <telerik:GridViewDataColumn DataMemberBinding="{Binding T1}" Width="30" />
                    <telerik:GridViewDataColumn DataMemberBinding="{Binding T1}" Width="30" />
                    <telerik:GridViewDataColumn DataMemberBinding="{Binding T1}" Width="30" />
                    <telerik:GridViewDataColumn DataMemberBinding="{Binding T1}" Width="30" />
                    <telerik:GridViewDataColumn DataMemberBinding="{Binding T1}" Width="30" />
                    <telerik:GridViewDataColumn DataMemberBinding="{Binding T1}" Width="30" />
                    <telerik:GridViewDataColumn DataMemberBinding="{Binding T1}" Width="30" />
                    <telerik:GridViewDataColumn DataMemberBinding="{Binding T1}" Width="30" />
                    <telerik:GridViewDataColumn DataMemberBinding="{Binding T1}" Width="30" />
                    <telerik:GridViewDataColumn DataMemberBinding="{Binding T1}" Width="30" />
                    <telerik:GridViewDataColumn DataMemberBinding="{Binding T1}" Width="30" />
                    <telerik:GridViewDataColumn DataMemberBinding="{Binding T1}" Width="30" />
                    <telerik:GridViewDataColumn DataMemberBinding="{Binding T1}" Width="30" />
                    <telerik:GridViewDataColumn DataMemberBinding="{Binding T1}" Width="30" />
                    <telerik:GridViewDataColumn DataMemberBinding="{Binding T1}" Width="30" />
                    <telerik:GridViewDataColumn DataMemberBinding="{Binding T1}" Width="30" />
                    <telerik:GridViewDataColumn DataMemberBinding="{Binding T1}" Width="30" />
                    <telerik:GridViewDataColumn DataMemberBinding="{Binding T1}" Width="30" />
                    <telerik:GridViewDataColumn DataMemberBinding="{Binding T1}" Width="30" />
                    <telerik:GridViewDataColumn DataMemberBinding="{Binding T1}" Width="30" />
                    <telerik:GridViewDataColumn DataMemberBinding="{Binding T1}" Width="30" />
                    <telerik:GridViewDataColumn DataMemberBinding="{Binding T1}" Width="30" />
                    <telerik:GridViewDataColumn DataMemberBinding="{Binding T1}" Width="30" />
                    <telerik:GridViewDataColumn DataMemberBinding="{Binding T1}" Width="30" />
                    <telerik:GridViewDataColumn DataMemberBinding="{Binding T1}" Width="30" />
                    <telerik:GridViewDataColumn DataMemberBinding="{Binding T1}" Width="30" />
                    <telerik:GridViewDataColumn DataMemberBinding="{Binding T1}" Width="30" />
                    <telerik:GridViewDataColumn DataMemberBinding="{Binding T1}" Width="30" />
                    <telerik:GridViewDataColumn DataMemberBinding="{Binding T1}" Width="30" />
                    <telerik:GridViewDataColumn DataMemberBinding="{Binding T1}" Width="30" />
                    <telerik:GridViewDataColumn DataMemberBinding="{Binding T1}" Width="30" />
                    <telerik:GridViewDataColumn DataMemberBinding="{Binding T1}" Width="30" />
                    <telerik:GridViewDataColumn DataMemberBinding="{Binding T1}" Width="30" />
                    <telerik:GridViewDataColumn DataMemberBinding="{Binding T1}" Width="30" />
                    <telerik:GridViewDataColumn DataMemberBinding="{Binding T1}" Width="30" />
                    <telerik:GridViewDataColumn DataMemberBinding="{Binding T1}" Width="30" />
                    <telerik:GridViewDataColumn DataMemberBinding="{Binding T1}" Width="30" />
                    <telerik:GridViewDataColumn DataMemberBinding="{Binding T1}" Width="30" />
                    <telerik:GridViewDataColumn DataMemberBinding="{Binding T1}" Width="30" />
                    <telerik:GridViewDataColumn DataMemberBinding="{Binding T1}" Width="30" />
                    <telerik:GridViewDataColumn DataMemberBinding="{Binding T1}" Width="30" />
                    <telerik:GridViewDataColumn DataMemberBinding="{Binding T1}" Width="30" />
                    <telerik:GridViewDataColumn DataMemberBinding="{Binding T1}" Width="30" />
                    <telerik:GridViewDataColumn DataMemberBinding="{Binding T1}" Width="30" />
                    <telerik:GridViewDataColumn DataMemberBinding="{Binding T1}" Width="30" />
                    <telerik:GridViewDataColumn DataMemberBinding="{Binding T1}" Width="30" />
                </telerik:RadGridView.Columns>
            </telerik:RadGridView>
        </Grid>
    </navigation:Page>

    Code behind:
    namespace SilverlightFO
    {
        public class SomeObject
        {
            public string Code1 { get; set; }
            public int T1 { get; set; }
        }
        public partial class TestGridSpeed2 : Page
        {
            public TestGridSpeed2()
            {
                InitializeComponent();
                List<SomeObject> items = new List<SomeObject>();
                for (int i = 0; i < 1500; i++)
                {
                    items.Add(new SomeObject { Code1 = i.ToString(), T1 = i });
                }
                mainGrid.ItemsSource = items;
            }
        }
    }
  2. Vlad
    Admin
    Vlad avatar
    11100 posts

    Posted 08 Dec 2011 Link to this post

    Hi,

    You can check this demo for more info about how the grid will handle 1 mil. records with 1000 columns - I'm afraid however that currently this is best we can offer you.

    Maybe you should consider a bit less columns for your scenario since with 4000 columns this grid will be completely unreadable for your users. 

    Regards,
    Vlad
    the Telerik team

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

  3. Ron
    Ron avatar
    2 posts
    Member since:
    Nov 2011

    Posted 09 Dec 2011 Link to this post

    Hello Vlad,

    Thanks for the reply. I know of the demo and the GridView works great when only 12 columns are visible. However, for our application the range of 100 columns visible is more likely. (And it is indeed not the amount of columns which is the problem, it is the amount of columns visible)

    As an analogy, many cells will represent a 1/2 hour time slot in a week, where we would like to edit every 1/2 hour individually and in one overview (of 2 screens wide). And this for many people in the list. A ScheduleView will not suffice, as other columns in the GridView will denote different information (such as name and such (also combobox like fields)).

    I am trying to think of other data representations to make this happen, but all so far resulted in an even more confusing view.

    So, for now I am stuck with the "draw 150 columns in one view" design.

    Best regards,
    Ron
Back to Top