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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Fixed Imagesize in GridImageColumn

Thread ID:

Created:

Updated:

Platform:

Replies:

141045 Nov 20,2018 11:55 AM UTC Nov 22,2018 04:57 AM UTC Xamarin.Forms 3
loading
Tags: SfDataGrid
Andreas Bürstner
Asked On November 20, 2018 11:55 AM UTC

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

Vigneshkumar Ramasamy [Syncfusion]
Replied On November 21, 2018 12:20 PM UTC

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 


Andreas Bürstner
Replied On November 21, 2018 01:55 PM UTC

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

Vigneshkumar Ramasamy [Syncfusion]
Replied On November 22, 2018 04:57 AM UTC

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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;