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: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to change text GridTextColumnl to image?

Thread ID:

Created:

Updated:

Platform:

Replies:

147487 Sep 12,2019 09:04 AM UTC Sep 19,2019 12:11 PM UTC Xamarin.Forms 4
loading
Tags: SfDataGrid
Bartosz Kleszcz
Asked On September 12, 2019 09:08 AM UTC

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


               
           
               
                           
                               
                                   
                               

                           

                       

                   

               

   


Bartosz Kleszcz
Replied On 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>

Balasubramani Sundaram [Syncfusion]
Replied On 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
  
 
 


Bartosz Kleszcz
Replied On 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.



Balasubramani Sundaram [Syncfusion]
Replied On 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 
 


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

Live Chat Icon For mobile
Live Chat Icon