We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

Resize multiple columns if they don't fill the allotted width of the grid

Is it possible for the grid to resize the columns so that if they aren't wide enough to fill the entire width allotted to the grid, multiple columns (and possibly all columns) stretch to take up the remaining space?  LastColumnFill is similar to what I want, but I would like it to act on multiple columns. Star sizing is also close, but if my grid has too many columns star sizing forces them all to be too small and prevents horizontal scrolling.

3 Replies

DD Dharmendar Dhanasekar Syncfusion Team May 1, 2017 06:53 AM UTC

Hi Clint,

Thanks for using Syncfusion Product.

Yes, you can resize the column as you want. SfDataGrid.ColumnSizer property adjusts the width of  all the column based on the given value.

Please refer below link to know how to use SfDataGrid.ColumnSizer property.

UG Link: https://help.syncfusion.com/xamarin-ios/sfdatagrid/column-sizer 

Regarding query “ columns star sizing forces them all to be too small and prevents horizontal scrolling”

You can also specify the different Column Sizer for each and individual column using GridColumn.ColumnSizer property. Which will allow that specific column to adjust its width based on GridColumn.ColumnSizer property instead of SfDataGrid.ColumnSizer property.

You can also skip column from getting involved in Column Sizer calculation by setting GridColumn.Width property.

We have prepared sample based on your requirement and please download the same from below link.

Sample Link : https://www.syncfusion.com/downloads/support/forum/130220/ze/Column_Sizer-1154341921

Please let us know it helps.

Regards,
Dharmendar 
 
 
 



CA Clint Anderson May 1, 2017 02:01 PM UTC

OK, so in that example there are 11 columns. This would be too many to display on an iPad (and unusable on an iPhone.)  So for cases like this [dataGrid.ColumnSizer = ColumnSizer.Star;] wouldn't really be usable.

If I try to adjust the size of Shipping Date, it will just shrink other columns to make sure everything fits.  So for grids with lots of columns, ColumnSizer.Star isn't a good choice.


This has led me to use [dataGrid.ColumnSizer = ColumnSizer.None;] at the grid level, and then for each column I specify either something like [Column.Width = minimumColumnWidth] or [Column.ColumnSizer = ColumnSizer.Star].  This way, I can set some columns to a width that I know will at least fit the data, and other columns can try to resize themselves to either fill the grid or size appropriately where the grid is now scrollable.

This solution works well for most cases.  If I have some columns that have a specified width and all columns are still too small to fill the grid, then the star columns fill out the rest of the grid.  If I have so many columns that they are too wide for the grid, the grid allows horizontal scrolling and the star columns are small but generally large enough to reasonably fit the header and the data.

This had led to the the issue I am having, which might be a bug.  If I specify ColumnSizer.None for the grid, and ColumnSizer.Star for all of the columns, the columns do not resize to fill the grid.  If I set the width for at least one of the columns, the Star columns do correctly fill out the remaining space.


PS Pavithra  Sivakumar Syncfusion Team May 2, 2017 11:07 AM UTC

Hi Clint, 
 
Thanks for the update. 
 
Your  requirement of setting different ColumnSizer based on the device can be achieved by using below code example. 
 
private void DataGrid_AutoGeneratingColumn(object sender, AutoGeneratingColumnArgs e) 
{ 
    if (UIDevice.CurrentDevice.UserInterfaceIdiom == UIUserInterfaceIdiom.Pad) 
    { 
        if (e.Column.MappingName == "OrderID" || e.Column.MappingName == "EmployeeID" || e.Column.MappingName == "CustomerID") 
              e.Column.Width = 40; 
        else 
              e.Column.ColumnSizer = ColumnSizer.Star; 
    } 
    else if (UIDevice.CurrentDevice.UserInterfaceIdiom == UIUserInterfaceIdiom.Phone) 
    { 
         if (e.Column.MappingName == "OrderID" || e.Column.MappingName == "EmployeeID" || e.Column.MappingName == "CustomerID") 
              e.Column.ColumnSizer = ColumnSizer.Star; 
         else 
               e.Column.ColumnSizer = ColumnSizer.Auto; 
    } 
} 
 
 
We confirm that the issue “ColumnSizer is not applied for the columns if all the Columns have ColumnSizer as Star” is a defect. A support incident to track the status of this defect has been created under your account. Please log on to our support website to check for further updates.      
 
 
Regards, 
Pavithra S 


Loader.
Up arrow icon