Fixed Imagesize in GridImageColumn

[oserv Entwickler]

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]

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.  

Sample Link: http://www.syncfusion.com/downloads/support/forum/141045/ze/DataGridDemo1858081343   

 

Regards,  

Vigneshkumar R 

[oserv Entwickler]

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.  

Sample Link: http://www.syncfusion.com/downloads/support/forum/141045/ze/DataGridDemo1858081343   

 

Regards,  

Vigneshkumar R 

Hi Vigneshkumar,

thanks for your reply. That's what I needed.

All works

[Vigneshkumar Ramasamy]

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