Resizing * columns

[James]

Hi,

I have a grid with a few columns with fixed width and one of * towards the middle to fill up the available space. I can resize all the columns except for the boundary on the right-hand-side of the * column in the direction of making the * column smaller. I can hypothesise various explanations as to why this might be, but from a user perspective 'it doesn't work right'. Am I doing something wrong, or is this a known limitation?

Thanks, James.

[Maya]

Hello James,

The behavior you encountered is the expected one. What you may do to work around this is to either set the ColumnWidth property of the grid to "*" or set the last column Width property to "*". Thus, the grid will be filled up but still the columns (except for the last one when its Width is set to "*) will be resized.
 

Regards,
Maya
the Telerik team

[James]

Hi Maya,

Thanks for your answer. I've tried both solutions, but neither works. There's still a limit as to how much I can make a given field grow, and I can't explain why. While you want to be able to set default values for column widths, I think the grid should behave like excel, and allow users to resize columns if they want.

I'll paste in below my code in case that helps to explain what's going wrong.

Thanks, James.

<telerikGridView:RadGridView x:Name="ItemsGrid" Grid.Row="3" AutoGenerateColumns="False" ShowGroupPanel="False"
                                    IsReadOnly="True" MinHeight="50" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
                                    ItemsSource="{Binding PagedSource, ElementName=ItemsGridDataPager}" RowIndicatorVisibility="Collapsed"
                                    Filtered="ItemsGrid_Filtered" SelectionMode="Extended" FrozenColumnCount="1" ColumnWidth="*"
                                    IsSynchronizedWithCurrentItem="False">
                                    <telerikGridView:RadGridView.Columns>
                                        <telerikGridView:GridViewDataColumn IsFilterable="False" IsSortable="False" CellStyle="{StaticResource cellStyle}" Width="45" Header="" DataMemberBinding="{Binding Title}" ></telerikGridView:GridViewDataColumn>
                                        <telerikGridView:GridViewSelectColumn UniqueName="columnSelectItem" Width="Auto">
                                            <telerikGridView:GridViewSelectColumn.Header>
                                                <CheckBox Click="CheckBox_Click" />
                                            </telerikGridView:GridViewSelectColumn.Header>
                                        </telerikGridView:GridViewSelectColumn>
                                        <telerikGridView:GridViewDataColumn Header="" DataMemberBinding="{Binding ItemStatus}" IsFilterable="False" Width="14">
                                            <telerikGridView:GridViewDataColumn.ToolTipTemplate>
                                                <DataTemplate>
                                                    <TextBlock Text="{Binding ItemStatusTooltip}"/>
                                                </DataTemplate>
                                            </telerikGridView:GridViewDataColumn.ToolTipTemplate>
                                        </telerikGridView:GridViewDataColumn>
                                        <telerikGridView:GridViewDataColumn x:Name="DataColumnId" Header="ID" DataMemberBinding="{Binding ItemId}" ShowDistinctFilters="False" Width="60" IsVisible="False"></telerikGridView:GridViewDataColumn>
                                        <telerikGridView:GridViewDataColumn x:Name="DataColumnOldId" Header="YourID" DataMemberBinding="{Binding OldItemId}" ShowDistinctFilters="False" Width="71" IsVisible="False"></telerikGridView:GridViewDataColumn>
                                        <telerikGridView:GridViewDataColumn x:Name="DataColumnAuthors" Header="Authors" DataMemberBinding="{Binding Authors}" ShowDistinctFilters="False" Width="100" ></telerikGridView:GridViewDataColumn>
                                        <telerikGridView:GridViewDataColumn x:Name="DataColumnTitle" Header="Title" DataMemberBinding="{Binding Title}" ShowDistinctFilters="False"></telerikGridView:GridViewDataColumn>
                                        <telerikGridView:GridViewDataColumn x:Name="DataColumnJournal" Header="Journal" DataMemberBinding="{Binding ParentTitle}" ShowDistinctFilters="True" Width="70" IsVisible="False"></telerikGridView:GridViewDataColumn>
                                        <telerikGridView:GridViewDataColumn x:Name="DataColumnShortTitle" Header="Short title" DataMemberBinding="{Binding ShortTitle}" ShowDistinctFilters="False" Width="70" IsVisible="False"></telerikGridView:GridViewDataColumn>
                                        <telerikGridView:GridViewDataColumn x:Name="DataColumnItemType" Header="Type" DataMemberBinding="{Binding TypeName}" ShowDistinctFilters="True" Width="90" IsVisible="False"></telerikGridView:GridViewDataColumn>
                                        <telerikGridView:GridViewDataColumn x:Name="DataColumnYear" Header="Year" DataMemberBinding="{Binding Year}" ShowDistinctFilters="True" Width="*" MaxWidth="70" IsVisible="True"></telerikGridView:GridViewDataColumn>
                                    </telerikGridView:RadGridView.Columns>
                                </telerikGridView:RadGridView>

[Maya]

Hi James,

Once you set a particular column's width to "*", it will fill up the whole left space. That is why it is not expected to be able to resize it as its width depends on the width of the other columns. Setting the ColumnWidht property to "*" will ensure that the whole grid is filled up. 

Sincerely yours,
Maya
the Telerik team

[James]

Hi Maya,

I understand that, but I thought the intention was to make the control as 'excel-like' as possible. When I try to increase the size of an excel cell, I don't expect to run into a hidden barrier that prevents the cell resizing for no readily apparent reason. (Especially if it then prevents me from seeing what I need to in other cells.) What's frustrating is that I can't see how to fix this in my code. I need to set relative sizes initially for the columns in the grid, even though I have to allow for different screen resolutions etc, and don't want it scrolling at all, so guess I need to set * for the width of at least one column? Or am I misunderstanding this somewhere?

Thanks for your help, James.

[Tsvyatko]

Hello James,

As I understand from your previous posts the behavior you would like to achieve is sizing the grid to the available space and then giving the users opportunity to resize them freely. Unfortunately, excel-like experience does illustrates slightly different scenario, since in excel  horizontal scroll bar is always displayed in these cases.

In scenarios with * columns the idea is to adjust grid contents to always fit in the visible area - both when contents fits in smaller or larger area.

Since implementing the desired scenario as build-in option could lead to unexpected results (such as shrinking * column to its min size so that it will start shrinking columns on the right results in extending the grid size beyond visible viewport) this behavior is not supported in the Gridview by default.

However, I can suggest  solution through RadGridView's attached behavior. It illustrated how to achieve scenario similar to the one described above. Please have a look at the attachment and let me know if this behavior describes the desired effect in your scenario.

Regards,
Tsvyatko
the Telerik team

[James]

Hi Tsvyatko,

Thanks very much - I'd have never thought of that! (I've not used <i:Interaction.Behaviors> before).

Thanks for your help, James.

[Gopala]

The sample application was really helpful. I had same issue and I made following changes in my behavior

void AssociatedObject_ColumnWidthChanged(object sender, ColumnWidthChangedEventArgs e)
    {
      if (ResizingColumnBeforeStar)
      {
        //var nextColumn = this.AssociatedObject.Columns[e.Column.DisplayIndex + 1];

        //nextColumn.Width = new GridViewLength(nextColumn.ActualWidth, GridViewLengthUnitType.Star);
      }

      PreviousChange = 0;
      ResizingColumnBeforeStar = false;
    }

void AssociatedObject_ColumnWidthChanging(object sender, ColumnWidthChangingEventArgs e)
    {
      if(e.Column.ActualWidth == e.Column.MinWidth) return; // stop shrinking if you reach minwidth

      List<GridViewColumn> visibleColumns = new List<GridViewColumn>();

      //get all visible columns
      foreach (GridViewColumn column in this.AssociatedObject.Columns)
      {
        if(column.IsVisible)
          visibleColumns.Add(column);
      }

      GridViewColumn nextColumn = null;

      //get what is current resizing column
      GridViewColumn currentColumn = visibleColumns.FirstOrDefault(p => p.DisplayIndex == e.Column.DisplayIndex);
      int index = visibleColumns.IndexOf(currentColumn); // get index of current resizing column

      if (currentColumn == visibleColumns.Last()) // if current resizing column is last visible column then next column is current column
        nextColumn = currentColumn;
      else // if not get next visible column
        nextColumn = visibleColumns.ElementAt(index + 1);      
       
      if (e.Column.Width.IsStar && e.Column.DisplayIndex < this.AssociatedObject.Columns.Count - 1 && e.HorizontalChangeWidth - PreviousChange < 0)
      {
        if (!nextColumn.Width.IsStar)
        {
          nextColumn.Width = new GridViewLength(nextColumn.ActualWidth - (e.HorizontalChangeWidth - PreviousChange));

        }
      }
      else if (e.Column.DisplayIndex < this.AssociatedObject.Columns.Count - 1 && (nextColumn.Width.IsStar || ResizingColumnBeforeStar))
      {
        ResizingColumnBeforeStar = true;
        nextColumn.Width = new GridViewLength(nextColumn.ActualWidth - (e.HorizontalChangeWidth - PreviousChange));
        //nextColumn.Width = new GridViewLength(nextColumn.ActualWidth - 10);
      }

      PreviousChange = e.HorizontalChangeWidth;
    }