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

Fixed Imagesize in GridImageColumn

Hi all,
I have to calculate the row height, in the QueryRowHeight event, to ensure, that large text will be shown in a text column. This works perfect. Unfortunalty, I have a additional GridImageColumn to show an icon loaded via a URIImageSource. Now the icon scales with the height of the row. It looks not nice, when the rows have different sizes in the icon. Is there a possibility to fix the shown size of an image in a GridImageColumn.

Thanks for the reply

Andreas

3 Replies

VR Vigneshkumar Ramasamy Syncfusion Team November 21, 2018 07:20 AM

Hi Andreas,  
 
Thanks for contacting Syncfusion Support.  
 
We checked your query and your requirement to load the images in the fixed size cannot be achieved in GridImageColumn, however it can be achieved by using theSfDataGrid.GridTemplateColumn. You can load the image in the Frame and set the HeightRequest, WidthRequest, HorizontalOptions, VerticalOptions to the Image and padding to the Frame to which image is added as the child.  You also need to exclude the image column while querying row height. Please find the code snippet of the same below.  
 
GridTemplateColumn templateColumn = new GridTemplateColumn();  
templateColumn.MappingName = "DealerImage";  
templateColumn.CellTemplate = new DataTemplate(() =>  
{  
    Frame frame = new Frame();  
    Image image = new Image();  
    image.Source = ImageSource.FromResource("DataGridDemo.Image2.png");  
    image.HeightRequest = 25;  
    image.WidthRequest = 25;  
    image.HorizontalOptions = LayoutOptions.Center;  
    image.VerticalOptions = LayoutOptions.Center;  
    frame.Content = image;  
    frame.Padding = 0;  
    return frame;  
});  
sfGrid.Columns.Add(templateColumn);  
 
private void OnDataGrid_QueryRowHeight(object sender, QueryRowHeightEventArgs e)  
{  
    if (e.RowIndex != 0)  
    {  
        if (e.Height != sfGrid.RowHeight)  
            return;  
  
        GridRowSizingOptions options = new GridRowSizingOptions();  
        options.ExcludeColumns.Add("DealerImage");  
  
        e.Height = sfGrid.GetRowHeight(e.RowIndex, options);  
        e.Handled = true;  
    }  
}  


 
We have prepared the sample to achieve your requirement, you can download the same from the below link.  
 
Regards,  
Vigneshkumar R 



AB Andreas Bürstner replied to Vigneshkumar Ramasamy November 21, 2018 08:55 AM

Hi Andreas,  
 
Thanks for contacting Syncfusion Support.  
 
We checked your query and your requirement to load the images in the fixed size cannot be achieved in GridImageColumn, however it can be achieved by using theSfDataGrid.GridTemplateColumn. You can load the image in the Frame and set the HeightRequest, WidthRequest, HorizontalOptions, VerticalOptions to the Image and padding to the Frame to which image is added as the child.  You also need to exclude the image column while querying row height. Please find the code snippet of the same below.  
 
GridTemplateColumn templateColumn = new GridTemplateColumn();  
templateColumn.MappingName = "DealerImage";  
templateColumn.CellTemplate = new DataTemplate(() =>  
{  
    Frame frame = new Frame();  
    Image image = new Image();  
    image.Source = ImageSource.FromResource("DataGridDemo.Image2.png");  
    image.HeightRequest = 25;  
    image.WidthRequest = 25;  
    image.HorizontalOptions = LayoutOptions.Center;  
    image.VerticalOptions = LayoutOptions.Center;  
    frame.Content = image;  
    frame.Padding = 0;  
    return frame;  
});  
sfGrid.Columns.Add(templateColumn);  
 
private void OnDataGrid_QueryRowHeight(object sender, QueryRowHeightEventArgs e)  
{  
    if (e.RowIndex != 0)  
    {  
        if (e.Height != sfGrid.RowHeight)  
            return;  
  
        GridRowSizingOptions options = new GridRowSizingOptions();  
        options.ExcludeColumns.Add("DealerImage");  
  
        e.Height = sfGrid.GetRowHeight(e.RowIndex, options);  
        e.Handled = true;  
    }  
}  


 
We have prepared the sample to achieve your requirement, you can download the same from the below link.  
 
Regards,  
Vigneshkumar R 


Hi Vigneshkumar,
thanks for your reply. That's what I needed.
All works


VR Vigneshkumar Ramasamy Syncfusion Team November 21, 2018 11:57 PM

Hi Andreas,   
 
We glad to know that your requirement has been achieved. Please get in touch if you required further assistance on this. 
   
Regards 
Vigneshkumar R 


Loader.
Live Chat Icon For mobile
Up arrow icon