This is a migrated thread and some comments may be shown as answers.

RadGridView that Sizes With Window

3 Answers 386 Views
GridView
This is a migrated thread and some comments may be shown as answers.
Carlos
Top achievements
Rank 1
Carlos asked on 05 Feb 2014, 09:18 PM
Hi, 

I'm trying to place two grids in a window that looks like the below.

----------------------------------------------------------------
|                                                                              |
----------------------------------------------------------------
|                              |           |                                    |
|        GridView      |           |        GridView            |
|          Here            |           |          Here                 |
|                              |           |                                    |
|                              |           |                                    |
|                              |           |                                    |
|                              |           |                                    |
|----------------------------------------------------------------
|                                                                              |
----------------------------------------------------------------

Now the grids should resize with the window. This led me create a Grid with the following row and column definitions.
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>

This works great when there aren't very many items in the gridviews but the gridview in the left will almost always have over 1500 items in it. I did read your documentation where it states that placing gridviews in a spot where it measures infinity it will perform slowly. How would you recommend I layout the view so that the grid resizes with the window and still allows for a large amount of items?

3 Answers, 1 is accepted

Sort by
0
Carlos
Top achievements
Rank 1
answered on 05 Feb 2014, 09:26 PM
Oh, sorry, pasted wrong column/grid definitions. Here's the set:
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>

This makes the GridView load horrendously slow when it has a lot of rows.
0
Dimitrina
Telerik team
answered on 10 Feb 2014, 02:48 PM
Hello,

Why don't you place your RadGridView controls inside a container with Size "*"? That way the RadGridViews will auto size with the window.
For example I have placed two RadGridViews in the first row (Height="*") and one is in the first column (Width="*") and one in the second column (Width="*").
<Grid.ColumnDefinitions>
    <ColumnDefinition Width="*" />
    <ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
    <RowDefinition Height="*"/>
    <RowDefinition Height="Auto"/>
</Grid.RowDefinitions>

Regards,
Didie
Telerik

Check out the new Telerik Platform - the only modular platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native apps. Register for the free online keynote and webinar to learn more about the Platform on Wednesday, February 12, 2014 at 11:00 a.m. ET (8:00 a.m. PT).

0
Carlos
Top achievements
Rank 1
answered on 10 Feb 2014, 06:01 PM
Hi Didie,

Thanks for the reply. I had actually tried that prior to posting my question but decided to try it using the grid/column definitions you mentioned, loading the grid with 1800 items and voila! it worked within a couple of seconds. Tried it again on my project and it didn't work (meaning I stopped waiting for the grid to load after 20 seconds). That led me to really investigate. Eventually it led me to noticed that the grid performs excruciatingly slow if the row after the grid has a stack panel that spans all of the columns. The key being the columns span. If the StackPanel doesn't span the columns performance is in the two to three second range, when it does span the columns the grid is about 10 times slower.

I've tried to attach a project that reproduces the issue. but I guess the forum doesn't allow zip files.

So I'm going to have to apologize ahead of time but here's the sample form and code behind.

XAML
====
<Window
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation" x:Class="WpfApplication3.MainWindow"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <telerik:RadGridView x:Name="FirstGrid" Grid.Row="1" Grid.Column="0">

        </telerik:RadGridView>
        <telerik:RadGridView x:Name="SecondGrid" Grid.Row="1" Grid.Column="2">

        </telerik:RadGridView>
        <!-- Remove the Grid.ColumnSpan attribute and the grid will load a lot quicker, almost 10x quicker -->
        <StackPanel Grid.Row="2" >
            <telerik:RadButton Click="LoadOnClick" Content="Load Rows" Grid.Row="2" Grid.Column="0" />
        </StackPanel>
    </Grid>
</Window>

Code Behind
===========

using System;
using System.Collections.ObjectModel;
using System.Windows;

namespace WpfApplication3
{
    public class Row
    {
        public string Value1 { get; set; }

        public string Value2 { get; set; }

        public string Value3 { get; set; }

        public string Value4 { get; set; }
    }

    public partial class MainWindow : Window
    {
        ObservableCollection<Row> _rows;
        public MainWindow()
        {
            InitializeComponent();

            _rows = new ObservableCollection<Row>();

            FirstGrid.ItemsSource = _rows;
        }

        private void LoadOnClick(object sender, RoutedEventArgs e)
        {
            for (int i = 0; i < 1800; i++)
            {
                _rows.Add(new Row { Value1 = i.ToString(), Value2 = i.ToString(), Value3 = i.ToString(), Value4 = i.ToString() });
            }
        }
    }
}

Tags
GridView
Asked by
Carlos
Top achievements
Rank 1
Answers by
Carlos
Top achievements
Rank 1
Dimitrina
Telerik team
Share this question
or