Syncfusion WPF SfDatagrid GridImageColumn width

Question

I added a GridImageColumn to my grid and am adding an image to it. It seems that the width of the column (when I set the ColumnSizer="Auto") is being set to the length of the url I am dl'ing the image from, and not the actual image size. If I use some really short url, the column's width is also really small.

Is this expected? Do I need to just explicitly set the width of the column? What I want is for the column to automatically be the width of the widest image in the column.

Here is the grid:

            <syncfusion:SfDataGrid  x:Name="dataGrid" ItemsSource="{Binding TestItems}" ColumnSizer="Auto">
                <syncfusion:SfDataGrid.Columns>
                    <syncfusion:GridImageColumn
                        MappingName="TEST"
                        HeaderText="TEST"
                        Stretch="None"
                        TextAlignment="Center"
                        ValueBinding="{Binding Path=ImagePath, Converter={StaticResource StringToImageConverter}}" />
                </syncfusion:SfDataGrid.Columns>
            </syncfusion:SfDataGrid>

Here is StringToImageConverter. It just fetches the BitmapImage and returns it:

class StringToImageConverter : IValueConverter
{
    private const string UriPrefix = "https://www.someprefix.com";

    public object Convert(object value, Type targetType,
        object parameter, CultureInfo culture)
    {
        string imageName = value is string ? UriPrefix + value : string.Empty;
        return new BitmapImage(new Uri(imageName, UriKind.RelativeOrAbsolute));
    }

    public object ConvertBack(object value, Type targetType,
        object parameter, CultureInfo culture)
    {
        return null;
    }
}

And it comes out looking like this (the image has a width of 112 and the url is pretty long, basically as wide as the column is in the below screenshot):

Note that I am able to reproduce the issue using http://www.syncfusion.com/downloads/support/directtrac/215737/ze/GridDropDownAndReadOnlyColumns27872867.zip.

To reproduce, replace the orderInfo.ImageLink properties with @"https://ffrk.denagames.com/dff/static/lang/image/sphere_material/131008300/131008300_112.png" and in StringToImageConverter replace UriKind.Relative with UriKind.RelativeOrAbsolute.

I am on Syncfusion 16.2.0.50.

Deivaselvan Y · Answer

Hi Tony, 

By default, in SfDataGrid the width of the column is calculated based on the data maintained in underlying collection. In underlying collection URL will be in the form of Text and so the width is calculated based on that. In order to avoid this, you can override GetCellSize method in GridColumnSizer as like below code snippet 





this.AssociatedObject.GridColumnSizer = new CustomGridColumnSizer(this.AssociatedObject); 
 
public class CustomGridColumnSizer : GridColumnSizer 
{ 
      public CustomGridColumnSizer(SfDataGrid grid) : base(grid) 
      { 
 
      } 
 
      protected override Size GetCellSize(Size rect, GridColumn column, object data, GridQueryBounds bounds) 
      { 
            if (column is GridImageColumn) 
            { 
                var orderinfo = data as OrderInfo; 
                if (orderinfo != null) 
                { 
                    var bitmapImage = new BitmapImage(new Uri(orderinfo.ImageLink)); 
                    byte[] imageData = new WebClient().DownloadData(orderinfo.ImageLink); 
                    MemoryStream imgStream = new MemoryStream(imageData); 
                    System.Drawing.Image img = System.Drawing.Image.FromStream(imgStream); 
 
                    int wSize = img.Width; 
                    int hSize = img.Height; 
 
                    return new Size(wSize, hSize); 
                } 
            } 
            return base.GetCellSize(rect, column, data, bounds); 
        } 
    } 
} 

Also you need to define RowHeight based on the image height, only then the image width will appear properly. And you can set RowHeight as like below code snippet 






<syncfusion:SfDataGrid AllowEditing="True" x:Name="dataGrid" 
                                       AutoGenerateColumns="False"  
                                       RowHeight="122" 
                                       ItemsSource="{Binding OrderList}" 
                                       ShowRowHeader="True"> 


Please find sample for the same from below link and let us know if this helps you 
Sample Link : 
http://www.syncfusion.com/downloads/support/forum/140123/ze/GridImageColumnDemo312153360 

Regards, 
Deivaselvan

Tony · Answer

Thanks.Is there a way to set the height dynamically, based on the image height, the same way as we do for the cell width?If we need to hard code the height I may as well hard code the width too, which kind of defeats the purpose.

Deivaselvan Y · Answer

Hi Tony,You can achieve your requirement to update the row height based on the cell contents at runtime using QueryRowHeight event of DataGrid class. Refer the below code example for the same. 




this.AssociatedObject.QueryRowHeight += AssociatedObject_QueryRowHeight; 
 
private void AssociatedObject_QueryRowHeight(object sender, QueryRowHeightEventArgs e) 
{ 
    double height = this.AssociatedObject.RowHeight; 
    if (this.AssociatedObject.GridColumnSizer.GetAutoRowHeight(e.RowIndex, new GridRowSizingOptions(), out height)) 
    { 
        if (height > this.AssociatedObject.RowHeight) 
            e.Height = height; 
        else 
            e.Height = this.AssociatedObject.RowHeight; 
        e.Handled = true; 
    } 
} 
Please find the modified sample for the same from the below link. Try running this sample and let us know if this helps you.Sample link:http://www.syncfusion.com/downloads/support/forum/140123/ze/GridDropDownAndReadOnlyColumns724073375.zip Also, refer the below documentation for more details on QueryRowHeight event.https://help.syncfusion.com/wpf/sfdatagrid/row-height-customization#fit-the-row-height-based-on-its-content Regards,Deivaselvan