Resizing * columns

8 posts, 1 answers
  1. James
    James avatar
    117 posts
    Member since:
    Mar 2009

    Posted 11 Oct 2010 Link to this post

    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.
  2. Maya
    Admin
    Maya avatar
    4062 posts

    Posted 15 Oct 2010 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. James
    James avatar
    117 posts
    Member since:
    Mar 2009

    Posted 08 Nov 2010 Link to this post

    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>
  4. Maya
    Admin
    Maya avatar
    4062 posts

    Posted 11 Nov 2010 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  5. James
    James avatar
    117 posts
    Member since:
    Mar 2009

    Posted 11 Nov 2010 Link to this post

    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.
  6. Answer
    Tsvyatko
    Admin
    Tsvyatko avatar
    863 posts

    Posted 12 Nov 2010 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  7. James
    James avatar
    117 posts
    Member since:
    Mar 2009

    Posted 10 Mar 2011 Link to this post

    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.
  8. Gopala
    Gopala avatar
    28 posts
    Member since:
    Jul 2012

    Posted 14 Jun 2013 Link to this post

    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;
        }
Back to Top