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

How to change text GridTextColumnl to image?

Hello,
In my sfDataGrid I would like to change heder text in only one column to image or fontAwesomeIcon. I use Mapping Name in xaml.

I thought something was wrong in my project, but it didn't work on the sample too.

I have tried to use the FontAwesomeIcon directly and with converters and I still can't display any elements except text only.

Please help,
Tick


               
           
               
                           
                               
                                   
                               

                           

                       

                   

               

   


4 Replies

BK Bartosz Kleszcz September 12, 2019 09:10 AM UTC

        <syncfusion:SfDataGrid x:Name="dataGrid" ItemsSource="{Binding OrderInfoCollection}">
            <syncfusion:SfDataGrid.Columns>
                <syncfusion:GridTextColumn MappingName="OrderID">
                            <syncfusion:GridTextColumn.HeaderTemplate>
                                <DataTemplate>
                                    <Image Source="No.png" HeightRequest="10" WidthRequest="10"/>
                                </DataTemplate>
                            </syncfusion:GridTextColumn.HeaderTemplate>
                        </syncfusion:GridTextColumn>
                    </syncfusion:SfDataGrid.Columns>
                </syncfusion:SfDataGrid>


BS Balasubramani Sundaram Syncfusion Team September 13, 2019 11:12 AM UTC

Hi Bartosz,     
    
Thank you for contacting Syncfusion support.    
    
We have checked the issue “Image isn’t loading inside the GridTemplateColumn”. In template column we will display whatever the view loaded inside it we will display it and based on the Xamarin documentation we need to change the property of the image to “Embedded Resource”.    
    
Please refer the below sample and code snippet.  
    
Code Snippet [MainPage.xaml]    
    
<dataGrid:SfDataGrid    
     ......    
     HeaderRowHeight="100"    
        >    
    <dataGrid:SfDataGrid.Columns x:TypeArguments="syncfusion:Columns">    
        <dataGrid:GridTextColumn  MappingName="OrderID"  Padding="0,0,0,0">    
            <dataGrid:GridTextColumn.HeaderTemplate>    
                <DataTemplate>    
             
              <Image x:Name="headerImage" Source="Right.jpg"  HeightRequest="100" WidthRequest="50"/>    
                </DataTemplate>    
            </dataGrid:GridTextColumn.HeaderTemplate>    
        </dataGrid:GridTextColumn>    
        <dataGrid:GridTextColumn  MappingName="EmployeeID"/>    
        <dataGrid:GridTextColumn   MappingName="CustomerID"/>    
    </dataGrid:SfDataGrid.Columns>    
</dataGrid:SfDataGrid>    
  
    
    
    
     
   
Please get back to us if you require further assistance from us.    
     
Regards,
Balasubramani Sundaram
  
 
 



BK Bartosz Kleszcz September 18, 2019 09:14 AM UTC

Hi. Thank you for feedback. Now I can display image but I can not set visibility by Binding.
I work in your SupportXForms project.

<Image x: Name = "headerImage" Source = "Right.jpg" HeightRequest = "100" WidthRequest = "100" IsVisible = "{Binding IsVisible}" />

I set property to false and still I see "Right" image.

In my project I want to have control over this cell and change its visibility depending on my needs.




BS Balasubramani Sundaram Syncfusion Team September 19, 2019 12:11 PM UTC

Hi Bartosz,    
   
Thanks for the update.    
   
When we are binding inside any property in DataTemplate, we need to bind the source reference to that property or set the BindingContext to the control as shown in the below code snippet. After setting the source reference to the “Isvisible” property its working fine as we expected.   
   
Please refer the below sample and code snippet.  
   
Code Snippet [C#]   
       
[MainPage.xaml]   
<dataGrid:GridTextColumn.HeaderTemplate>   
        <DataTemplate>   
            <Image x:Name="headerImage" Source="Right.jpg" HeightRequest="100"WidthRequest="50" IsVisible="{Binding IsVisible, Source={x:Reference _viewModel}}"/>   
        </DataTemplate>       
</dataGrid:GridTextColumn.HeaderTemplate>   
 
Or  
 
<dataGrid:GridTextColumn.HeaderTemplate>   
        <DataTemplate>   
            <Image BindingContext={x: Reference _viewModel}  x:Name="headerImage" Source="Right.jpg" HeightRequest="100"WidthRequest="50" />   
        </DataTemplate>       
</dataGrid:GridTextColumn.HeaderTemplate>   
  
   
   
   
Please get back to us if you require further assistance from us.   
   
Regards,
Balasubramani Sundaram 
 


Loader.
Live Chat Icon For mobile
Up arrow icon